(9) الدرس التاسع : تنسيق أقسام div باستخدام أنماط css

سامية السلفية · #1 5 محرم 1434هـ/18-11-2012م, 05:42 AM

بسم الله الرحمن الرحيم

الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين

بعد إنشاء أقسام بواسطة div سنتعلم إن شاء الله :

- ضبط الأقسام
- تنسيق الأقسام

أنماط css. نذكر أننا قمنا استخدمنا خاصية هوية id لكل قسم من الأقسام الأربعة.

أولا: ضبط الأقسام

1- تعويم قسم float
ملاحظة : تستخدم float أيضا لتنسيق الصور.
عند تعويم عنصر تتحرك العناصر الأخرى لتغطى المساحة حوله.

1- إضافة صورة في أعلى النص

تستطيع أن ترى الصورة بحجمها الطبيعي بعد الضغط عليها

2- إضافة خاصية float في الوسم <img>

خاصية clear تستخدم للتحكم بوضعية العناصر الأخرى بعد تعويم عنصر في الصفحة. القيم:

left أو right أو both أو none

3- إضافة خاصية clear إلى وسم الخط الأفقي <hr>.

هناك فراغ كبير في أعلى الصفحة ، إن شاء الله يمكن تعديله : تصغير حجم الصورة ، أو تحريك العنوان إلى وسط الصورة

أما تعويم الأقسام السابقة:

كود:

<style>
#masterhead {
 width: 300px;
 float: right
 }
#topnav {
width: 120px;
float: right
}
#main {
 width: 640px;
 float: right;
  margin:20px
  }
</style>

كود بلغة HTML:

<body bgcolor="#BCD8EB">

<div id="masterhead" style="color:#FFFFFF">
  <h3><font color="#0000FF">بسم الله الرحمن الرحيم</font></h3>
</div> 
  <hr style="clear:right" />

<br><div id="topnav">
<br>
<A HREF="http://www.afaqattaiseer.com/vb" target=_blank><IMG   SRC="index.png"  height=50 style="border:none" width=120></A>
‎<A HREF="http://www.afaqattaiseer.com/vb/forumdisplay.php?f=275"   target=_blank><IMG SRC="books.png" style="border:none"  height=43   width=120></A>
<A HREF="http://www.afaqattaiseer.com/vb/forumdisplay.php?f=3"   target=_blank><IMG SRC="study.png"  style="border:none" height=43   width=120></A>
<A HREF="http://www.afaqattaiseer.com/vb/forumdisplay.php?f=579"   target=_blank><IMG SRC="exams.png" style="border:none"  height=43   width=120></A>
<A HREF="http://www.afaqattaiseer.com/vb/search.php?searchid=188846"   target=_blank><IMG SRC="new.png" style="border:none" height=43   width=120></A>

</div> 

<div id="main">
<font color="#0000FF" size="4">حَدَّثَنَا 
مَحْمُودُ بْنُ خِدَاشٍ البَغْدَادِيُّ قَالَ: حَدَّثَنَا مُحَمَّدُ بْنُ يَزِيدَ 
الوَاسِطِيُّ قَالَ: حَدَّثَنَا عَاصِمُ بْنُ رَجَاءِ بْنِ حَيْوَةَ، عَنْ قَيْسِ 
بْنِ كَثِيرٍ، قَالَ: قَدِمَ رَجُلٌ مِنَ المَدِينَةِ عَلَى أَبِي الدَّرْدَاءِ، 
وَهُوَ بِدِمَشْقَ فَقَالَ: مَا أَقْدَمَكَ يَا أَخِي؟ فَقَالَ: حَدِيثٌ بَلَغَنِي 
أَنَّكَ تُحَدِّثُهُ عَنْ رَسُولِ اللَّهِ صَلَّى اللَّهُ عَلَيْهِ وَسَلَّمَ، 
قَالَ: أَمَا جِئْتَ لِحَاجَةٍ؟ قَالَ: لَا، قَالَ: أَمَا قَدِمْتَ لِتِجَارَةٍ؟ 
قَالَ: لَا، قَالَ: مَا جِئْتُ إِلَّا فِي طَلَبِ هَذَا الحَدِيثِ؟ قَالَ: فَإِنِّي 
سَمِعْتُ رَسُولَ اللَّهِ صَلَّى اللَّهُ عَلَيْهِ وَسَلَّمَ يَقُولُ: «مَنْ سَلَكَ 
طَرِيقًا يَبْتَغِي فِيهِ عِلْمًا [ص:49] سَلَكَ اللَّهُ بِهِ طَرِيقًا إِلَى 
الجَنَّةِ، وَإِنَّ المَلَائِكَةَ لَتَضَعُ أَجْنِحَتَهَا رِضَاءً لِطَالِبِ 
العِلْمِ، وَإِنَّ العَالِمَ لَيَسْتَغْفِرُ لَهُ مَنْ فِي السَّمَوَاتِ وَمَنْ فِي 
الأَرْضِ حَتَّى الحِيتَانُ فِي المَاءِ، وَفَضْلُ العَالِمِ عَلَى العَابِدِ، 
كَفَضْلِ القَمَرِ عَلَى سَائِرِ الكَوَاكِبِ، إِنَّ العُلَمَاءَ وَرَثَةُ 
الأَنْبِيَاءِ، إِنَّ الأَنْبِيَاءَ لَمْ يُوَرِّثُوا دِينَارًا وَلَا دِرْهَمًا 
إِنَّمَا وَرَّثُوا العِلْمَ، فَمَنْ أَخَذَ بِهِ أَخَذَ بِحَظٍّ وَافِرٍ»
رواه الترمذي</font>
<br><b><font color="#0000FF" size="2">[حكم الألباني] : صحيح</font></b>

