İyinet'e Hoşgeldiniz!

Türkiye'nin En Eski Webmaster Forum'una Hemen Kayıt Olun!

Kayıt Ol!

Haydi ul – li taglarını öğrenelim

AycanB

0
İyinet Üyesi
Katılım
13 Ocak 2008
Mesajlar
201
Reaction score
3
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ı

Kod:
.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
##########################################

Kod:
<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.

altaltali.jpg


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.

##################################
Kod:
.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
Kod:
<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

yanyanali.jpg


Demo sayfasına buradan indirebilirsiniz.

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

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

Haydi ul – li taglarını öğrenelim

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

peep

0
İyinet Üyesi
Onaylı Üye
Katılım
20 Mayıs 2007
Mesajlar
6,382
Reaction score
86
çok güzel anlatmışsın teşekkürler
 

Türkiye’nin ilk webmaster forum sitesi iyinet.com'da forum üyeleri tarafından yapılan tüm paylaşımlardan; Türk Ceza Kanunu’nun 20. Maddesinin, 5651 Sayılı Kanununun 4. maddesinin 2. fıkrasına göre, paylaşım yapan üyeler sorumludur.

Backlink ve Tanıtım Yazısı için iletişime geçmek için Skype Adresimiz: .cid.1580508955483fe5

Üst