الدرس الخامس : التحكم فى العناصر المربعة box model display & position

درسنا الكثير فى الدرس السابق عن طرق التحكم بمظهر
العناصر المربعة box models والتحكم بأبعاده

وانهينا الدرس بتعريف خاصية الـ margin

قبل ان نكمل فى استعراض خصائص التحكم بتنسيق هذه العناصر (من حيث مكانها بالصفحة)

سوف نلقى نظرة على خاصية الـ display وإعدادتها.

كما تعرف عن عناصر الـ XHTML

انها تنقسم الى نوعين block و inline
النوع الأول (من امثاله الـ p و div)

يتم اضافة سطر فارغ قبله وسطر فارغ بعده.

والنوع الثانى inline (من امثاله الـ em و الـ span)

يتم وضعه بنفس السطر.

لكن فى بعض الأحيان نحن نريد استخدام مثلا احد عناصر الـ block
ووضعه بدون ان يحتاج سطر فارغ قبله وبعده.
ونفس الشئ لعناصر الـ display مثلا, نريد اضافة سطر قبلهم وسطر بعدهم.

كل هذا يتم عن طريق الخاصية display

انظر الكود التالى لتفهم المقصد.

الرمز:

.block span{
width: 50%;
display:block;
border:#999999 1px solid;
}
.inline span{
display:inline;
border:#999999 1px solid;
}

My Name Is Pepo

My Name Is Pepo

اتمنى يكون كل شئ اصبح واضح الأن.
مع العلم ان خاصية الـ display
لها قيم اخرى غير الـ block والـ inline
لكنى افضل ان اتركك انت تكتشفها بنفسك.

ننتقل للجزء الثانى من هذا الدرس
تحديد الأماكن او الـ positions

مكان كل عنصر هو الشئ الذى تبنى عليه اى صفحة منسقة
وهذا امر طبيعى.

نستخدم خاصية الـ position لتحديد مكان العنصر بالنسبة لبقية الصفحة

خاصية الـ position لها عدة قيم سوف نلقى نظرة عليهم.

القيمة static

وهى القيمة الإفتراضية لمكان اى عنصر.
وهى تعنى ان مكانه ثابت, مثلما تم وضعه بين بقية عناصر الصفحة.

القيمة relative
هذه القيمة تعنى ان العنصر, يمكن ان يتم تحريكه من مكانه, مع مراعاة ترك مكانه الأساسى فارغ.
بمجرد ان يتم إعداد position: relative الى احد العناصر
يمكنك ان تستخدم الخصائص left, right, top, bottom
لتحديد مكانه الجديد.
مثلا عندما تجعل قيمة الخاصية left هى 10 بيكسل
هذا يعنى, ان نضع مسافة 10 بيكسل بين العنصر وبين الجانب الأيسر الخارجى له.

اظن تعرف هذا الأمر شئ ليس سهل بالكلام, لذلك اليك المثال التالى وان شاء الله يوضح كل شئ.
(ملحوظة: جرب الكود مع الفايرفوكس, لأن الإنترنت اكسبلورار 6 به مشكلة مع الإعداد relative للخاصية position )

الرمز:

p{
padding-right: 10px;
}
.a , .b , .c{
color:#FFFFFF;
border:1px #333300 solid;
background:#000000;
padding: 2px;
}
.a_r, .b_r, .c_r{
color:#FFFFFF;
border:1px #333300 solid;
background:#000000;
padding: 2px;
}
.b_r{
position: relative;
top: 25px;
right: 20px;
}

العنصر بشكله الأساسى

نص
class="b">مزيد من النص مزيد
اضافى
العنصر بعد التلاعب به

نص
class="b_r">مزيد من النص مزيد
اضافى

القيمة absolute

كما ذكرنا عن الـ relative فهى تترك مكان العنصر الأصلى فارغ.

لكن القيمة absolute لا تفعل ذلك.
فهى تضع العنصر بأقرب مكان كان يمكن ان يوضع به (وهذا يختلف على حسب محتوى الصفحة)

لكن مرة اخرى, يمكننا ان نستخدم الـ top و left و right و bottom
لتحديد مكانه الجديد.

انظر الكود التالى لتوضيح الصورة اكثر.

الرمز:

p{
padding-right: 10px;
}
.a , .b , .c{
color:#FFFFFF;
border:1px #333300 solid;
background:#000000;
padding: 2px;
}
.a_r, .b_r, .c_r{
color:#FFFFFF;
border:1px #333300 solid;
background:#000000;
padding: 2px;
}
.b_r{
position: absolute;
bottom: 30%;
}

العنصر بشكله الأساسى

