«
»

footer links بأبسط طريقة

الأحد 2 أغسطس 2009

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

مثال مباشر

سنتعمل Class داخل Footer ونعطيه بعض الخصائص، وداخل هذا Class سنستعمل Heading (لك حرية الاختيار) والقوائم Bulleted List

<div id="footer">
	<div class="section">
	  <h2>title</h2>
	  <ul>
		 <li>link</li>
	  </ul>
	</div>
</div>
#footer .section {
	float: left;
	width:200px;
	padding:1em;
	margin: 10px;
}

كرر Class section في صفحة HTML حسب ما لديك من روابط، بعد ذلك أضف خلفية وألوان وخصائص حسب رغبتك.

ul {
	margin: 10px 0 0 0
}
ul li {
	text-transform: capitalize;
	display: block;
	padding:.2em;
	border-bottom:1px solid #BCD19E
}
ul li a {
	color:#BCD19E;
}
ul li a:hover {
	color:#fff
}

ولا تنس إضافة بعض Fix ل IE6:

/* IE Hacks */
*html #footer {
	height:1%;
}

5 تعليقات

  1. احمد عيسى قال:
    2 أغسطس 2009 الساعة 18:43

    كنت ابحث عن ذلك . :)

    درس رائع .

    شكرا cssbit

  2. سليمان قال:
    3 أغسطس 2009 الساعة 10:49

    شكرا على هذه التلميحات اللطيفة والمفيدة
    اود السؤال اين اضيف fix الـ ie ؟
    هل يكون داخل نفس ملف الـ css او يجب ان اضيفه في مكان آخر؟؟

  3. cssbit قال:
    3 أغسطس 2009 الساعة 10:54

    سلميان:
    أضفه مباشرة في ملف style.css

  4. ravi قال:
    3 أغسطس 2009 الساعة 23:06

    درس ولا احلى ولا اجمل من هيك
    تسلم ايديك على هاد الدرس
    والله يوفقك

  5. محمد قال:
    25 ديسمبر 2010 الساعة 06:55

    شكرا على الدرس

أضف تعليقا

لن يظهر بريدك لأحد آخر

إن أردت