[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة] درسنا الكثير فى الدرس السابق عن طرق التحكم بمظهر
العناصر المربعة box models والتحكم بأبعاده
وانهينا الدرس بتعريف خاصية الـ margin
قبل ان نكمل فى استعراض خصائص التحكم بتنسيق هذه العناصر (من حيث مكانها بالصفحة)
سوف نلقى نظرة على خاصية الـ display وإعدادتها.
كما تعرف عن عناصر الـ XHTML
انها تنقسم الى نوعين block و inline
النوع الأول (من امثاله الـ p و div)
يتم اضافة سطر فارغ قبله وسطر فارغ بعده.
والنوع الثانى inline (من امثاله الـ em و الـ span)
يتم وضعه بنفس السطر.
لكن فى بعض الأحيان نحن نريد استخدام مثلا احد عناصر الـ block
ووضعه بدون ان يحتاج سطر فارغ قبله وبعده.
ونفس الشئ لعناصر الـ display مثلا, نريد اضافة سطر قبلهم وسطر بعدهم.
كل هذا يتم عن طريق الخاصية display
انظر الكود التالى لتفهم المقصد.
- الكود:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dev.dd4bb.com Test Page</title>
<style type="text/css">
.block span{
width: 50%;
display:block;
border:#999999 1px solid;
}
.inline span{
display:inline;
border:#999999 1px solid;
}
</style>
</head>
<body>
<p class="block"><span>My</span> <span>Name</span> <span>Is Pepo</span></p>
<p class="inline"><span>My</span> <span>Name</span> <span>Is Pepo</span></p>
</body>
</html>
اتمنى يكون كل شئ اصبح واضح الأن.
مع العلم ان خاصية الـ display
لها قيم اخرى غير الـ block والـ inline
لكنى افضل ان اتركك انت تكتشفها بنفسك.
ننتقل للجزء الثانى من هذا الدرس
تحديد الأماكن او الـ positionsمكان كل عنصر هو الشئ الذى تبنى عليه اى صفحة منسقة
وهذا امر طبيعى.
نستخدم خاصية الـ position لتحديد مكان العنصر بالنسبة لبقية الصفحة
خاصية الـ position لها عدة قيم سوف نلقى نظرة عليهم.
القيمة static
وهى القيمة الإفتراضية لمكان اى عنصر.
وهى تعنى ان مكانه ثابت, مثلما تم وضعه بين بقية عناصر الصفحة.
القيمة relative
هذه القيمة تعنى ان العنصر, يمكن ان يتم تحريكه من مكانه, مع مراعاة ترك مكانه الأساسى فارغ.
بمجرد ان يتم إعداد position: relative الى احد العناصر
يمكنك ان تستخدم الخصائص left, right, top, bottom
لتحديد مكانه الجديد.
مثلا عندما تجعل قيمة الخاصية left هى 10 بيكسل
هذا يعنى, ان نضع مسافة 10 بيكسل بين العنصر وبين الجانب الأيسر الخارجى له.
اظن تعرف هذا الأمر شئ ليس سهل بالكلام, لذلك اليك المثال التالى وان شاء الله يوضح كل شئ.
(ملحوظة: جرب الكود مع الفايرفوكس, لأن الإنترنت اكسبلورار 6 به مشكلة مع الإعداد relative للخاصية position )
- الكود:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dev.dd4bb.com Test Page</title>
<style type="text/css">
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;
}
</style>
</head>
<body>
<h1>العنصر بشكله الأساسى</h1>
<p><span class="a">نص</span> <span
class="b">مزيد من النص</span> <span class="c">مزيد
اضافى</span></p>
<h1>العنصر بعد التلاعب به</h1>
<p><span class="a_r">نص</span> <span
class="b_r">مزيد من النص</span> <span class="c_r">مزيد
اضافى</span></p>
</body>
</html>
القيمة absolute
كما ذكرنا عن الـ relative فهى تترك مكان العنصر الأصلى فارغ.
لكن القيمة absolute لا تفعل ذلك.
فهى تضع العنصر بأقرب مكان كان يمكن ان يوضع به (وهذا يختلف على حسب محتوى الصفحة)
لكن مرة اخرى, يمكننا ان نستخدم الـ top و left و right و bottom
لتحديد مكانه الجديد.
انظر الكود التالى لتوضيح الصورة اكثر.
- الكود:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dev.dd4bb.com Test Page</title>
<style type="text/css">
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%;
}
</style>
</head>
<body>
<h1>العنصر بشكله الأساسى</h1>
<p><span class="a">نص</span> <span
class="b">مزيد من النص</span> <span class="c">مزيد
اضافى</span></p>
<h1>العنصر بعد التلاعب به</h1>
<p><span class="a_r">نص</span> <span
class="b_r">مزيد من النص</span> <span class="c_r">مزيد
اضافى</span></p>
</body>
</html>
القيمة fixed
مثلها مثل الـ absolute الا انها لا تتحرك مع الإسكرول بار.
لكنها غير مدعومة فى الأنترنت اكسبلورار 6
يمكنك معاينة المثال التالى فى الفايرفوكس او الإنترنت اكسبلورار 7
- الكود:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dev.dd4bb.com Test Page</title>
<style type="text/css">
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%;
}
</style>
</head>
<body>
<h1>العنصر بشكله الأساسى</h1>
<p><span class="a">نص</span> <span
class="b">مزيد من النص</span> <span class="c">مزيد
اضافى</span></p>
<h1>العنصر بعد التلاعب به</h1>
<p><span class="a_r">نص</span> <span
class="b_r">مزيد من النص</span> <span class="c_r">مزيد
اضافى</span></p>
</body>
</html>
هناك خاصية اخرى اظن هذا افضل توقيت لإلقاء نظرة عليها.
وهى خاصية 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 انها تجعل بقية العناصر التى حولها تدور حوليها.
كالمثال التالى مثلا.
- الكود:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dev.dd4bb.com Test Page</title>
</head>
<body>
teeeeeeeeeeeeeeeeeext<br />
teeeeeeeeeeeeeeeeeext<br />
teeeeeeeeeeeeeeeeeext<br />
teeeeeeeeeeeeeeeeeext
<p style="float:left; top:0px; right:0px; border:1px #000000 solid;
width:100px; height:105px;">left text box here</p>
<p style="float:right; top:0px; right:0px; border:1px #000000 solid;
width:200px; height:105px;">right text box here</p>
<br />teeeeeeeeeeeeeeeeeext<br />
teeeeeeeeeeeeeeeeeext<br />
teeeeeeeeeeeeeeeeeext<br />
teeeeeeeeeeeeeeeeeext<br />
teeeeeeeeeeeeeeeeeext<br />
teeeeeeeeeeeeeeeeeext<br />
teeeeeeeeeeeeeeeeeext<br />
teeeeeeeeeeeeeeeeeext<br />
teeeeeeeeeeeeeeeeeext<br />
teeeeeeeeeeeeeeeeeext<br />
teeeeeeeeeeeeeeeeeext<br />
teeeeeeeeeeeeeeeeeext<br />
</body>
</html>
ماذا اذا اردنا ان نضع عنصر داخل صفحة بها عنصر اخر له الإعداد float:left لكننا لا نريد العنصر ان يلتف حول العنصر الذى طبق عليه الـ float ؟
نستخدم لهذا الأمر الخاصية clear
إذا استخدمنا clear:left هذا سيلغى الإلتفاف حول العنصر الذى تم عمل float:left له, ونفس الشئ لـ right
لكننا يمكننا استخدام clear:both ايضا, وارجح ان تستكشفها بنفسك.
اعلم ان درس اليوم كان كبير جدا. واتمنى ان اكون وفقت فى الشرح.
وان شاء الله تكون استفدت منه.
اراكم بالدرس القادم على خير.
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة] 
الرئيسية
