في درس مفصل سابق من دروس التخطيط ذكرت أن
Position من أهم الخصائص في css بل وأهمها على الإطلاق، لكني في هذا الدرس مفصل أقول لكم أن هناك خصائص اخري مهمه
فحدينا اليوم عن خاصية مثيرة للجدل! فهناك من يطالب بالإستغناء عنها كلياً، وهناك من ينصح بالإبتعاد عنها تماماً عند تخطيط الموقع Layout أو استخدمها في أضيق الحدود لأنها السبب الأول في عدم توافق المواقع على المتصفحات المختلفة بسبب ما تحدثه من فوضى! ولكن مع ذلك لا يكاد يخلو أي موقع منها فهي موجودة في القوائم والصناديق الجانبية وداخل الصور والأيقونات المختلفة…الخ، بل ويمكن أن تشاهدها أيضا عند تصفحك الصُحف الورقية! لذا أنصحكم قبل القراءة بأخذ نَفَس طويل >..
float تعني الطفو أو التعويم!
وهو تحويل أو إعادة تعريف العناصر الثابتة وإزاحتها لجهة اليمن أو اليسار خروجاً عن تدفق الصفحة الطبيعي، وتبعاً لذلك يُحدد الجانب الذي سوف تتدفق ناحيته العناصر الأخرى حول هذا العنصر -العائم-.
هذا المفهوم هو مشابه تماماً لما تراه في صفحات المجلات حيث تجد الصور والرسومات وقد إنحازت لجهه معينه ومن حولها تنساب النصوص في الجهه الأخرى، وهو ما يطلق عليه ’التفاف النص‘
تصور مثلاً مع الفارق أن أمامك مغناطيس وضع وسط مجموعة من برداة الحديد فكلما ذهبت بجسم المغناطيس لجهه معينة إنسابت من حولة برادة الحديد، أي أن التعويم يمكن أن نصفه بإنه لتحديد الجانب الذي سوف تتدفق ناحيتة المحتويات.. كما أن العنصر العائم نفسه محكوم بالعنصر الأب الحاوي له هو فقط ولا يخرج عنه.
يمكننا استخدام float على كل أوسمة html فقرات <p>، صناديق <div>، قوائم <ul>,<li>، صور </img> أي شيء فيما عدا الوسم الجذر <html>، وطريقة التطبيق واحدة وتكتب على هذا النحو مع وجود 3 قيم للخاصية كما موضح بالجدول:
رمز Code:
#content { float: right; }
float:right تعويم العناصر إلى اليمين مع تدفق المحتويات جهة اليسار، يسار العنصر.
float:left تعويم العناصر إلى اليسار مع تدفق المحتويات جهة اليمين، يمين العنصر.
float:none إزالة أي تعويم للعناصر وهو الوضع الإفتراضي، وعادة يستخدم في حالة تجاوز أي تعويم موروث يطبق على عدة عناصر.
نبدأ العوم أولاً مع الصور
ويقال أنها الوظيفة الأساسية والأصلية التى وجدت من أجلها خاصية التعويم، محاذاه الصور حتى تلتف النصوص حولها في شكل جميل.
رمز Code:
<!-- CSS --> #content { border: 4px solid #00F; background: #FFF; width:400px; } #content img { border: 4px solid #0F0; } <!-- HTML --> <div id="content"> <img src="img.gif" alt="" /> <p>محتويات، نصوص، نصوص، نصوص....</p> </div>
في الكود code السابق html نجد صندوق بإسم content إطار للمحتويات و في داخله صورة و فقرة لإختبار خاصية التعويم، وفي css وضعنا بعض الخصائص للتوضح كخلفية للصندوق مع حدود وتحديد عرض كما تم وضع حدود للصورة، ثم بعد وضع محتوى تجريبي نشاهد النتيجة داخل المتصفح:
الأن سنضع float على الصورة ثم نرى النتيجه:
رمز Code:
<!-- CSS --> #content { border: 4px solid #00F; background: #FFF; width:400px; } #content img { border: 4px solid #0F0; float: right; } <!-- HTML --> <div id="content"> <img src="img.gif" alt="" /> <p>محتويات، نصوص، نصوص، نصوص....</p> </div>
أها الأن تغير التدفق الطبيعي للصفحة وظهرت الصورة في جهة اليمين وكأنها جزء من الفقرة، في حين أن النص قفز للأعلى وبطبيعة الحال لا توجد أي مسافات فاصلة بينهم فالمساحة الفارغة أسفل الصورة هي طبيعية نتيجة للفرغات بين الأسطر حيث أنها تتغير على حسب حجم الخط ونوعة و هل تستخدم خاصية التباعد بين الأسطر line-height أو لا.
فس الحال بعد عكس إتجاه التعويم لجهة اليسار ، حيث أن اتجاه العنصر العائم لا يتأثر باتجاه الصفحة و العنصر العائم نفسه -وبما أنه عائم- فهو يطفو ويظهر أعلى جميع العناصر من بعده! يعنى مثلاً في حالة وضعك حدود للفقرة <p> أو خلفية فإن الصورة سوف تظهر أعلى تلك التأثيرات مثال:
رمز Code:
<!-- CSS --> #content { border: 4px solid #00F; background: #FFF; width:400px; } #content img { border: 4px solid #0F0; float: right; } #content p { border: 4px solid #F00; background:#EEE; } <!-- HTML --> <div id="content"> <img src="img.gif" alt="" /> <p>محتويات، نصوص، نصوص، نصوص....</p> </div>
لم تظهر حدود الفقرة بل طفت الصورة عليه وكذلك في حالة وجود خلفية كانت نقش أو صورة.
تذكير: العناصر العائمة تطفو على مستوى الكتلة!
نستخلص من هذا وهو ما سيشترك لاحقاً في جميع الحالات القادمة أن العناصر العائمة تطفو على مستوى الكتلة، لتسلك سلوك العناصر المضمنة أو السرد Inline elements وما يليه من محتويات سيتدفق حوله، ومن هنا جاءت التسميه.
مشاكل تعويم الصور
أكثر المشاكل شيوعاً هي التى تتعلق بالمحتويات القليلة والتى بدورها تقلص العنصر الحاوي لها، فكما ذكرنا قبل قليل أن العناصر العائمة تطفو على مستوى الكتله إذن فصندوق المحتويات content يتجاهل العنصر العائم وبالتالي يظهر أن هناك حشو ناقص لعدم وجود محتويات تملأ ذلك الفراغ كما يزداد الأمر سوء لو تكرر صندوق المحتويات حيث تتداخل الصور!
تعويم الكتل والعناصر
وأقصد هنا تخطيط الموقع Layout حيث يتم توزيع عمود المحتويات والقوائم الجانبية ولنأخذ مثال على مُخطط موقع يشمل صندوقين <div> فقط واحد للمحتويات والآخر لقائمة جانبية كما بالكود code التالي:
رمز Code:
<!-- CSS --> #content {float:right; width:220px; background: #FC9;} #sidebar {float:left; width:100px; background: #F33;} <!-- HTML --> <div id="content"> </div> <div id="sidebar"> </div>
وهنا أضفت float فقط على كل من content و sidebar ليظهروا بعد ذلك على المتصفح وقد انحازت كل منها في جهة حسب قيمة float وبس! هذا كل ما يمكن أن يقال في تعويم الصناديق.
مشاكل تعويم الكتل والعناصر
ليس الأمر بهذا البساطة كما ظهر في المثال السابق فمشاكل التعويم تظهر كلما أضفت عناصر أخرى الى التخطيط فالموقع يحتوي على نهاية footer ورأس header وربما عمود ثالث ورابع بالإضافة الى الصندوق الحاوي لكل هذا وهنا تظهر المشاكل مع المثال التالي وأولها بعد إضافة إطار بالمعرّف main مع بعض الخصائص مثل خلفيه و حدود حينها تكتشف المشكلة:
رمز Code:
<!-- CSS --> #content {float:right; width:220px; background: #FC9;} #sidebar {float:left; width:100px; background: #F33;} #main { border: 4px solid #0C0; background:#FFF; padding:10px; } <!-- HTML --> <div id="main"> <div id="content"> </div> <div id="sidebar"> </div> </div>
نفس ما حدث مع تعويم الصور فالعناصر العائمة تطفو على مستوى الكتله وبالتالي العناصر الأخرى تتجاهل ذلك التعويم ويظهر حشو غير مكتمل! حيث أن من المفترض ان يتوسع الإطار الحاوي حتى يشمل كل ما بداخله من عناصر.
كما أن هناك مشكلة أخرى وهي عند إضافة أي عنصر أسفل العناصر التى تم تعويمها مثل نهاية الصفحة footer أو أي شيء آخر:
رمز Code:
<!-- CSS --> #content {float:right; width:220px; background: #FC9;} #sidebar {float:left; width:100px; background: #F33;} #main { border: 4px solid #0C0; background:#FFF; padding:10px; } #footer { background: #222; padding: 2px; } <!-- HTML --> <div id="main"> <div id="content"> </div> <div id="sidebar"> </div> </div> <div id="footer">footer</div>
هنا المشكلة ظهرت مركبة فالصندوق تجاهل التعويم وارتفع الى منطقة الحشو الفارغة، أما النص فقد انساب الى أقرب مساحة فارغة حول العنصر العائم، وفي حاله النصوص الطويلة سوف يستمر الصندوق في الهبوط وفقاً لتدفق الصفحة الطبيعي
تعويم القوائم وأشكالها المختلفة
لا جديد عما سبق ولكن مايهمني في تعويم القوائم هو الإتجاه فعند تعويم البنود li لليمين أو اليسار تبدأ الإزاحة من أول بند الى أسفل:
رمز Code:
<!-- CSS --> li { float:right; background: #F33; } li.first { background: #C33; } <!-- HTML --> <ul> <li class="first">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
أول بند هو الأول أيضا جهة اليمين، كما يمكنك أن تجعل بعض البنود تخرج عن ذلك الترتيب بإزحتها في الإتجاه العكسي:
رمز Code:
<!-- CSS --> li { float:right; background: #F33; } li.first { background: #C33; float:left; } li.fourth { float:left; } <!-- HTML --> <ul> <li class="first">1</li> <li>2</li> <li>3</li> <li class="fourth">4</li> <li>5</li> </ul>
الخاصية clear
لا لم أخرج عن موضوع الدرس مفصل حول الخاصية float ولكن الحديث عن التعويم لا يخلو من ذكر خاصية هامة جداً لا يمكن أغفالها وهي الخاصية clear يعني تنظيف أو توضيح ووظيفتها إزالة أي تعويم أو بمعنى أخر التحكم في وضع العناصر اللاحقة لأي عنصر تم تعويمه، حيث أنه في الوضع الطبيعي تتحرك العناصر اللاحقة حول العنصر العائم أو لأقرب مساحة فارغة كما ذكرنا، لكن حينها نضع clear ستظهر تلك العناصر مباشرة أسفل العنصر العائم وتشمل الخاصية على 4 قيم مختلفة:
clear: right أزله التعويم جهة اليمن.
clear: left أزله التعويم جهة اليسار.
clear: both أزله التعويم في الإتجاهين.
clear: none لا شيء وهو الوضع الأفتراضي، وعداة يستخدم في أزاله الخصائص الموروثة.
حلول مشاكل التعويم
طرق الحل المختلفة الهدف منها هو جعل العناصر اللاحقة للعنصر العائم تتخذ سلوك عناصر الكتله ولا تلتلف حوله كما في حاله إضافة footer، أو جعل الصناديق الحاويةالتى تتضمن عناصر تم تعويمها أن لا تتجاهل ذلك التعويم ويتم استيعابه، وتنقسم إلى:
الحل الأول إضافة وسم <div> فارغ أسفل العناصر العائمة وهو حل قديم لكن مازال مستخدم بكثرة، حيث يفصل ذلك الوسم بين العناصر العائمة وما تحته:
رمز Code:
<div id="main"> <div id="content"> </div> <div id="sidebar"> </div> <div style="clear: both;"></div> </div>
الحل الثاني: إضافة Pseudo-elements :after وهي العناصر المزيفة أو الإفتراضية وتستخدم لإدراج محتويات بعد انتهاء محتوى العنصر! وهذا يعني عدم الحاجه الى إضافة أوسمة html زائدة كما في الحاله الأولى، وسوف نطبقها على فئه إضافية خاصة ولتكن بإسم ’clearfix‘ على هذا النحو:
رمز Code:
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
اقرأ المزيد عن تلك الطريقة كما أن المتصفحات القديمة يلزمها إضافة خصائص أخرى لتعمل بشكل صحيح:
رمز Code:
.clearfix { display:inline-block; } * html .clearfix { display:block; zoom:1; }
المحتوى الذى تم إدراجه صغير جداً يكاد لا يرى كما تم إضافة خصائص أخرى الغرض منها إخفائه تماماً وطريقة العمل هي بإضافة تلك الفئة المسماه clearfix الى أي صندوق ’وعاء للمحتويات‘ يوجد بداخله عناصر تم تعويمها هكذا:
رمز Code:
<div id="main" class="clearfix"> <div id="content"> </div> <div id="sidebar"> </div> </div>
الحل الثالث وهو التجاوز وذلك بالإعتماد على الخاصية Overflow بالقيمة outo أو hidden وفيها يتوسع وعاء المحتويات كي يشمل جميع العناصر الطافية داخله، وتضاف تلك الخاصية ضمن خصائص صندوق ’وعاء للمحتويات‘ الذى يوجد بداخله عناصر تم تعويمها مثلاً:
رمز Code:
#main { border: 4px solid #0C0; background:#FFF; padding:10px; overflow:hidden; }
ويعتبر من أسهل الحلول ومناسب في أغلب الحالات حيث أنه لا يتطلب إضافة أوسمة إضافيه كما انه صالح لجميع المتصفحات، المشكلة الوحيد تظهر في حالة وجود محتويات خارجة عن حدود صندوق المحتويات كصورة كبيرة مثلاً تخطت العرض المحدد ففي هذه الحاله سوف تختفي أو يظهر شريط تمرير يشوه التصميم.
الحل الرابع وهو تعويم صندوق المحتويات نفسه ولكن هذه الطريقة غير مناسبه إلا في حالات معينه ولا تناسب كافة التصمميات، حيث أنه بإزاحتك لصندوق المحتويات سوف يؤثر بدورة على العناصر اللاحقه له.
ظ…ط§ ط±ط¢ظٹظƒ ظپظٹ ط§ظ„ط¹ظˆظ… ظپظٹ طµظپط*ط§طھ ط§ظ„ظˆظٹط¨ طں ط´ط±ط* ط´ط¢ظ…ظ„ ظ„ط®ط¢طµظٹط© float ظپظٹ Css !
رد مع اقتباس
