CSS Kodlamaya Giriş -5

Uzun bir aradan sonra CSS temelleri dersimize kaldığımız yerden devam ediyoruz. Bu yazı için giriş yaptığımız sayfaya buradan ulaşabilirsiniz. Bu konuda ise 4. maddemizde yer alan sıralı ve sırasız listelemeleri anlatacağım.

Sıralı ve Sırasız Listeler (Ordered and Unordered Lists):

<ol> sıralı listeleme, numaralandırma ile belirlenmiş öğeleri listelemek için kullanılır.

<li> sırasız listeleme, bullet dediğimiz ikonlar ile işaretlendirilmiş listeler için kullanılır.

Varsayılan olarak liste öğesi stilleri basit ve sade olarak ayarlanmıştır. Ama CSS yardımı ile bunları kolayca özelleştirebiliriz.

Sırasız Listeleri Özelleştirme

Varsayılan bullet, donuk olup liste içeriğine yeterince dikkat çekmeyebilir. İşte bunun için basit ama etkili bir yöntem kullanabiliriz:

Varsayılan bullet\’ı silmek ve her liste öğesi için arka plan resmi kullanmak.

Yukarıdaki örnekte listeleme için standart bullet yerine arkaplan resmi kullanıştır. Bu şu şekilde kodlayabiliriz:

[php]

ul.product_checklist {
list-style: none; /*–varsayılan bullet ı sildik–*/
margin: 0;
padding: 0;
}
ul.product_checklist li {
padding: 5px 5px 5px 25px; /*–her öğe çevresine boşluk atadık–*/
margin: 0;
background: url(icon_checklist.gif) no-repeat left center; /*–arkaplan resmi olarak bir bullet ikon ekledik–*/
}

[/php]

Özel listeleme yapmak istiyorsak, list-style: none kullanarak varsayılan bullet \’ı silmeliyiz.