CSS 3 Ekim 2010

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.

\"Unordered

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

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--*/
}

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

Bunu da Oku:  E-Book: CSS Giriş

Yazar Bilgileri

Emrah emrah19may@hotmail.com
1981 Samsun doğumlu ve Gazi Üniversitesi, Bilgisayar ve Öğretim Teknolojileri Eğitimi mezunu. Bilişim Teknolojileri Öğretmeni olarak görev yapmakta olup DMOZ Editörü, Web-Grafik Tasarımı ve SEO eğitmeni.

BUNLARI DA OKUYUN

Yapılan Yorumlar (1)

  1. Louis Gordinier

    Great tips! Thank you…

Yorum Yap