Css ile Listeleme Yöntemleri

Bu paylaşımımda sizlere ayrıntılı bir şekilde css ile listelemenin nasıl yapıldığını anlatıcağım.Bu listeleme yöntemlerini yatay ve dikey menü tasarımında,listelemek istediğimiz konularda ve bunun gibi bir çok alanda kullanabiliriz.Yazımda klasik listeleme yöntemleri,Arkaplan destekli listeleme yöntemi,İç içe geçmiş listeleme yöntemi ve Yatay listeleme yöntemlerini adım adım anlatıcağım.

1 – Arkaplan Kullanılarak Listeleme Yöntemi

Bu listeleme yöntemi sitelerin sidebar’larında mevcut olan klasik listeleme yöntemlerinin arkaplan resmiyle desteklenmiş halidir.
Bunun için ilk olarak yapmamız gereken ul ve li taglarını kullanarak listemizi oluşturmak.

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

Bu şekilde bir listeleme uyguladığımızda oluşan sonuç aşşağıdaki gibi olucaktır.

Görüldüğü üzere normal bir listeleme yöntemi sonucunda oluşan bölümlerin başında oval bir sembol gözüküyor,Arkaplan özelliğini kullanmadan bu oval yerine farklı özellikler de kullanabiliriz.Bunun için yapmamız gereken şey aşşağıdaki satırlardan birini tercih etmek.

ul {  list-style-type:circle; }
ul {  list-style-type:decimal; }
ul {  list-style-type:square; }
ul {  list-style-type:upper-alpha; }

circle : işi boş yuvarlak – decimal : sayı sistemiyle sıralama

square : yuvarlak yerine kare – upper-alpha : büyük alfabetik harflerle

Arkaplan özelliğini kullanabilmemiz için ilk başta üstte sıraladığım klasik listeleme yöntemlerini iptal etmemiz gerekir,Bunun için yapmamız gereken ise

ul { list-style-type:none; }

Bu kodu kullandıktan sonra karşımızdaki görüntü şu şekilde olucaktır.

Şimdi listeleme özelliğimiz için gerekli sıfırlama ayarlarını yapıyoruz.

ul {
list-style-type: none;
padding: 0;
margin: 0;
}

Bu css güzenlemelerinden onra oluşan görüntü şu şekilde olucaktır.

Artık listemize arkaplan icon’umuzu ekliyebiliriz.Bunun için yapmamız gereken aşşağıdaki css kodunu uygulamak

<code>

li { background-image: url(arrow.gif); }</code>

Son oluşan css kodlarımız şu şekildedir.

ul {
list-style-type: none;
padding: 0;
margin: 0;
}

<code>li { background-image: url(arrow.gif); }</code>

 

Bu değişikliklerden sonra oluşan görüntümüzde şu şekilde olucaktır.

Ufak birkaç düzenlemeyle bu sorunuda çözüyoruz ve sonuç aşşağıdaki gibi oluyor

ul {
list-style-type: none;
padding: 0;
margin: 0;
}

li
{
background-image:url(<code>arrow.gif</code>);
background-repeat: no-repeat;
background-position: 0 .4em;
padding-left: .6em;
}

Gördüğünüz gibi birkaç satır kodla bu şekilde listeleme özelliğini kullanabiliyoruz.

Kısa bir süre sonra bu serinin diğer paylaşımı olan her başlık için farklı arkaplan özelliğini kullanarak listeleme nasıl yapılır adlı konu sizlerle olucaktır.