التخطيط سهل مع CSS. إذا كنت معتادًا على استخدام تخطيط الجدول، فسيكون الأمر صعبًا في البداية. الأمر ليس صعبًا، بل له دوافع مختلفة وله معنى أكبر في الممارسة العملية.

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

الموضع

لتحديد ما إذا كان العنصر مطلقًا أم نسبيًا أم ثابتًا أم ثابتًا.

القيم الثابتة هي القيم الافتراضية للعناصر، والتي يتم إنشاؤها بالترتيب الطبيعي كما تظهر في HTML.

نسبيًا يشبه الوضع الثابت، ولكن يمكنك استخدام الخصائص العلوية واليمنى والسفلى واليسار لتعويض الموضع الأصلي.

يفصل المطلق العنصر عن التدفق الطبيعي لـ HTML ويرسله إلى عالم تحديد المواقع خاص به تمامًا. في هذا العالم المجنون قليلاً، يمكن وضع هذا العنصر المطلق في أي مكان طالما تم تعيين القيم العليا واليمنى والسفلية واليسرى.

تعمل العناصر الثابتة أيضًا مثل العناصر المطلقة، ولكنها تضع العناصر المطلقة المتعلقة بنافذة المتصفح بالنسبة إلى الصفحة، لذلك، من الناحية النظرية، تظل العناصر الثابتة بالكامل في إطار عرض المتصفح عند تمرير الصفحة. لماذا نظريا؟ إذا لم يكن هناك شيء آخر، فهو يعمل بشكل جيد في Mozilla وOpera، ولكن ليس في IE.

استخدام تخطيط الموضع المطلق

يمكنك استخدام الموضع المطلق لإنشاء تخطيط تقليدي مكون من عمودين باستخدام قواعد مشابهة لما يلي في HTML:

مثال كود المصدر [www.52css.com]

.

وقم بتطبيق CSS التالي:

مثال على الكود المصدري [www.52css.com]

#navigation

{

position

:Absolute;top

:

0

;

يوجد شريط تنقل بطول 10 مم على اليسار. نظرًا لأن التنقل في موضعه تمامًا، فلن يكون له أي تأثير على تدفق بقية الصفحة، لذلك كل ما عليك فعله هو تعيين عرض الحد الأيسر لمنطقة المحتوى ليكون نفس عرض التنقل حاجِز.

انه من السهل جدا! ومع ذلك، فأنت لا تقتصر على هذا النهج المكون من عمودين. باستخدام ميزة تحديد المواقع الذكية، يمكنك وضع أي عدد تريده من الكتل. على سبيل المثال، إذا كنت بحاجة إلى إضافة عمود ثالث، يمكنك إضافة كتلة "navigation2" إلى HTML وتطبيق CSS التالي:

مثال لرمز المصدر [www.52css.com]

#navigation {

position: absolut: top: 0; left: 0; width: 10em;

}

#navigation2 {

الموضع: مطلق؛ الأعلى: 0; العرض: 10em

}

#content {

الهامش: 0 10em; هامش إلى 10em */

}

التأثير الجانبي الوحيد لوضع العناصر بشكل مطلق هو أنه، نظرًا لأنها تعيش في عالمها الخاص، لا توجد طريقة لتحديد المكان الذي ستنتهي فيه بالضبط. إذا استخدمت المثال أعلاه في منطقة تنقل أقل ومساحة محتوى أكبر، فلا توجد مشكلة، ولكن، خاصة عند استخدام القيم النسبية للطول والعرض، غالبًا ما يتعين عليك التخلي عن الأمل في وضع أي شيء مثل الحواشي السفلية تحتها. إذا كنت تريد فعل ذلك حقًا، بدلًا من تحديد موضعهم تمامًا، قم بتعويمهم.

Float

سوف يقوم Float بتحريك عنصر إلى يسار أو يمين نفس السطر، بينما سيطفو المحتوى المحيط.

غالبًا ما يتم استخدام العائمة لوضع عناصر صغيرة داخل الصفحة (في CSS الافتراضي الأصلي لهذا الموقع، يتم تعويم رابط "الصفحة التالية" لدليل HTML الأساسي ودليل CSS الأساسي إلى اليمين. راجع أيضًا: أولاً - في العناصر الزائفة مثال على الحروف)، ولكن يمكن استخدامها أيضًا في الكتل الأكبر حجمًا، مثل أعمدة التنقل.

خذ مثال HTML التالي، يمكنك تطبيق CSS التالي:

مثال كود المصدر [www.52css.com]

#navigation {

float: width: 10em;

}

#navigation2 {

float:

width: 10em

}

#content {

هامش: 0 10em

}

إذا كنت لا تريد أن يلتف العنصر التالي حول الكائن العائم، فيمكنك استخدام الخاصية Clear. واضح: يمسح اليسار العنصر الأيسر، واضح: يمسح اليمين العنصر الأيمن، وواضح: كلاهما يمسح العنصرين الأيمن والأيسر. لذلك، على سبيل المثال، تحتاج إلى تذييل صفحة، ويمكنك إضافة كتلة إلى HTML بالمعرف "التذييل"، ثم استخدام CSS التالي:

مثال لرمز المصدر [www.52css.com]

#footer {

واضح: كلاهما؛

}

حسنًا، لقد فهمت. تظهر الحاشية السفلية أسفل كافة الأعمدة، بغض النظر عن طول أي عمود.

لاحظ أننا

قمنا بتغطية تحديد الموضع والتعويم بشكل عام، مع التركيز على الكتل "الكبيرة" من الصفحة، ولكن ضع في اعتبارك أنه يمكن استخدام هذه الأساليب أيضًا على أي عنصر داخل تلك الكتل. من خلال الجمع بين تحديد المواقع والعائمة والحدود والحشو والحدود، يمكنك إعادة إنتاج أي تصميم تخطيطي، فيما يتعلق بالتخطيط، لا يوجد شيء يمكن أن تفعله الجداول بدون CSS.

السبب الوحيد لاستخدام تخطيط الجدول هو إذا كنت تحاول استيعاب المتصفحات القديمة. هذا هو المكان الذي يظهر فيه CSS بالفعل تقدمه - فالصفحات عالية الاستخدام تمثل جزءًا صغيرًا من حجم الملف للصفحات المستندة إلى الجدول