Aycan.net

Selam arkadaşkar orta düzey bir css yazarının vazgeçemeyeceği benim kanaatımca <ul> <li> taglarıdır artık menuleri geçin oyun sitesinde oyunları listelerken herhangi bir modül yazdığımda modül kullanırken herşeyde artık bu taglar var.
Bu tagların özelliği ise kod kalabalığı yapmıyor örn. bir oyun sitesinde son on oyunları div class lar ile çerçevelersek en az 5 satır kod olacakken
ul li ile yaparsak sadece şu kodlar kullanılacaktır

<ul>
<li><a href="oyunadresi.html"><img src="oyunresim"/></a></li>
</ul>

Birde bu döngüyü sorguya soktum mu tadından yenmiyor… : )
Her neyse başka ne gibi avantajları var derseniz bu aralar baya bi jQuery yazmaa başladım ve sadece 1 komutla istediğimiz Li tagını slideUp,slideDown yapma imkanımız var.

Konu sapmadan anlatıma geçeyim. İlk başta her zaman yaptığımız gibi önce css dosyasını yazıyorum
##########################################
Css Kodları

.kalip{width:800px; height:800px;}
.kalip ul {width:500px; height:400px; margin:0px auto;}
.kalip ul li{list-style:none;}
.kalip ul li a{width:190px; height:18px; background-color:#0033CC;
font:bold 11px Tahoma; color:#e2e2e2; display:block; margin:5px; padding:7px 0px 0px 10px;}
.kalip ul li a:hover{width:190px; height:18px; background-color:#e2e2e2;
font:bold 11px Tahoma; color:#0033CC; display:block; margin:5px; padding:7px 0px 0px 10px;}

Burada kalıp diye bir div oluşturduk sonra onun altına 500px genişliğinde ve 400px yüksekliğinde bir ul çerçevesi oluşturduk. Oradaki margin:0px auto komutu ile ise ul çerçevesini ortalama komutudur.
Sonra .kalip ul li tagımızı oluşturduk ve list-style:none değeri verdik yani liste etiketimii koyduk ve başındaki circle yani yuvarlak siyah işareti kaldırdık
Sonra .kalip ul li a tagını oluşturduk asıl sıralamla ve listeleme burada geçiyor arkadaşlar a tagına display:block verdik yani bir üstteki li tagını komple doldurduk sonra margin:5px; verdik ve üstten sağdan soldan alttan 5 pxlik boşlıuk verdik sonra o tagın içindeki yazıyıda padding komutu ile istediğimiz kriterlere göre ortaladık
En sonda ise .kalip ul li a:hover tagını verdik ve üstüne gelicen a tagında değişmesi gereken renk kodlarını yazdık ve css sayfamız bitti şimdi sıra html kodlarında

 <div class="kalip">
 <ul>
 <li><a href="#">Aycan.Net</a></li>
 <li><a href="#">Xotesi.Net</a></li>
 <li><a href="#">Zone.Org</a></li>
 <li><a href="#">R10.Net</a></li>
 <li><a href="#">Iyinet.Com</a></li>
 <li><a href="#">Okulup.Com</a></li>
 </ul>
 </div>

Bu kodları analtmaya gerek yok herşey ortada bu kodları index.html mize koyunca farkı göreceksiniz arkadaşlar.

Burada biz ALT ALTA sıralama yaptık şimdi ise yan yana sıralama yapcaz buradaki tek fark ise
.kalip ul li tagına float:left; komutu eleyeceğiz ve yan yana li taglarının sıralamasını sağlayacağız.

##################################

 .kalip{width:800px; height:800px;}
 .kalip ul {width:500px; height:400px; margin:0px auto;}
 .kalip ul li{list-style:none;float:left;}
 .kalip ul li a{width:190px; height:18px; background-color:#0033CC;
font:bold 11px Tahoma; color:#e2e2e2; display:block; margin:5px; padding:7px 0px 0px 10px;}
 .kalip ul li a:hover{width:190px; height:18px; background-color:#e2e2e2;
font:bold 11px Tahoma; color:#0033CC; display:block; margin:5px; padding:7px 0px 0px 10px;}

Html kodlarımızı yazıyoruz

<div class="kalip">
<ul>
<li><a href=”#”>Aycan.Net</a></li>
<li><a href=”#”>Xotesi.Net</a></li>
<li><a href=”#”>Zone.Org</a></li>
<li><a href=”#”>R10.Net</a></li>
<li><a href=”#”>Iyinet.Com</a></li>
<li><a href=”#”>Okulup.Com</a></li>
</ul>
</div>

Şimdi ön izlemelere bakalım

Demo sayfasına buradan indirebilirsiniz.

ul – li tagları ile yaptığım modül ekleme formu

———————————————————

Bu makale Aycan.net tarafından yazılmıştır. Link göstermeden yayımlamak YASAKTIR.

http://www.aycan.net/blog/css/haydi-ul-li-taglarini-ogrenelim.html

———————————————————