«
»

احصائيات ب css

Saturday 22 November 2008

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

مثال مباشر

سنشيئ قائمة باستعمال ul و li، دائما حاول استعمال هذين الوسمين، فمجالات استخدامهما كثيرة جدا ..

<ul id='section'>
 <li>css <span>64</span></li>
 <li>xhtml <span>12</span></li>
 <li>php <span>7</span></li>
 <li>mysql <span>18</span></li>
 <li>java <span>2</span></li>
 <li>jquery <span>35</span></li>
 <li>mootools <span>45</span></li>
</ul>

لدي اقسام من الموقع، وامام كل قسم اريد عرض عدد الدروس الموجود داخله ..

كود css:

#wrap ul#section {
 list-style: none;
 border: 0px solid #ddd;
 width: 300px;
 font: 1em arial;
}
 
#wrap ul#section li {
  position: relative;
  padding: .3em;
  border-bottom: 1px solid #ddd
}
#wrap ul#section li span {
 position: absolute;
 top: 5px;
 right: 05px;
 color:#f00;
 font-family: georgia
}

الخصائص التي تجعل الارقام تظهر على اليمين (او على اليسار في حال استعمال العربية)، هي ما يلي:

أولا أعطينا الخاصية position: relative ل li; لأن الارقام ستأخذ موضعا posistion بناء على li فهو المعلَم،وهي ستتموضع بناء على موضعه، بحيث اذا غيرت العرض او مكان القائمة .. ستنتقل الارقام ايضا وتحافظ على مكانها .. هنا درس يوضح الفكرة، أذن هذا أهم شيء يجب الانتباه إليه

position: relative;

وبالنسبة للارقام التي اضفتها داخل الوسم span فستأخذ الخصائص التالية:

#wrap ul#section li span {
 position: absolute;
 top: 5px;
 right: 05px;
}

وهي واضحة ولا تحتاج لشرح

يمكن اضافة تاثيرات كلون الخلفية او ايقونات وما شابه ..

4 تعليقات

  1. عبدالملك الثاري says:
    November 22, 2008 at 6:54 pm

    Simple & Nice

    Thank You And Keep the good job on Mr Naeem

  2. warzazi says:
    November 22, 2008 at 7:15 pm

    شكرا لك درس سهل و منظم

  3. عبد الهادي says:
    November 22, 2008 at 8:18 pm

    السلام عليكم ورحمة الله وبركاته..
    درس قيم.. شكرا لك أخي الكريم cssbit..
    في انتظار دروس أخرى إن شاء الله..
    موفق ومني لك أرق تحية..

  4. joker400 says:
    November 26, 2008 at 3:04 am

    درس رائع جدا

    بالتوفيق أخوي ومنتظرين جديدك

التعليقات مغلقة.