Her Kategori İçin Farklı Arkaplan Kullanarak Listeleme

Bundan önceki yazımda css özelliklerini kullanarak listeleme yöntemlerine giriş yapmıştık,Css’in kendine ait listeleme özelliklerini kullanarak konularımızın başına daire,çember,kare ve alfabetik listeleme metodu özelliklerini ekleyerek uygulamamızı tamamlamıştık.Daha sonra bu yapıyı geliştirerek listeleme metodunda klasik simgeler dışında kendi belirlediğimiz bir grafik dosyasını kullanarak listelemenin nasıl yapıldığınıda görmüştük.Bu paylaşımımda ise her konumuzun başında farklı bir simge kullanarak listeleme yöntemini görüceğiz.

Yaklaşık 1 ay önce egemenozbeyli.com için aklımdaki temayı kodlamaya başladım ve bu 1 aylık süreç içinde karşılaştığım sorunları çözmek için çeşitli araştırmalar yaptım ve bu konu çok dikkatimi çekti.Çoğu forumda her kategori için farklı icon özelliğinin nasıl kullanılacağı hakkında sonuca ulaşmayı bekleyen bir çok konu mevcut.Ben burdanda yola çıkarak bu paylaşımı yapmayı daha blogumun temasını hazırlarken aklımdan geçirmiştim ve bugüne kısmetmiş diyerek anlatımıma geçiyorum.

İlk olarak listeleme için tanımlamalarımızı yapıyoruz

<ul class="iconlist">
<li class="Anasayfa"><a href="#">Anasayfa</a></li>
<li class="Hakkimda><a href="#">Hakkımda</a></li>
<li class="Arsiv"><a href="#">Arşiv</a></li>
<li class="Iletişim"><a href="#">İletişim</a></li>
</ul>

Burada önemli olan her li için farklı bir class atamak oldu,Bu şekilde bu class’lara ayrı ayrı background-image özelliği tanımlayıp istediğimiz sonuca ulaşabiliriz.Şimdi yapmamız gereken ise aşşağıdaki css düzenlemeleridir.Bunları yaptıktan sonra her kategori için farklı arkaplan özelliği kullandığımız listemiz hazır hale gelicektir.

.iconlist
{
list-style: none;
margin: 0;
padding: 0;
}

li.Anasayfa
{
background-image: url(bullet_home.png);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 2px 0 2px 10px;
margin: .3em 0;
}

li.Hakkimda
{
background-image: url(bullet_about.png);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 2px 0 2px 10px;
margin: .3em 0;
}

li.Arsiv
{
background-image: url(bullet_archieve.png);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 2px 0 2px 10px;
margin: .3em 0;
}

li.Iletisim
{
background-image: url(bullet_mail.png);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 2px 0 2px 10px;
margin: .3em 0;
}

Umarım faydalı bir konu olmuştur,Sorunuz olursa yorum bölümünden sorabilirsiniz.