رصف العناصر فى css

مينا منصور · 22 سبتمبر 2020

سلام عليكم لماذا تظهر الصفحه هكذا ماهو الخطأ وسؤال اخر لماذا لا نعطى للمربع الاب قيمة ارتفاع

Omar Haddad2 · 22 سبتمبر 2020

الخطأ:

أن علامة # هي خاصة بالid وأنت قمت بوضع ال قيمة الclass في ال selector

#child{}

التصحيح :

أن تقوم بوضع قيمة الid و في ال selector وهي child1

#child1{}

يتم وضع الإرتفاع حسب الحاجة

لو تريد زياد الإرتفاع للأب تقوم بتغير قيمة الheight الخاصة بال parent

تم التعديل في 22 سبتمبر 2020 بواسطة Omar Haddad2

سمير عبود · 22 سبتمبر 2020

مرحباً @جيروم مينا

لا أدري ما الذي تتوقعينه من الأكواد لكن الأكواد متطابقة مع صفحة العرض.
1- إتجاه الصفحة من اليمين إلى اليسار و هذا لأنك قمت بإعطاء الخاصية dir القيمة rtl أي:

<html dir="rtl">
  
  
  
</html>

2- جسم الصفحة يحتوي على ثلاث عناصر div في نفس المُستوى أي كلهم أبناء للوسم body: العنصر الأول يأخذ المعرف parent لكنه بدون مُحتوى يأخذ التنسيقات التالية:

#parent{
  width: 300px;
  border: 3px solid black;
  background-color: cadetblue;
}

و بما أنه بدون محتوى و لم يتم تحديد طول له فيظهر بهذا الشكل. كل من العنصرين ذو المُعرفين child1 و child2 يأخذان صنف التنسيقات child.

إذا كُنتِ تريدين أن يكونا العُنصرين من أبناء العنصر parent عليك وضعهما داخله بهذا الشكل:

<div id="parent">
  <div id="child1" class="child">1</div>
  <div id="child2" class="child">2</div>
</div>

الرجاء توضيح المُشكلة التي تواجهيها و سنُساعدك. بالتوفيق

ياسين عناية · 23 سبتمبر 2020

المربع الأب ( parent ) لا يظهر بشكل صحيح بسبب عدم تحديد الـ height، في حال أردت أن ترسم مربع يجب إعطاءه الـ width والـ height معًا

#parent{
    height: 30px;
    width: 300px;
    background-color: cadetblue;
    border: 3px solid black;
}

يبدو انك تريد أن يظهر كل مربع ( 1 و 2 ) بشكل مختلف، و السبب في ظهورهم بنفس الشكل هو إعطاءهم نفس الـ class و تحديك لتلك الإعدادات عن طريق هذا الـ class وهذا غير صحيح، إما أن تعطي كل مربع class بإسم مختلف خاص فيه أو id خاص فيه، و طريقة التعامل مع الـ class تكون بذكر اسم الكلاس في ملف الـ css مع وضع بجانبه دوت كالتالي :

.class1{}

و طريقة التعامل مع الـ id كالتالي :

#id{}

للحصول على إجابات دقيقة وحل لمشكلتك، أنصحك دومًا بتوضيح تلك المشكلة قدر الإمكان، هنا أكاديمية حسوب توضح لك بعض الإرشادات للحصول على إجابة لسؤالك.
بالتوفيق.

تم التعديل في 23 سبتمبر 2020 بواسطة ياسين عناية

مينا منصور · 23 سبتمبر 2020

شكرا لحسن اهتمامكم جميعا

رصف العناصر فى css

السؤال

مينا منصور

4 أجوبة على هذا السؤال

Recommended Posts

Omar Haddad2

سمير عبود

ياسين عناية

مينا منصور

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية