Omar Mhmd نشر 6 أبريل أرسل تقرير نشر 6 أبريل السلام عليكم , عند مشكلة فى تصميم header الذى يحتوى على الصفحات و لوجو , فانا صممت بحيث اذا نزل المستخدم بالموقع الى اسفل الصفحة يظل ثابتا فى اعلى الصفحة المشكلة انه عند النزول لاسفل الصفحة توجد مسافة بين header واعلى الصفحة هنالك مسافة بين المستظيل الاحمر و اعلى الصفحة اريد حل هذه المشكلة , شكرا لكل من ساعد كود HTML <header> <div class="noget"> <a href="main.html" class="">الصفحة الرئسية</a> <a href="guide.html" class="">دليل مبرمجين</a> <a href="las.html" class="">دورات</a> <a href="book.html" class="">كتب</a> </div> <a href="" class="logo">اتعلم برمجة</a> </header> كود CSS header{ margin-top:0px; padding-top:0px; width: 100%; position: fixed; z-index: 999; display: flex; align-items: center; padding: 8px 40px; background-color:#0B6121; text-align:center; } .logo { text-decoration: none; color: #ACFA58; text-transform: uppercase; font-weight: 700; font-size: 1cm; text-align:center; padding-left:200px; } .noget a{ text-decoration: none; color: #ACFA58; font-size: 20px; font-weight: 100; transition: 0.7s ease; padding-right: 20px; text-align:center; padding-left:20px; } .noget a:hover{ text-decoration: none; color: #F7FE2E; font-size: 25px; font-weight: 100; padding-right: 20px; } 2 اقتباس
0 Mustafa Suleiman نشر 6 أبريل أرسل تقرير نشر 6 أبريل قم تحديد موضع عنصر header في البداية من خلال خاصية top وقيمة 0 لها كالتالي: header{ margin-top:0px; padding-top:0px; width: 100%; position: fixed; top: 0; z-index: 999; display: flex; align-items: center; padding: 8px 40px; background-color:#0B6121; text-align:center; } إن وجدت إزاحات أخرى، قم بتحديد الإزاحة بقيمة 0 لعنصر body: body { margin: 0; } 1 اقتباس
0 Mustafa Mahmoud7 نشر 6 أبريل أرسل تقرير نشر 6 أبريل بإمكانك أيضا إزالة كل الازاحات الإفتراضية والهوامش كالأتى * { padding: 0; margin: 0; } ال * هى لتحديد كل العناصر ويتم وضعها فى بداية ملف الCSS 1 اقتباس
0 عبدالباسط ابراهيم نشر 7 أبريل أرسل تقرير نشر 7 أبريل لمحاولة حل المشكلة بنفسك يمكنك استخدام ال DevTools في المتصفح لتحديد وتحليل المشكلة مثلاً ال margin الزائدة بين الهيدر وأعلى الصفحة عن طريق خطوات بسيطة مثل فتح صفحة الويب التي تحتوي على المشكلة في متصفح الويب الخاص بك. انقر بزر الماوس الأيمن في المكان الذي تظهر فيه المسافة الزائدة بين الهيدر وأعلى الصفحة. اختر "Inspect" أو "Inspect Element" من القائمة المنبثقة. ستفتح نافذة "DevTools" على الجانب الأيمن من الشاشة. في "DevTools"، استخدم محدد العناصر (Inspector) لتحديد عنصر الهيدر. ستظهر لك معلومات حول العنصر المحدد في الجزء الأيمن من "DevTools". قم بفحص خصائص الهيدر في الجزء الأيمن من "DevTools"، بما في ذلك الهوامش (margin) والحواف (padding) والأبعاد وستستطيع تحليل المشكلة اقتباس
السؤال
Omar Mhmd
السلام عليكم ,
عند مشكلة فى تصميم header الذى يحتوى على الصفحات و لوجو , فانا صممت بحيث اذا نزل المستخدم بالموقع الى اسفل الصفحة يظل ثابتا فى اعلى الصفحة
المشكلة انه عند النزول لاسفل الصفحة توجد مسافة بين header واعلى الصفحة
هنالك مسافة بين المستظيل الاحمر و اعلى الصفحة
اريد حل هذه المشكلة , شكرا لكل من ساعد
كود HTML
كود CSS
3 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.