cssbit 2.0

درس بسيط، لتصميم footer أو ذيل الصفحة (ترجمة غير مستساغة) ب css و xhtml بشكل كامل ..

بعد فتح المحرر وكتابة بعض الاوامر: doctype, html, head .. (عادة يتم توليدها تلقائيا في بعض المحررات ويكفي ان تعدل عليها ليتناسب مع ما تريد)
بعد تقسيم الصفحة وتوزيع المحتويات (header, sidebar, content ..) نصل الى الجزء الاخير من الصفحة وهو Footer ..

ربما يظن بعض الناس (المطورين) ان هذا الجزء غير مهم او لا يحتاج لكثر من الاهتمام، وهذه ايضا وجهة نظر، لذا يكتفون بعبارة او بخلفية ملونة مع بعض الكلمات البسيطة

على افتراض انك اتممت تصميم باقي اجزاء الصفحة سنبدأ مباشرة في تصميم جزء footer كالتالي:

<!-- #start footer -->
<div id="footer">
</div>
<!-- #end footer -->

ساضيف فقرة تحتوي على عبارات بالاضافة الى قائمة list بها بعض الكلمات ..

<p>all right reserved &copy; 2008</p>

و

<ul>
 <li><a href="#">home</a></li>
 <li><a href="#">about</a></li>
 <li><a href="#">maps</a></li>
 <li><a href="#">contact</a></li>
</ul>

يمكن استبدال contact, maps, about .. بما يناسب موقعك

إذن وللتذكير، كود xhtml سيكون هكذا:

<!-- #start footer -->
<div id="footer">
   <p>all right reserved &copy; 2008</p>
 
   <ul>
	<li><a href="#">home</a></li>
	<li><a href="#">about</a></li>
	<li><a href="#">maps</a></li>
	<li><a href="#">contact</a></li>
  </ul>
</div>
<!-- #end footer -->

على افتراض انك استعملت float لتوزيع المحتويات على اليمين وعلى اليسار .. سيكون من الضروري استعمال clear لكي تضمن نزول الصفحة الى الاسفل، يمكنك استخدام class منفصل، ان احببت، باسم spacer مثلا

#footer {
  clear: both;
  background: #EDF6FD;
}

خلفية بدرجة من درجات الازرق (حصلت على اللون من ايقونة rss وخففته ب color schemer)

خصائص الفقرة التي تحتوي على عبارة:

#footer p {
  padding: 1em;
  font: .9em arial;
  color:#333;
  /*font-variant: small-caps;*/
  text-transform: capitalize;
}

لا أعتقد ان هناك شيئا يحتاج الى شرح، استخدم عبارات انجليزية لذلك يمكنني استعمال text-transform و font-variant (يمكن القراءة عنهما في موقع w3school او sitepoint )

ولأنني احب درجات الرمادي استعملت #333

بعد ذلك انتقل الى list التي ادرجتها أسفل العبارة، حيث اعطيت القيمة auto للعرض لياخذ عرض class المردجة فيه وهو #footer (في FF يمكن عدم تحديد العرض لانه يكون افتراضيا auto ويمك استعمال width فقط اذا اردت ان تحدد عرضا مختلفا للقائمة، لكن مع IE شيء آخر ..)
واستعملت overflow لانني ساستعمل float بعد قليل، هذا الامر له فوائد كثيرة مثل اظهار محتوى في scroll ..

#footer ul {
  list-style: none;
  overflow: auto;
  padding: .6em 0;
  width: auto;
}

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

#footer ul li {
  font: .86em arial;
  text-transform: capitalize;
}

جميع العبارات الموجودة ضمن li ستاخذ هذه الخصائص.
ستظهر القائمة بهذا الشكل، بعد إضافة اللون ..

#footer ul li a {
 float: left;
}

الان لكي اجعل الروابط تظهر inline اضفت float، علما ان هناك طرق أخرى لاظهار الروابط inline أي على السطر

#footer ul li a {
 float: left;
 
 /* border & height */
 border-right: 1px solid #C8E4F9;
 height: 20px;
 
 /* color & padding & link effect*/
 padding: .5em 1em;
 color:#3FA0E9;
 text-decoration: none;
 
}

فصلت بين الروابط ب border على اليمين، بارتفاع 20 بيكسل بالاضافة الى padding لوضع مساحة بين العبارات وفصلها

عادة اختصر الروابط واكتفي ب a:hover يمكنك اضافة a:link, a:visited .. حسب رغبتك دائما

#footer ul li a:hover {
 color:#1366A5;
 text-decoration: none;
 }

صورة:

الان لكي احذف border الأخير الذي أتي بعد contact ساضيف class كالتالي:

<ul>
	<li><a href="#">home</a></li>
	<li><a href="#">about</a></li>
	<li><a href="#">maps</a></li>
	<li class="none"><a href="#">contact</a></li>
</ul>

#footer ul li.none a {
 border: 0
 }

في المثال الذي انجزته، اضفت ايقونة على شكل dot لذلك يظهر خط منقط في الصور:

#footer ul {
  background: url(images/dotted.gif) repeat-x left top;
}

لا تعتقد عزيزي المطور انك انتهيت، فما زلت مطالبا بكتابة اكود ل IE ..
بالنسبة ل IE7 يكفي ما يلي:

<style type="text/css">
#footer ul {
  margin: 0
 }
#footer ul li {
  float: left;
 }
</style>

أما IE6 فيمكنك كتابة ما يلي:

<style type="text/css">
#footer ul {
 margin: 0;
 overflow: hidden;
 height: 30px;
 
 }
</style>

هكذا ستحصل على نفس الشكل في كل من FF, IE6, IE7 ..

تجربة المثال مباشرة

حقوق الدرس ل cssbit

This entry was posted on الأحد, يوليو 27th, 2008 at 10:58 م and is filed under دروس. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.