تعلم التصميم باستخدام CSSهذا المثال واقعي جدًا. ويبدو قريبًا لتصميم صفحة ويب واقعية.
.container {
position: relative;
}
nav {
position: absolute;
left: 0px;
width: 200px;
}
section {
/* position is static by default */
margin-left: 200px;
}
footer {
position: fixed;
bottom: 0;
left: 0;
height: 70px;
background-color: white;
width: 100%;
}
body {
margin-bottom: 120px;
}استخدام خاصية margin-left لكل قسم section يضمن أن هناك هامشًا مناسبًا لكل عنصر. عدا ذلك؛ سنجد العناصر متداخلة مع بعضها البعض.
لوريم إيبسوم هو ببساطة نص شكلي (بمعنى أن الغاية هي الشكل وليس المحتوى) ويُستخدم في صناعات المطابع ودور النشر. كان لوريم إيبسوم ولايزال المعيار للنص الشكلي منذ القرن الخامس عشر عندما قامت مطبعة مجهولة برص مجموعة من الأحرف بشكل عشوائي أخذتها من نص، لتكوّن كتيّب بمثابة دليل أو مرجع شكلي لهذه الأحرف. خمسة قرون من الزمن لم تقضي على هذا النص، بل انه حتى صار مستخدماً وبشكله الأصلي في الطباعة والتنضيد الإلكتروني. انتشر بشكل كبير في ستينيّات هذا القرن مع إصدار رقائق "ليتراسيت" البلاستيكية التي تحتوي على مقاطع من هذا النص، وعاد لينتشر مرة أخرى مؤخراَ مع ظهور برامج النشر الإلكتروني مثل "ألدوس بايج مايكر" والتي حوت أيضاً على نسخ من نص لوريم إيبسوم.
</section>لاحظ الفرق عندما تقوم بتضغير أو تكبير متصفحك. إنه يعمل بشكل رائع الآن!
</section>هذا المثال يعمل بشكل جيد لسبب منطقي، وهو أن المحتوى (container) أطول من الشريط العمودي في يسار الشاشة (nav). لو لم يكن كذلك؛ فهذا يعني أن الشريط سيتجاوز حدوده ليدخل في مساحة المحتوى. في الصفحات القادمة سنتعلم بعض تقنيات التصميم، والتي لكل منها إيجابيات، وسلبيات.