الفريق العربي للبرمجةأرشيف المنتديات · 2000 – 2023
نسخة أرشيفية للقراءة فقط — التسجيل والمشاركة مغلقان، والمحتوى محفوظ كما كان.

الدرس الخامس : تقسيم المحتوى على شكل جوانب (Side)

بدأه بسام العيساوي في 28 يونيو 2012 · 0 رد · 1,256 مشاهدة · في منتدى تصميم صفحات الويب
مشاركة: واتساب X فيسبوك تيليجرام
#1

محتوى الصفحة يحتوي على عدة جوانب لكي يتم توزيع المحتوى بشكل جميل وبسيط فمثلا يمكن إستخدام جانب علوي لوضع بانر إعلاني وجانب يمين للقوائم وآخر المواضيع وإحصائيات الموقع ومنطقه التسجيل وجانب يسار لعرض المواضيع وجانب سفلي لأهم الروابط أو التعليقات أو نبذه عن الكاتب مثلا , طبعا بإمكاننا وضع جانب واحد أو عشرة جوانب كل على حسب مايتطلبه الموقع وسنبدأ في الجانب العلوي وللعلم يمكنك عمل علوي واحد وعلوي إثنين وهكذا والجوانب العلويه تأخذ نفس ستايل الجوانب السفليه.

                        <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;
}

لنرى صورة الموقع

post-21336-057631400 1340883646_thumb.pn

لحل المشكله التي في الصور نستخدم هذا الكود البسيط بعد أي عنصر أو وسم (Tag) له خاصيه (float)

<br clear="all"/>

بعد حل المشكله صورة الموقع :

post-21336-094213900 1340883700_thumb.pn

ملفات الدرس مرفقه

l5.rar

العودة إلى قائمة الدروس

المرفقات
28-06-2012 02-314.png28-06-2012 02-41.png

تم تعديل هذه المشاركة بواسطة بسام العيساوي في 28 يونيو 2012 في 14:53

2

CMS Sfhati , Website Generator


نظام إدارة المحتوى صفحتي ... جربه الآن 


 


small-logo.png

مواضيع مشابهة