محتوى الصفحة يحتوي على عدة جوانب لكي يتم توزيع المحتوى بشكل جميل وبسيط فمثلا يمكن إستخدام جانب علوي لوضع بانر إعلاني وجانب يمين للقوائم وآخر المواضيع وإحصائيات الموقع ومنطقه التسجيل وجانب يسار لعرض المواضيع وجانب سفلي لأهم الروابط أو التعليقات أو نبذه عن الكاتب مثلا , طبعا بإمكاننا وضع جانب واحد أو عشرة جوانب كل على حسب مايتطلبه الموقع وسنبدأ في الجانب العلوي وللعلم يمكنك عمل علوي واحد وعلوي إثنين وهكذا والجوانب العلويه تأخذ نفس ستايل الجوانب السفليه.
<div id="top1" class="sidebar_top">
Top side bar 1
</div>والستايل لها :
.sidebar_down, .sidebar_top {
clear: both;
background: #666;
min-height: 120px;
}شيفرة الhtml مكانها بين وسم
<div class="main_content">
الآن لنقم بعمل جانب يمين بعرض 250 بكسل والجانب الأيسر بباقي المساحة المتبقيه وهي عرض محتوى الصفحة ناقص عرض الجانب الأيمن ناقص المحاذاه إن وجدت , الكود :
<div id="left1" class="sidebar_left">
Left side bar 1
</div>
<div id="right1" class="sidebar_right">
Right side bar 1
</div>الستايل :
.sidebar_right {
float: right;
background: #333;
min-height: 400px;
width: 730px;
}
.sidebar_left {
float: left;
background: #999;
min-height: 400px;
width: 250px;
}لنرى صورة الموقع
لحل المشكله التي في الصور نستخدم هذا الكود البسيط بعد أي عنصر أو وسم (Tag) له خاصيه (float)
<br clear="all"/>
بعد حل المشكله صورة الموقع :
ملفات الدرس مرفقه
