شرح كامل لعمل واجهة بدون جداول مقسمة بي css3 تستطيع استعمالها كمدخل.

يمكنك باستخدام أنماط الCSS صناعة واجهة موقعك وتجزئتها حسب ماتريد دون
استخدام الطريقة الكلاسيكة (الجداول). وفوق هذا كله سرعه تحميل الصفحة.
واختصرها في عملية قراءة الجدول بطيئة ، انعدام المرونه في الجداول ،
سهوله التحكم بمظهر الواجه أسهل في الCSS ، الجداول من الصعب بناءها
للتوافق مع عدة أحجام للشاشات و من مزايا الCSS هو استخدام أكثر من نمط
لعدة أغراض فعند طباعه الصفحة تستطيع استخدام نمط خاص للطباعة وهكذا.
الواجهة التي سنحاول شرح طريقة عملها هي على هذا الشكل
:
شرح كامل لعمل واجهة بدون جداول مقسمة بي css3 تستطيع استعمالها كمدخل. Xcdfyu1

شرح كامل لعمل واجهة بدون جداول مقسمة بي css3 تستطيع استعمالها كمدخل. Xcdfyu1

أولا ً : تهيئة الصفحة وتجميع أفكارك وترتيبها

شرح كامل لعمل واجهة بدون جداول مقسمة بي css3 تستطيع استعمالها كمدخل. 57889

في هذه الخطوه كتبنا بعض التنسيقات المبدئية من لون النص ونوع الخط .

ثانيا ً : البدء بكتابة العناصر واعطاءها مسميات id حتى يمكننا تسيقها بال CSS

نضع هذا داخل ال body :

اقتباس :: div id="wrap">
<div id="header">
<h1>رأس الصفحة</h1>
</div>
<div id="right">
<h1>الجزء الأيمن</h1>
</div>

<div id="left">
<h1>الجزء الأيسر</h1>
</div>

<div id="center">
<h1>المحتوى الرئيسي</h1>
</div>
<div id="footer">
<h1>ذيل الصفحة</h1>
</div>
</div>

العنصر الأول هو باسم wrap وهو العنصر الذي يضم بقية العناصر وتستطيع بعدها التحكم في عرض الواجهة إذا أردت .
وبقية العناصر أظنها واضحة.

ثالثاً : تنسيق العناصر وإعطاءها بعض الشكليات الجمالية

مابين وسمين style أضف التالي:

اقتباس :: #header
{
padding:1em;
background-color:#f9f9f9;
border-bottom:.1em #E2E2E2 solid;
}
#footer
{
border-top:.1em #E2E2E2 solid;
background-color:#f9f9f9;
padding:0 2em;
}

#right,#left,#center
{
padding:1em;
}
#center
{
border-left:.1em #E2E2E2 solid;
border-right:.1em #E2E2E2 solid;
}

ستحصل على شكل مشابه لهذا :

شرح كامل لعمل واجهة بدون جداول مقسمة بي css3 تستطيع استعمالها كمدخل. Xcdfyu2

تلاحظ العناصر ظاهرة بشكل مفرد وسنحاول في الخطوة القادمة -وهي الخطوة الرئيسية- ضبط محاذاتها .

رابعاً : ضبط ال Floating للعناصر

أضف

اقتباس :: #center
{
border-left:.1em #E2E2E2 solid;
border-right:.1em #E2E2E2 solid;
margin:0 16em;
display:inline-block; /* أضفنا هذا السطر*/

حسناً هل انتهينا ؟

لا لم ننتهي بعد بقي أن نذكر بعض المشاكل التي قد تواجهك ، ضع محتوى تجريبي للعنصر الايمن وليكن هكذا :

<div id="right">
<h1>الجزء الأيمن</h1>
الجزء الأيمن ، الجزء الأيمن ، الجزء الأيمن ، الجزء الأيمن ، الجزء الأيمن ، الجزء الأيمن ،
الجزء الأيمن ، الجزء الأيمن ، الجزء الأيمن ، الجزء الأيمن ، الجزء الأيمن ،
الجزء الأيمن ، الجزء الأيمن ، الجزء الأيمن ، الجزء الأيمن ، الجزء الأيمن ،
</div>

ستلاحظ ذيل الصفحة لايتأثر بالمحتوى الذي أدخلته وينزل الى أسفل وحل ذلك بجعله يلغي أي عنصر يأتي بجانبه .

#footer
{
border-top:.1em #E2E2E2 solid;
background-color:#f9f9f9;
padding:0 2em;
clear:both; /* أضفنا هذا السطر*/
}

الان أدخل محتوى تجريبي بداخل المحتوى الرئيسي وليكن هكذا :

الكود:: <div id="center">
<h1>المحتوى الرئيسي</h1>

المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي ,
المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي ,
المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي ,
المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي ,
المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي ,
المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي ,
المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي ,
المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي ,
المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي ,

</div>

سنحاول أدخال نصوص مشابهة للشكل التالي :

الكود:: <div style="float:left; color:red">جملة ملاصقة للجانب الايسر</div>
<div style="float:right; color:blue">جملة ملاصقة للجانب الايمن</div>
<div style="float:right; color:#993399; clear:both;">جملة فاصلة بينهم</div>

من المفترض ان هذه العناصر تعمل بشكل جيد لكن بحكم المحاذاة الحاصلة من العنصر الأيمن والأيسر فان الfloat داخل العنصر center لن يعمل بشكل جيد ولابد من وضع هذه العناصر في عنصر له خاصية overflow:hidden; display:inline-block

يكون الكود بالشكل النهائي:

<div id="center">
<h1>المحتوى الرئيسي</h1>
<div style="overflow:hidden; display:inline-block">
<div style="float:left; color:red">جملة ملاصقة للجانب الايسر</div>
<div style="float:right; color:blue">جملة ملاصقة للجانب الايمن</div>
<div style="float:right; color:#993399; clear:both;">جملة فاصلة بينهم</div>
</div>
المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي ,
المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي ,
المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي ,
المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي ,
المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي ,
المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي ,
المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي ,
المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي ,
المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي ,

</div>

شكرا

شكرا