CSS3 ile Listeleri Otomatik Numaralandırmak

  • Kategori: CSS3
  • 4 ay önce

Sıralı listelemelerde hiç uğraşmadan otomatik olarak numaralandırma işlemi CSS3 ile çok kolay bir şekilde yapılabiliyor. Bu UL ve OL etiketleri ile de yapılabilir ancak diğer html elementlerine de bunu uygulamak gerektiğinde bu özelliğe ihtiyacımız olabilir.

Şimdi senaryomuzu DIV elementi üzerinden kuralım.

Öncelikle html yapımızda liste ögelerine ve bu ögeleri kapsayan bir elemente ihtiyacımız var. Sanırım aşağıdaki gibi bir yapı işimizi görür.

<div class="list-wrapper">
    <div class="liste-item">List item</div>
    <div class="liste-item">List item</div>
    <div class="liste-item">List item</div>
    <div class="liste-item">List item</div>
    <div class="liste-item">List item</div>
    <div class="liste-item">List item</div>
</div>

Yapımızı kurduk. 

Şimdi kapsayan elemanımıza dinamik numaralandırma için bir tanımlama yapmamız gerek. Onuda şu şekilde yapıyoruz;

.list-wrapper {
    counter-reset: dinamik_liste;
}

Sonra liste ögelerimizin her birine bu yaptığımız tanımlamayı uygulatıyoruz. Sanki döngüler ile işlem yapar gibi her listenin sıra numarasını alıp before ile her listenin en başına yazdırıyoruz. Aşağıdaki kod parçası ile bunu sağlıyoruz :)

.list-wrapper .list-item:before {
    content: counter( dinamik_liste );
    counter-increment: dinamik_liste;
}

Hatta şöyle ufak bir ek yapıp listemizi daha güzel bir hale getirebiliriz ;)

.list-wrapper .list-item:before {
    content: counter( dinamik_liste ) " - ";
    counter-increment: dinamik_liste;
}

Bu örneğin çalışan halini görmek isterseniz buraya tıklayabilirsiniz.

Yorum Bırak

Yorum gönderirken kullanabileceğiniz BBKOD listesi için tıklayın

  • [b] ... [/b]
  • [i] ... [/i]
  • [u] ... [/u]
  • [s] ... [/s]
  • [font size="5" color="#333"] ... [/font]
  • [url href="link"] ... [/url]
  • [img alt="test"] test.jpg [/img]
  • [code lang="css"] ... [/code]
  • [code lang="js"] ... [/code]
  • [code lang="php"] ... [/code]
  • [code lang="json"] ... [/code]
  • [youtube width="560" heght="315" frameborder="0" allowfullscreen="true"] ... [/youtube]