Haydi ul – li taglarını öğrenelim

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

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ı

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

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

Li

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.

Html kodlarımızı yazıyoruz

Şimdi ön izlemelere bakalım

li

Demo sayfasına buradan indirebilirsiniz.

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

“Haydi ul – li taglarını öğrenelim” üzerine 10 yorum

  1. peki hocam bu leri iç içe açabiliyormuyuz ?
    yani alt kategori yapmak istesek slide olması için ?
    kaç tane iç içe ul açabliriz ve hepsini kapatmamız gereklimidir.??

  2. li tagları kapatmadan da çalışıyor ama hiç bir zaman bir tagaçıp da kapatmamazlık yapmadım o yüzden tagları kapatmanızı öneririm birde iç içe istediğiniz kadar ul li açabilirsiniz

    örn:



  3. float:left; taglarını sütun sütun kullanamıyordum, sadece bunun için üç saatimi verdim ve sonunda makalenizde bulabildim. Çok teşekkür ederim 🙂

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir