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

السؤال

Recommended Posts

  • 0
نشر

سبب المشكلة هو انك تقوم باستدعاء الملف style.css قبل باقي ملفات الـ css الخاصة بالمكاتب المختلفة ولحل المشكلة قم بنقله إلى الاخير كما في الكود التالي :
 

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- css files  -->
	<link rel="stylesheet" href="/css/all.min.css">
	<link rel="stylesheet" href="/css/normalize.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
	<link rel="stylesheet" href="/css/style.css">
	<!-- font file -->
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;800&display=swap" rel="stylesheet">
	<title>Ksaper | template two</title>
</head>

حيث يجب ان يتم استيراد الملفات المخصصة (التي قمت بكتابتها بنفسك) في الاخير دائماً من اجل الا يتم تجاهلها لصالح الخصائص الخاصة بالمكاتب التي يتم استيرادها.

كما لاحظت وجود خطأ املائي في كتابة الـ class المسمى active في HTML  :

<nav>
  <ul>
    <li><a href="#" class="active">Services</a></li>
                          ^^^^^^^^
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Pricing</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <form action="" class="form">
    <i class="fas fa-search"></i>
  </form>
</nav>

 

  • 0
نشر
بتاريخ 4 ساعة قال عمر قره محمد:

سبب المشكلة هو انك تقوم باستدعاء الملف style.css قبل باقي ملفات الـ css الخاصة بالمكاتب المختلفة ولحل المشكلة قم بنقله إلى الاخير كما في الكود التالي :
 

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- css files  -->
	<link rel="stylesheet" href="/css/all.min.css">
	<link rel="stylesheet" href="/css/normalize.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
	<link rel="stylesheet" href="/css/style.css">
	<!-- font file -->
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;800&display=swap" rel="stylesheet">
	<title>Ksaper | template two</title>
</head>

حيث يجب ان يتم استيراد الملفات المخصصة (التي قمت بكتابتها بنفسك) في الاخير دائماً من اجل الا يتم تجاهلها لصالح الخصائص الخاصة بالمكاتب التي يتم استيرادها.

كما لاحظت وجود خطأ املائي في كتابة الـ class المسمى active في HTML  :

<nav>
  <ul>
    <li><a href="#" class="active">Services</a></li>
                          ^^^^^^^^
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Pricing</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <form action="" class="form">
    <i class="fas fa-search"></i>
  </form>
</nav>

 

المشكلة لم تحل مع الاسف

 

  • 0
نشر
بتاريخ منذ ساعة مضت قال Muhammad Alahmad:

المشكلة لم تحل مع الاسف

المشكلة بسبب أنه عند عمل Hover على عناصر قائمة التنقل، يتم تطبيق التنسيق التالي:

header nav ul li a:hover {
    color: var(--main-color);
    border-bottom: 1px solid var(--main-color);
}

وبسبب إضافة border-bottom تحدث تلك المشكلة.

  • 0
نشر

الحركة تحدث بسبب استخدام خاصية الـ border-bottom عند وضع المؤشر على العنصر , ولتجنب الحركة عليك باختيار احدى الحلين:
1- تجنب استخدام خاصية الـ border-bottom وقم بحذفها بحيث يصبح الكود كالتالي:
 

header nav ul li a:hover {
    color: var(--main-color);
}

2- يمكنك استخدام  خاصية الـ border-bottom مع وضع حجم 0px لمنع حدوث الحركة كالتالي:
 

header nav ul li a:hover {
    color: var(--main-color);
    border-bottom: 0px solid var(--main-color);
}

يمكنك استخدام تنسيقات اخرى عالعنصر مثل وضع خط تحت العنصر عند وضع المؤشر عليه كالتالي:
 

header nav ul li a:hover {
    color: var(--main-color);
    border-bottom: 0px solid var(--main-color);
    text-decoration:underline;
}

بالتوفيق

  • 0
نشر
بتاريخ 13 ساعة قال Muhammad Alahmad:

المشكلة لم تحل مع الاسف

الحل الوحيد لتطبيق ال border-bottom مع جعلها ثابته هو 

جعل ال border-bottom موجودة بالفعل قبل ال hover ولكن transparent وعند تنفيذ ال hover يتم تغيير اللون فقط لذلك الحل هو إضافة السطر التالي

header nav ul li a {
    padding: 40px 10px;
    display: block;
    color: white;
    text-decoration: none;
    font-size: 14px;
    transition: 0.3s;
    position: relative;
    z-index: 2;
    border-bottom: 1px solid transparent;/* إضافة هذا السطر فقط */
}

إضافة السطر السابق سيحل المشكلة

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...