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

السؤال

نشر

لقد انهيت مساري html css لذلك احببت ان اختبر نفسي واصمم صفحة شخصية بسيطة

واجهتني بعض المشاكل التي لم اجد لها حلا

1- اريد عندما امرر المؤشر فوقhome و و و ان يضهر المربع دون تحرك العناصر الاخرى

2-اود ان تكون الخلفية غامقة نوعا ما لكي يسهل رؤية الكتابة

وشكرا

kingsalman.html

style.css

Recommended Posts

  • 1
نشر

مرحباً @Thamer Alfaifi

بتاريخ 51 دقائق مضت قال Thamer Alfaifi:

لقد انهيت مساري html css لذلك احببت ان اختبر نفسي واصمم صفحة شخصية بسيطة

جيد بما أنك أردت التطبيق على ما تعلمته و هذا ما أنصحك به دائما طبق على ما تتعلمه حتى تتطور و تترسخ لديك المعلومات.

بتاريخ 51 دقائق مضت قال Thamer Alfaifi:

1- اريد عندما امرر المؤشر فوقhome و و و ان يضهر المربع دون تحرك العناصر الاخرى

سبب تحرك العناصر ليس أنها تتحرك و إنما الborder هو الذي يدفعها فهو لم يكن موجودا و عند تمرير الفأرة فوق العنصر يتم إضافته و بالتالي يأخذ مساحة 2px من كافة الجوانب مما يؤدي إلى دفع العناصر الأخرى و بالتالي يظهر لك و كأنها تحركت،

و الحل بإضافة الborder في الحالة العادية و جعله شفاف و عند تمرير الفأرة أي عند ال hover نُغير اللون بهذا الشكل:

ul li {
    overflow: auto;
    text-emphasis: none;
    display: inline;
    margin: 20px;
    padding: 5px 20px;
    border: 2px solid transparent; /* إضافة بوردر شفاف */
}

ul li:hover{
    border: 2px solid #fff; /* تغيير اللون */
    background-color: fuchsia;
} 

 

بتاريخ 51 دقائق مضت قال Thamer Alfaifi:

2-اود ان تكون الخلفية غامقة نوعا ما لكي يسهل رؤية الكتابة

الأمر يعتمد على ما الذي تريد الوصول إليه أنت حالياً تستخدم صورة بيضاء و لون الكتابة أيضاً أبيض فيُمكنك إما تغيير الصورة إلى صورة مُتوافقة مع الأبيض أو تغيير اللون. 

ستتمكن بعد إتمام مسار أساسيات جافاسكربت من إنشاء موقع شخصي و ذلك في آخر مسار من مسار أساسيات تطوير الويب تطبيقات لِما تعلمته،

هذه ملفات مشروعك : thamer.zip

بالتوفيق

  • 0
نشر
بتاريخ On 1/1/2021 at 19:21 قال Thamer Alfaifi:

1- اريد عندما امرر المؤشر فوقhome و و و ان يضهر المربع دون تحرك العناصر الاخرى

انت ما شاء الله عليك اشتغلت الكود بطريقة صحيحة بس عندك نقطة صغيرة يلزم انك تعدلها

ul li :hover {
    overflow: auto;
    text-emphasis: none;
    display: inline;
    padding: 5px 20px;
    border: 2px solid #fff;
}

في مسافة بين ال li و hover وده اللي عاملك المشكلة ومخلي انك تجد العناصر بتبعد عن بعضها لما يحصل هوفر علشان كده لازم تشيل الspace وتخلي الستايل بالشكل ده

ul li:hover {
    overflow: auto;
    text-emphasis: none;
    display: inline;
    padding: 5px 20px;
    border: 2px solid #fff;
}

دي طريقة وحتخلي يكون في اهتزاز بسيط للعناصر بسبب زيادة حجم الايتم اللي عليه الماوس.

الطريقه الثانية وهي اللي قالها الاخ تحتي ولكن حتى لو طبقت طريقته مالم تزيل المسافة بين li و ال hover حتظل المشكلة قائمة .

بتاريخ On 1/1/2021 at 19:21 قال Thamer Alfaifi:

2-اود ان تكون الخلفية غامقة نوعا ما لكي يسهل رؤية الكتابة

بالنسبة للخلفية انت دايماً علشان تغير الخلفية في الcss كل اللي عليك تضيف السطر اللي تحت للجزئية المراد تغيير خلفيتها.

background-color:;//color name or color hashcode or rgb/rgba 

انا غيرت لك الخلفية كاملة بتاعة الشاشة كلها عن طريق اضافة السطر اللي فوق الى ال<body>

تفضل ملفات مشروعك

style.css

kingsalman.html

اذا كان لديك اي استفسار انا جاهز للرد عليك

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

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

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

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

  • إعلانات

  • تابعنا على



×
×
  • أضف...