نص
class="b">مزيد من النص مزيد
اضافى
العنصر بعد التلاعب به

نص
class="b_r">مزيد من النص مزيد
اضافى

القيمة fixed

مثلها مثل الـ absolute الا انها لا تتحرك مع الإسكرول بار.
لكنها غير مدعومة فى الأنترنت اكسبلورار 6
يمكنك معاينة المثال التالى فى الفايرفوكس او الإنترنت اكسبلورار 7

الرمز:

p{
padding-right: 10px;
}
.a , .b , .c{
color:#FFFFFF;
border:1px #333300 solid;
background:#000000;
padding: 2px;
}
.a_r, .b_r, .c_r{
color:#FFFFFF;
border:1px #333300 solid;
background:#000000;
padding: 2px;
}
.b_r{
position: fixed;
bottom: 30%;
}

العنصر بشكله الأساسى

نص
class="b">مزيد من النص مزيد
اضافى
العنصر بعد التلاعب به

نص
class="b_r">مزيد من النص مزيد
اضافى

هناك خاصية اخرى اظن هذا افضل توقيت لإلقاء نظرة عليها.
وهى خاصية z-index

هذه الخاصية يمكن ان نطلق عليها "اهمية الظهور" لكل عنصر.
مامعنى اهمية الظهور؟

مثلا اذا كان لدينا عنصرين, قمنا بالتلاعب بأماكنهم بحيث يظهروا الأثنين بمكان واحد مثلا.

(او جزء من العنصر p يغطى جزء من العنصر div مثلا)

فكيف نختار اى العنصرين سيظهر فوق الأخر؟ هذا يتم عن طريق الخاصية z-index

وكاتوضيح لكيفية استخدام الخاصية.
مثلا العنصر صاحب القيمة 5 لخاصية الـ z-index سوف يظهر فوق العنصر صاحب القيمة 3 لخاصية الـ z-index
والعنصر صاحب القيمة 1 سوف يظهر تحت العنصر صاحب القيمة 3
وهكذا, يعنى العنصر الذى وضعنا قيمة الـ z-index له اعلى, سوف يظهر اولا, والأصغر يظهر تحته.

خاصية الـ float

طريقة اخرى لتحريك العنصر.
الخاصية float يمكن ان تأخذ احد القيمتين, left و right
العنصر الذى نضع له الخاصية float:left

يتم وضعه اقصى اليسار (واذا كان العنصر داخل عنصر اخر, يتم وضعه اقصى يسار هذا العنصر)

ونفس الشئ بالنسبة لـ float:right

الميزة فى الـ float انها تجعل بقية العناصر التى حولها تدور حوليها.

كالمثال التالى مثلا.

الرمز:

teeeeeeeeeeeeeeeeeext

teeeeeeeeeeeeeeeeeext

teeeeeeeeeeeeeeeeeext

teeeeeeeeeeeeeeeeeext

left text box here

right text box here

teeeeeeeeeeeeeeeeeext

teeeeeeeeeeeeeeeeeext

teeeeeeeeeeeeeeeeeext

teeeeeeeeeeeeeeeeeext

teeeeeeeeeeeeeeeeeext

teeeeeeeeeeeeeeeeeext

teeeeeeeeeeeeeeeeeext

teeeeeeeeeeeeeeeeeext

teeeeeeeeeeeeeeeeeext

teeeeeeeeeeeeeeeeeext

teeeeeeeeeeeeeeeeeext

teeeeeeeeeeeeeeeeeext

ماذا
اذا اردنا ان نضع عنصر داخل صفحة بها عنصر اخر له الإعداد float:left
لكننا لا نريد العنصر ان يلتف حول العنصر الذى طبق عليه الـ float ؟

نستخدم لهذا الأمر الخاصية clear
إذا استخدمنا clear:left هذا سيلغى الإلتفاف حول العنصر الذى تم عمل float:left له, ونفس الشئ لـ right
لكننا يمكننا استخدام clear:both ايضا, وارجح ان تستكشفها بنفسك.

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

goooooooooooooooooooooooood
جاااااااااااااااااااااااااااااااااااااااااااااااااااااااااااااااااااااااااامد
shokran
شكرااااااااااا

shokran lek 3la el shar7 al ra2e3 da

شكرا ليك على الشرح الرائع دى

العفو يا تيتو على ايه
وننتظر جديدك

وتقبل تحياتى

» الدرس الرابع : التحكم فى العناصر المربعة box models
» الدرس الثالث : التحكم فى الروابط و الخلفيات
» الدرس الخامس : تنسيق الشكل العام لصفحات الــ html
» تومبيلايت التحكم فى حجم الصور الشخصيه
» الدرس السادس : خاتمة دورة css