| التعويم و التحديد |
 |
 |
|
استثمر للحياة investolife
هل ترغب فى ان يكون مظهر الصفحة بهذا الشكل
يمكن تعويم أى صندوق أو عنصر من عناصر CSS إلى اليمين أو اليسار باستخدام الخاصية float، هذا يعني أن الصندوق ومحتوياته ستعوم إلى اليمين أو اليسار من الصفحة ، كما يمكن ان يعوم صندوق داخل صندوق آخر . مثال :
خاصية التعويم يمكن استخدامها لعمل أليوم للصور
خاصية التعويم يمكن استخدامها لتقسيم الصفحة إلى أعمدة . سنفترض أن عرض العمود الذي نريد هو 33% , و اختارنا النسية المئوية حتى تكون الصفحة واضحة على أي شاشة كمبيوتر , و سوف نعوم كل الأعمدة إلى اليسار باستخدام الخاصية float:
#column1 {
float:left;
width: 33%;
}
#column2 {
float:left;
width: 33%;
}
#column3 {
float:left;
width: 33%;
}
لاحظ أن : float يمكن أن تحمل القيمة left أو right أو none
خاصية clear تستخدم للتحكم بوضعية العناصر التالية لأي عنصر تم تعويمه . تلقائياً العناصر اللاحقة تحرك لتغطي المساحة حول العنصر الذي تم تعويمه ، أنظر إلى المثال أعلاه حيث ترى النص قد التف تلقائياً بجانب الصورة . و لكن الخاصية clear و التى يمكنها أن تحمل القيمة left أو right أو both أو none ، فإذا وضعنا للخاصية clear القيمة "both" مثلاً فإن الحاشية العلوية للعنصر ستصبح أسفل الحاشية السفلية للعنصر الذي يعلوه . الامر الذي بجعل النص لا يلتف حول الصورة .
هيا نصمم قائمة افقية ب CSS
هيا نصمم قائمة رأسية ب CSS
مثل هذه
شرحها
باستخدام position في CSS يمكن أن تضع أي عنصر في المكان الذي تريده من الصفحة . تحديداً تاماً و ليس مجرد تعويم . الصورة نوضح كيفية تحديد اى موضع على الشاشة
و بفرض اننا نريد وضع صورة فى موقع ما هكذا
فإننا سنكتب هذا الكود
التنفيذ
لاحظ اننا استخدمنا position:absolute لتحديد موضع بشكل مطلق , و لا يرتيط به اى عنصر أخر للتوضيح شاهد هذا المثال
و لكن قد نحتاج استخدام موضع نسبي . بمعنى ان يبعد عنصر عن عنصر مسافة ثابنة , و هو المستخدم أكثر فى تسميم صفحات المواقع . شاهد هذا المثال
مرجع سريع لكل أدوات css حمل من هنا
|
