HTML Listeleme Etiketine Görsel Eklemek


Sitelerimizde gerek menülerde, gerekse yazılarımız içinde bazen listeleme yapma ihtiyacı duyarız. Tabi listeleri tasarımımıza uygun şekilde güzelleştirmek de isteriz. İşte bu noktada en çok kullanılan yöntem liste etiketine bir arkaplan resmi atamak ve bu resmi en sola dayamaktır. Not olarak şunu da belirtmeliyim ki bu yazımda sıralı olmayan listelerden (ul) bahsediyorum. Şimdi basit iki örnekle konuyu inceleyelim.

HTML Kodumuz
Aşağıdaki kodumuzda her öğeye bağlantı (link) verdim ki üzerine gelindiğinde görselin değişimesinin de nasıl yapıldığını görelim.

<div id=”yakuter”>
<ul>
<li><a href=”anasayfa.html” title=”Anasayfa”>Anasayfa</a></li>
<li><a href=”hakkimizda.html” title=”Hakkımızda”>Hakkimizda</a></li>
<li><a href=”arsiv.html” title=”Arşiv”>Arşiv</a></li>
<li><a href=”yardim.html” title=”Yardım”>Yardım</a></li>
<li><a href=”iletisim.html” title=”İletişim”>İletişim</a></li>
</ul>
</div>
Not 1: Eğer amacınız içeriğinde bağlantı olan listeleme etiketlerini biçimlendirmekse 2. yöntemi kullanmanızı tavsiye ederim çünkü 1. yöntemde kullanılan li:hover özelliği IE 6‘da desteklenmeyen bir husus. Genel olarak ise tavsiyem 1. Yöntemi kullanmanızdan yanadır çünkü içinde bağlantı (link) olmayan etiketleri de kapsar.
Not 2: Görsel olarak iki farklı nesne kullandım (ikon.gif, ikon2.gi). Dilerseniz bu iki görseli birleştirip CSS Sprite Tekniği ile de aynı uygulamayı gerçekleştirebilirsiniz.

CSS Kodumuz – 1. Yöntem “li” Etiketini Biçimlendirmek
Aşağıdaki kod ile yapmış olduğumuz olay listeleme etiketinin standart liste tipini iptal edip (list-style-type:none;), istediğimiz bir arkaplan resmi atamak ve bunu en sola dayamak.

#yakuter ul li {

list-style-type:none;

background:url(../resimler/ikon.gif) left center no-repeat;

padding:5px 0px 5px 25px;

}

#yakuter ul li:hover {

background:url(../resimler/ikon2.gif) left center no-repeat ;

}

#yakuter ul li a {

text-decoration:none;color: #006400;

}

#yakuter ul li a:hover {

color:#666666;

}

CSS Kodumuz – 2. Yöntem “a” (link) Etiketini Biçimlendirmek
Aşağıdaki kodun işlevi ise li etiketini değil, “li” etiketi içinde bulunan “a” etiketini biçimlendirmek. Böylece IE 6‘da da fare ile üzerine gelindiğinde resmi değişen bir liste sahibi oluyoruz.

#yakuter ul li {

list-style-type:none;

}

#yakuter ul li a {

display:block;

background:url(../resimler/ikon.gif) left center no-repeat ;

padding:5px 0px 5px 25px;

text-decoration:none;

color: #006400;

}

#yakuter ul li a:hover {

background:url(../resimler/ikon2.gif) left center no-repeat ;

color:#666666;

}

Sonuç
Aslında listeleme etiketlerine resim eklemek için list-style-image özelliği de kullanılabilir fakat bu özelliği dilediğimiz gibi özelleştiremediğimiz için arkaplana resim atama tekniği daha fazla kullanılıyor.

Umarım bu basit ama bir o kadar da etkili yöntem ile siteleriniz daha da güzelleşir. Saygılar, sevgiler…