CSS تموضع المحتوى

CSS float

آخر تحيين: 05-01-2015

التّموضُع المُطلق و النّسبي و الثّابت display و visibility


يمكننا تطبيق الخاصية float على جميع وسوم html . و تتيح لنا تحديد تموضع الوسم بشكل أفقي بالنسبة لصفحتنا . إما يسار أو يمين : (left أو right). و يفسح بذلك المجال للوسم الذي يليه أن يتمركز إلى جنبه .
مثلا إذا طبقنا الخاصية float على وسم الصّورة <img> . فإن النص الذي يليه سيأخذ مكانه جنب الصورة و ليس تحتها . مثال :



بالمناسبة ، الصورة تمثل مخترع الويب "تيم برنرز لي" : Tim Berners Lee . هذا بين قوسين ، لنعود إلى موضوعنا ، و نترجم هذه الصورة إلى لغة html و css :

.right-float{float:right;}
<img src="tim.jpg" class="right-float" alt="tim">
<p>
  درس " تيم " الفيزياء في جامعة أكسفورد ما بين 1973 و 1976 . و استغل هذه السنوات الثلاث لصنع أول جهاز كمبيوتر له . و اتضحت له فكرة ربط النص التشعبي بالأنترنت .
</p>
<p>
 و اعترف من بعد قائلا : " قمت بأخذ النص التشعبي ثم ربطته بمبدأ TCP و DNS ، و كانت المفاجأة " . و النتيجة هي اختراع الشبكة العنكبوتية العالمية .انتظر إلى حدود 1990 لتطوير التكنلوجيات الثلاث الأساسية لمبدأ الويب : و هي عناوين الويب ، و بروتوكول HTTP و HTML ...
</p>
مشاهدة النتيجة


في صفحة html قمنا بإدراج الصّورة أوّلا ثم كتبنا نصّنا بطريقة عادية ، لا شيء جديد في هذه الشّيفرة ، العملية تتمّ في شيفرة CSS


يجب وضع الصّورة دائما قبل النّص في شيفرة html ، سواءً أردتم لها ان تظهر في اليمين أو اليسار . فالإختيار يتمّ في شيفرة CSS . إن حاولتم وضع وسم الصورة بعد النّص فلن تحصلوا على أي نتيجة . فالخاصّية float تؤثر فقط على الوسوم التي تليها ، و لايهمها البتة ما قبلها .

في بعض الأحيان ، نودّ تطبيق هذه الخاصّية على جزء معيّن من النص ، و الجزء الباقي نريده أن يظهرَ بطريقة عاديّة أي تحت الوسم(تحت الصّورة في مثالنا السابق) ، بطريقة أخرى نريدُ أن نضع حدّاً لfloat في مكان معيّن من النّص . لدينا خاصّية تقوم بذلك وهي clear . و تأخذ ثلاثة قيم

  • left : سيندرج النّص المعني أسفل سابقه الذي طبقّنا عليه ;float:left
  • right : سيندرج النّص المعني أسفل سابقه الذي طبقّنا عليه ;float:right
  • both : سيندرج النّص المعني أسفل سابقه الذي طبقّنا عليه سواءً ;float:left أو ;float:right
.right-float
{
  float:right;
}
.stop-float
{
  clear: right;
}
مشاهدة النتيجة
توقفوا لحظة . ألم تلاحظوا بأن الخاصية float شبيهة بشيء رأيناه سابقا ! إنها القيمة inline-block فهي تحدث نفس التأثير تقريبا . لنجرّب ذلك و نرى الفوارق بين الطريقتين :

float vs inline-block

سنحاول تطبيق الخاصية float ثم القيمة inline-block على نفس وسوم اللائحة

.inlineBlocks li
{
  display: inline-block;
}
.floaters li 
{
  float: right;
}
li 
{
  border:1px solid blue; /*إضافة الحدود لملاحظة بعض الفوارق*/
}

<h2> inline-block </h2>
  <ul class="inlineBlocks">
    <li>الإستقبال</li>
    <li>المواضيع</li>
    <li>من نحن ؟</li>
    <li>اتصل بنا</li>
  </ul>
  
<h2>float</h2>
  <ul class="floaters">
    <li>الإستقبال</li>
    <li>المواضيع</li>
    <li>من نحن ؟</li>
    <li>اتصل بنا</li>
  </ul>
مشاهدة النتيجة


سنظيف الآن حدودا لوسم اللائحة ul ، لنرى مدى مراعاة الطريقتين لطول المحتوى :

/* ... */
ul{
  border: 1px solid red;
}
مشاهدة النتيجة


كما تبرهن النتيجة ، القيمة inline-block حافظت بشكل جيد على طول المحتوى ، حيث قامت بتحديده كاملا باللون الأحمر. بينما فشلت في ذلك الخاصية float

لحد الآن النتيجة هي هدفان لصالح display-inline مقابل لا شيء لfloat . لنكمل تجاربنا ، و نمطر شباكها بالأهداف .
سنظيف الآن محتوى أسفل اللائحة ul و نرى كيف ستؤثّر كل من الطريقتين عليه

<h2> inline-block </h2>
  <ul class="inlineBlocks">
    <!-- ... -->
  </ul>
  <div>
     بعض المحتوى بعض المحتوى بعض المحتوى بعض المحتوى بعض المحتوى بعض المحتوى بعض المحتوى بعض المحتوى 
  </div>
  
<h2>float</h2>
  <ul class="floaters">
   <!-- -->
  </ul>
  <div> 
     بعض المحتوى بعض المحتوى بعض المحتوى بعض المحتوى بعض المحتوى بعض المحتوى بعض المحتوى بعض المحتوى 
  </div>
مشاهدة النتيجة


. طبعا يمكننا ترقيع هذا التصرف الشاذ للخاصية float و ذلك إما :


  • بتحديد طول الكتلة ul .
    ul 
    {
      height:40px;
    }
    لكن عندما يصبح موقعكم تفاعليا ، غالبا ما لن تعرفوا بالتحديد طول المحتوى !!!
  • أو باستعمال الخاصية clear ، إضافة لتحديد الطول
    <ul>
     <!-- ... -->
    </ul>
    <div class="clearFix"></div>
    <div>
      بعض المحتوى بعض المحتوى بعض المحتوى بعض المحتوى بعض المحتوى بعض المحتوى بعض المحتوى 
    </div>
    .clearFix{
      clear: right;
    }

    هذه الطريقة تعتبر أيضا نوعا ما مخالفة لسيميائية لغة html . فالوسوم تستعمل للهيكلة . و نحن أضفنا وسم div فقط لإضافة نمط clear عليه .
    سنكتفي بهذا القدر من التجارب حاليا .


تذكروا هذا : ميلوا دائما لاستعمال القيمة display-inline بدل الخاصية float ، إلا في حالة إذا أردتم لمحتواكم أن يتدفّق على راحته جنب الوسم .
الخاصية float سترهقكم قليلا قبل التحكم فيها . فأثناء تقسيم صفحتكم ستتعبكم بتصرفات غير منتظرة .
و سأعود طبعا لإلقاء المزيد من الضوء على الموضوع كلما سنحت الفرصة .