الرئيسيةبحـثالتسجيلس .و .جالأعضاءالمجموعاتدخول

شاطر | 
 

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

اذهب الى الأسفل 
كاتب الموضوعرسالة
المهندس صافى
مؤسس المنتدى والمدير العام

avatar

احترام القوانين :
ذكر تاريخ الميلاد : 25/07/1998
عدد المساهمات : 1044
نقاط : 3102
تاريخ التسجيل : 29/08/2009
العمر : 19
الموقع : الاسكندرية

مُساهمةموضوع: الدرس الخامس : التحكم فى العناصر المربعة box model display & position    الجمعة مارس 04, 2011 7:46 am

درسنا الكثير فى الدرس السابق عن طرق التحكم بمظهر
العناصر المربعة 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 ايضا, وارجح ان تستكشفها بنفسك.


اعلم ان درس اليوم كان كبير جدا. واتمنى ان اكون وفقت فى الشرح.
وان شاء الله تكون استفدت منه.
اراكم بالدرس القادم على خير.
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://www.toty.arabstar.biz
mohamed_m
مشرف عام
مشرف عام
avatar

احترام القوانين :
ذكر تاريخ الميلاد : 16/07/1998
عدد المساهمات : 447
نقاط : 853
تاريخ التسجيل : 29/08/2009
العمر : 19

مُساهمةموضوع: رد: الدرس الخامس : التحكم فى العناصر المربعة box model display & position    السبت ديسمبر 17, 2011 7:49 am

goooooooooooooooooooooooood
جاااااااااااااااااااااااااااااااااااااااااااااااااااااااااااااااااااااااااامد
shokran
شكرااااااااااا
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو
ti2oo
عضو محبوب فى المنتدى


احترام القوانين :
تاريخ الميلاد : 18/09/1990
عدد المساهمات : 138
نقاط : 287
تاريخ التسجيل : 29/08/2009
العمر : 27

مُساهمةموضوع: رد: الدرس الخامس : التحكم فى العناصر المربعة box model display & position    الأحد ديسمبر 18, 2011 11:48 am

shokran lek 3la el shar7 al ra2e3 da

شكرا ليك على الشرح الرائع دى
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو
المهندس صافى
مؤسس المنتدى والمدير العام

avatar

احترام القوانين :
ذكر تاريخ الميلاد : 25/07/1998
عدد المساهمات : 1044
نقاط : 3102
تاريخ التسجيل : 29/08/2009
العمر : 19
الموقع : الاسكندرية

مُساهمةموضوع: رد: الدرس الخامس : التحكم فى العناصر المربعة box model display & position    الخميس ديسمبر 22, 2011 7:03 am

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

وتقبل تحياتى
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://www.toty.arabstar.biz
 
الدرس الخامس : التحكم فى العناصر المربعة box model display & position
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1
 مواضيع مماثلة
-
» اسعار لاب توب
» شرح ربط الشبكات

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
 :: المهندس صافى فعالياتنا :: !…»§ ●[ــــودΞا لغات البرمجة Ξالـــ] ●§«…! :: !…»§ ●[ــــودΞ دورة تعلم css Ξالـــ] ●§«…!-
انتقل الى:  

أكوادcss|اكواد Template| الأسئلة الشائعة | تقنيات متقدمة |لغات البرمجة|اشهار المواقع والمنتديات |اقسام التصميم |اشهار المنتديات|دليل شركات الاستضافه|عروض المنتديات  |الابداع والجرافيزم |الفوتوشوب|البرامج  |


مركز تبادل الاعلانات العربيه

 دردشة | المهندس صافى