</div> 
<hr style="clear:right" />

<div id="bottomnav">
<p>
<A HREF="http://www.afaqattaiseer.com/vb" target=_blank>الرئيسة</A>&nbsp;
‎<A HREF="http://www.afaqattaiseer.com/vb/forumdisplay.php?f=275" target=_blank>المتون العلمية</A>&nbsp;
‎<A HREF="http://www.afaqattaiseer.com/vb/forumdisplay.php?f=3" target=_blank>مجالس المذاكرة</A>&nbsp;
‎<A HREF="http://www.afaqattaiseer.com/vb/forumdisplay.php?f=579" target=_blank>الإختبارات</A>&nbsp;
‎<A HREF="http://www.afaqattaiseer.com/vb/search.php?searchid=188846" target=_blank>آخر المشاركات</A>
</p>
</body></div>

تنبيه:
لانشاء شريط التنقل الرأسي (طريقة أخرى):

كود بلغة HTML:

<ul>
<li><a href="...">...</a></li>
<li><a href="...">...</a></li>
<li><a href="...">...</a></li>
<li><a href="...">A...</a></li>
</ul>

ولإزالة رمز القائمة :

كود:

ul
     {
     list-style-type:none;
     margin:0;
     padding:0;
     }

2- ضبط مكان القسم position
ثلاث قيم:
- absolute: لتحديد موضع ثابت بالنسبة لعنصرلأعلى الصفحة أو بالنسبة لوسم <body> إذا كان ضمن وسم آخر.
- relative: لتحديد إزاحة عن الموضع الأصلي.
- fixed: لتحديد موضع ثابت ضمن إطار المتصفح، لا يتغير حتى عند تمرير العرض إلى الأعلى أو الأسفل (مراجع: لا يدعمها اكسبلورر)
وتستخدم إلى جانب النمط top , bottom , right, left

مثال:

كود:

#main {position: absolute; top: 100px; right: 200px width: 120px}

تنبيه هام:
استخدام قد يتسبب في تداخل العناصر في الصفحة ، لذا يستخدم لعمل عناصر متداخلة .. نص مع صورة..وغيرها

ثانيا: تنسيق الأقسام
يتم تنسيق كل قسم باستخدام الأنماط لتحديد نوع الخط ، نمط لخط ، اللون ، وبقية الأشياء التي شرحناها حتى الآن ، ولله الحمد

مثلا :
إذا كان لدينا أزرار خلفيتها شفافة ، يمكن جعل شريط التنقل يظهربلون خلفية شريط التنقل وفي هذا المثال : الكاكي:

كود بلغة HTML:

#topnav {
 width:300px; 
 background-color:#khaki;
width:120px solid #000; 
padding-top:15px;
float:right
 }

سيكون تمازج الأزرار مع أي لون آخر للخلفية جميلا إن شاء الله أو نستخدم روابط نصية ونحدد لون للخلفية.

الواجب التطبيقي (13)
- استخدام أقسام div في تصميم صفحة ويب وتنسيقها باستخدام الأنماط.

وفقكم الله لما يحب ويرضى

الحمدلله
وصل الله وسلم على نبينا محمد وعلى آله وصحبه أجمعين

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)