CSS List Özellikleri
Liste özellikleri listeleme amaçli kullanilmaktadir, ayrica son yillarda list özellikleri web sitelerindeki menuleri tasarlamak için kullaniliyor.
Liste
HTML de 2 tip liste vardir:
- Sirasiz Listeler – Liste ögelerinin önünde siyah yuvarlak bir icon çikar.
- Sirali Listeler – Liste ögelerinin önüne sayilar veya harfler gelir. CSS ile istenirse liste ögelerinden önce resimde konulabilir.
Farkli Liste Ögesi Belirticileri (list-style-type):
Liste öge belirticileri list-style-type özelligini kullanarak degistirilebilir.
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
Sirali Listeler
Sirali Listeler <ol> etiketi ile tanimlanir ve sirali listelere ait ögeleri biçimlendirmek için asagidaki list-style-type degerleri kullanilir.
.
Deger | Açiklama |
---|---|
decimal | Normal Numaralandirma (1,2,3,4, vb.) |
decimal-leading-zero | Sayinin Önüne Sifir Koyarak Artar. (01, 02, 03, vb.) |
armenian | Geleneksel Ermeni Numaralandirmasi |
georgian | Geleneksel Gürcü Numaralandirmasi (an, ban, gan, vb.) |
lower-alpha | Küçük Harflerden Olusan Alfabe (a, b, c, d, e, vb.) |
lower-greek | Küçük Harflerden Olusan Yunan Alfabesi (alpha, beta, gamma, vb.) |
lower-latin | Küçük Harflerden Olusan Latin Alfabesi (a, b, c, d, e, vb.) |
lower-roman | Küçük Harflerden Olusan Roman Alfabesi (i, ii, iii, iv, v,vb.) |
upper-alpha | Büyük Harflerden Olusan Alfabe (A, B, C, D, E, vb.) |
upper-latin | Büyük Harflerden Olusan Latin Alfabesi (A, B, C, D, E, vb.) |
upper-roman | Büyük Harflerden Olusan Roman Alfabesi (I, II, III, IV, V, vb.) |
Sirali Listeler için Kullanim Örnegi
ol.dc {list-style-type:decimal;}
ol.dcz {list-style-type:decimal-leading-zero;}
ol.ar {list-style-type:armenian;}
ol.ge {list-style-type:georgian;}
ol.lr {list-style-type:lower-roman;}
list-style-type:decimal;
- Kahve
- Çay
- Kola
list-style-type:decimal-leading-zero;
- Kahve
- Çay
- Kola
list-style-type:armenian;
- Kahve
- Çay
- Kola
list-style-type:georgian;
- Kahve
- Çay
- Kolo
list-style-type:lower-roman;
- Kahve
- Çay
- Kola
Sirasiz Listeler
Sirasiz Listeler <ul> etiketi ile tanimlanir ve sirasiz listelere ait ögeleri biçimlendirmek için asagidaki list-style-type degerleri kullanilir.
Deger | Açiklama |
---|---|
none | Madde baslarindaki ikonu kaldirir. |
disc | Madde baslarinda siyah yuvarlak ikon çikarir. Varsayilan. |
square | Madde baslarinda siyah kare ikon çikarir. |
circle | Madde baslarinda siyah yuvarlak içi bos ikon çikarir. |
Sirasiz Listeler için Kullanim Örnegi
ul.nn {list-style-type:none;}
ul.dsc {list-style-type:disc;}
ul.crc {list-style-type:circle;}
ul.sq {list-style-type:square;}
list-style-type:none;
- Kahve
- Çay
- Kola
list-style-type:disc;
- Kahve
- Çay
- Kola
list-style-type:circle;
- Kahve
- Çay
- Kola
list-style-type:square;
- Kahve
- Çay
- Kola
Internet Explorerin hiç bir versiyonu "decimal-leading-zero", "lower-greek", "lower-latin", "upper-latin", "armenian" veya "georgian" degerlerini DOCTYPE özelligini kullanmadiginiz sürece desteklemez.
Liste Ögeleri için Resim Kullanmak (list-style-image)
Liste ögeleri için resim kullanmak için list-style-image özelligini kullaniriz. Böylece her ögenin basinda bu resim görünecektir.
Örnek
ul.resimli
{
list-style-image: url('pembekare.gif');
}
- Kahve
- Çay
- Kola
Yukaridaki örnegi farkli tarayicilarda deneyecek olursaniz IE ve Opera da Firefox,Chrome ve Safariye göre göre resimlerin biraz daha büyük çiktigini görebilirsiniz.
Eger ögelere atadiginiz resmin tüm browserlarda ayni boyda görünmesini istiyorsaniz asagidaki çözümü uygulamaniz gerekiyor.
Tüm Tarayicilarda Ayni Görüntüyü Saglama – CrossBrowser
Asagidaki örnekde ögeler için atadiginiz resim tüm tarayicilarda ayni boyutta görünür.
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
.
Örnegin Açiklamasi:
- ul için açiklama:
- list-style-type özelligine none degerini veriyoruz,böylece öge belirteçlerini kaldirmis oluyoruz.
- padding ve margin özelliklerine 0 veriyoruz.
-
li için açiklama:
- Resmin urlsini veriyoruz ayrica resmin tekrarlanmamasini saglamak için background-repeat özelligine no-repeat degerini veriyoruz.
- Resmin çikmasini istedigimiz kordinatlarini veriyoruz. örnekte sola 0 saga 5 piksel verdik.
- padding-left özelligi ile metni soldan 14 piksel uzakta olacak sekilde ayarliyoruz.
Listeler – Kisa Kullanim
Listeler için tanimladigimi tüm özellikleri tek bir satirda kisaca yapabiliriz. Kisa kullanim için list-style özelligini kullaniyoruz.
ul
{
list-style: square url("pembekare.gif");
}
Kisa yazim kullandigimiz zaman degerlerin sirasi asagidaki gibi olur:
- list-style-type
- list-style-position
- list-style-image
Kisa yazim kullaniminda siradaki bir özellik atlanirsa tarayici verilen degere göre uygun özelligi bulur.
Özellik | Deger | Açiklama |
---|---|---|
list-style | Tüm özelliklerin tek bir satirda tanimlanmasini saglar | list-style-type list-style-position list-style-image inherit |
list-style-position | Liste elemanlarinin daha içeriye veya biraz disariya yerlesmesini saglar. | inside outside inherit |
list-style-image | Liste elemanlarinin önüne resim eklemek için kullnilir. | URL none inherit |
list-style-type | Liste elemanlarini önünde çikan isaretlerin tipini belirler. | none disc circle square decimal decimal-leading-zero armenian georgian lower-alpha upper-alpha lower-greek lower-latin upper-latin lower-roman upper-roman inherit |
Dersimizin ilk bölümünde listelerin son zamanlarda menü tasarlamak için kullanildigindan bahsetmistik. Simdi gelin listeleri kullanarak bir menü örnegi yapalim.
Menü olusturmak için bir liste ekliyoruz ve menümüzü olusturacak linkleri listenin birer elemani olarak asagidaki gibi ekliyoruz. Bu listeyi bir div içine koyuyoruz.
<div class="menu">
<ul>
<li><a href="#">AnaSayfa</a></li>
<li><a href="#">Makaleler</a></li>
<li><a href="#">Hakkimizda</a></li>
<li><a href="#">Iletisim</a></li>
</ul>
</div>
Simdi yukarida tanimladigimiz liste css ile sekillendirmeden önce asagidaki gibi görünecektir.
Simdi ise div için aradigimiz menu classini css ile yazalim ve bakalim menünün görünümü nasil olacak
CSS tanimlamasi asagidaki gibi olacak.
.menu_demo
{
position: relative;
height: 43px;
font-size: 14px;
text-transform: capitalize;
background: #FCFAE6 url('ust_menu_bg.png') repeat-x left bottom;
font-family: Georgia, "Times New Roman" , Times, serif;
margin-bottom: 10px;
}
.menu_demo ul
{
margin: 0;
padding: 0;
list-style-type: none;
width: auto;
float: left;
}
.menu_demo ul li
{
display: block;
float: left;
margin: 0 2px;
}
.menu_demo ul li a
{
display: block;
float: left;
color: #ffdab6;
text-decoration: none;
padding: 0 0 0 25px;
height: 43px;
line-height: 50px;
width:100%;
}
.menu_demo ul li a:hover
{
color: #894d12;
background: url('ust_menu_left-ON.gif') no-repeat left top;
}
.
Yukaridaki CSS tanimlamasini ekledigimiz zaman menümüzün görüntüsü asagidaki gibi oldu.
Yukaridaki örnegi inceleyerek sizde kendi menünüzü tasarlayabilirsiniz.
.
Merhaba Liste içindeki yazi, listenin boyutunu asiyorsa yazinin bir alt satira geçmesi için hangi özelligi kullanmamiz lazim. bulamadim.
word ya da not defterindeki sözcük kaydir-word-wrap özellgi gibi