استثمر للحياة

برمجة و تصميم و تطوير المواقع

تعويم العناصر floats في CSS

حجم الخط

استثمر للحياة

التعويم يا سادة يا كرام .... هو تحديد موضع لكل جزء من الصفحة ... مثلا الصندوق
يمكننا تنسيقه يمين أو شمال الصفحة ..... تعالوا نشوف 

 تعويم العناصر (floats)

هل ترغب فى ان يكون مظهر الصفحة بهذا الشكل

investolife

يمكن تعويم أى صندوق أو عنصر من عناصر CSS    إلى اليمين أو اليسار باستخدام الخاصية float، هذا يعني أن الصندوق ومحتوياته ستعوم إلى اليمين أو اليسار من الصفحة ، كما يمكن ان يعوم صندوق داخل صندوق آخر .

 

مثال :

investolife

شاهد  المثال

 

 عمل أليوم للصور

خاصية التعويم يمكن استخدامها لعمل أليوم للصور

investolife

 

 تقسيم الشاشة الى اعمدة

خاصية التعويم يمكن استخدامها لتقسيم الصفحة إلى أعمدة .

سنفترض أن عرض العمود الذي نريد هو 33%  , و اختارنا النسية المئوية حتى تكون الصفحة واضحة على أي شاشة كمبيوتر , و سوف  نعوم كل الأعمدة إلى اليسار باستخدام الخاصية float:

 

 #column1 {
 float:left;
 width: 33%;
 }
 

 #column2 {
 float:left;
 width: 33%;
 }
 

 #column3 {
 float:left;
 width: 33%;
 }

 

 

لاحظ أن :   float   يمكن أن تحمل القيمة  left  أو right  أو none

 

 الخاصية   clear

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

و لكن الخاصية clear  و التى يمكنها أن تحمل القيمة   left  أو right  أو both  أو  none ،  فإذا وضعنا للخاصية   clear    القيمة    "both"  مثلاً فإن الحاشية العلوية للعنصر ستصبح أسفل الحاشية السفلية للعنصر الذي يعلوه . الامر الذي بجعل النص لا يلتف حول الصورة .

 

investolife

 

investolife

شاهد  المثال

 

 تصميم قائمة أفقية

هيا نصمم قائمة افقية ب CSS

investolife

 

حمل المثال

 تصميم قائمة رأسية

هيا نصمم قائمة رأسية ب CSS

investolife

 

شاهد المثال

 

 تصميم صفحة  خاصة بنا

مثل هذه

investolife

شرحها

 

investolife

 

حمل المثال

 

 تحديد موضع  العناصر

باستخدام position  في CSS يمكن أن تضع أي عنصر في المكان الذي تريده من الصفحة . تحديداً تاماً و ليس مجرد تعويم .

الصورة نوضح كيفية تحديد اى موضع على الشاشة

investolife

و بفرض اننا نريد وضع  صورة  فى موقع ما هكذا

 

investolife

 

فإننا سنكتب هذا الكود

 

investolife

 

التنفيذ

 

لاحظ اننا استخدمنا  position:absolute لتحديد موضع بشكل مطلق  , و لا يرتيط به اى عنصر أخر

للتوضيح شاهد هذا المثال

investolife

 

و لكن قد نحتاج استخدام موضع نسبي  . بمعنى ان يبعد عنصر عن عنصر مسافة ثابنة , و هو المستخدم أكثر فى تسميم صفحات المواقع .

شاهد هذا المثال

 

investolife

 


 

الموضوع  :  تعويم العناصر floats في CSS المرجع : استثمر للحياة  investolife 

اعلان تجاري
اعلان 468