اذهب إلى المحتوى

السؤال

نشر

السلام عليكم ,

عند مشكلة فى تصميم header الذى يحتوى على الصفحات و لوجو , فانا صممت بحيث اذا نزل المستخدم بالموقع الى اسفل الصفحة يظل ثابتا فى اعلى الصفحة

المشكلة انه عند النزول لاسفل الصفحة توجد مسافة بين header واعلى الصفحة

proplm.png.cbe2818171612f0022fd9ce9405c232d.png

هنالك مسافة بين المستظيل الاحمر و اعلى الصفحة 

اريد حل هذه المشكلة , شكرا لكل من ساعد

كود 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;
	
}

 

Recommended Posts

  • 0
نشر

قم تحديد موضع عنصر 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;
}

 

  • 0
نشر

لمحاولة حل المشكلة بنفسك يمكنك استخدام ال DevTools في المتصفح  لتحديد وتحليل المشكلة مثلاً ال margin الزائدة بين الهيدر وأعلى الصفحة عن طريق خطوات بسيطة مثل 

  • فتح صفحة الويب التي تحتوي على المشكلة في متصفح الويب الخاص بك.
  • انقر بزر الماوس الأيمن في المكان الذي تظهر فيه المسافة الزائدة بين الهيدر وأعلى الصفحة.
  • اختر "Inspect" أو "Inspect Element" من القائمة المنبثقة. ستفتح نافذة "DevTools" على الجانب الأيمن من الشاشة.
  • في "DevTools"، استخدم محدد العناصر (Inspector) لتحديد عنصر الهيدر. ستظهر لك معلومات حول العنصر المحدد في الجزء الأيمن من "DevTools".
  • قم بفحص خصائص الهيدر في الجزء الأيمن من "DevTools"، بما في ذلك الهوامش (margin) والحواف (padding) والأبعاد وستستطيع تحليل المشكلة 

 

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...