Omar Mhmd نشر 6 أبريل 2024 أرسل تقرير نشر 6 أبريل 2024 السلام عليكم , عند مشكلة فى تصميم 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 أبريل 2024 أرسل تقرير نشر 6 أبريل 2024 قم تحديد موضع عنصر 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 أبريل 2024 أرسل تقرير نشر 6 أبريل 2024 بإمكانك أيضا إزالة كل الازاحات الإفتراضية والهوامش كالأتى * { padding: 0; margin: 0; } ال * هى لتحديد كل العناصر ويتم وضعها فى بداية ملف الCSS 1 اقتباس
0 عبدالباسط ابراهيم نشر 7 أبريل 2024 أرسل تقرير نشر 7 أبريل 2024 لمحاولة حل المشكلة بنفسك يمكنك استخدام ال DevTools في المتصفح لتحديد وتحليل المشكلة مثلاً ال margin الزائدة بين الهيدر وأعلى الصفحة عن طريق خطوات بسيطة مثل فتح صفحة الويب التي تحتوي على المشكلة في متصفح الويب الخاص بك. انقر بزر الماوس الأيمن في المكان الذي تظهر فيه المسافة الزائدة بين الهيدر وأعلى الصفحة. اختر "Inspect" أو "Inspect Element" من القائمة المنبثقة. ستفتح نافذة "DevTools" على الجانب الأيمن من الشاشة. في "DevTools"، استخدم محدد العناصر (Inspector) لتحديد عنصر الهيدر. ستظهر لك معلومات حول العنصر المحدد في الجزء الأيمن من "DevTools". قم بفحص خصائص الهيدر في الجزء الأيمن من "DevTools"، بما في ذلك الهوامش (margin) والحواف (padding) والأبعاد وستستطيع تحليل المشكلة اقتباس
السؤال
Omar Mhmd
السلام عليكم ,
عند مشكلة فى تصميم header الذى يحتوى على الصفحات و لوجو , فانا صممت بحيث اذا نزل المستخدم بالموقع الى اسفل الصفحة يظل ثابتا فى اعلى الصفحة
المشكلة انه عند النزول لاسفل الصفحة توجد مسافة بين header واعلى الصفحة
هنالك مسافة بين المستظيل الاحمر و اعلى الصفحة
اريد حل هذه المشكلة , شكرا لكل من ساعد
كود HTML
كود CSS
3 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.