Listeleme Etiketine Görsel Eklemek

Her Kategori İçin Farklı Arkaplan Kullanarak Listeleme

Egemen Özbeyli 2 Yorum CSS3, Eklentiler, Temalar, WordPress

Bundan önceki yazımda css özelliklerini kullanarak listeleme yöntemlerine giriş yapmıştık,Css’in kendine ait listeleme özelliklerini kullanarak konularımızın başına daire,çember,kare ve alfabetik listeleme metodu özelliklerini ekleyerek uygulamamızı tamamlamıştık.Daha sonra bu yapıyı geliştirerek listeleme metodunda klasik simgeler dışında kendi belirlediğimiz bir grafik dosyasını kullanarak listelemenin nasıl yapıldığınıda görmüştük.Bu paylaşımımda ise her konumuzun başında farklı bir simge kullanarak listeleme yöntemini görüceğiz.

Yaklaşık 1 ay önce egemenozbeyli.com için aklımdaki temayı kodlamaya başladım ve bu 1 aylık süreç içinde karşılaştığım sorunları çözmek için çeşitli araştırmalar yaptım ve bu konu çok dikkatimi çekti.Çoğu forumda her kategori için farklı icon özelliğinin nasıl kullanılacağı hakkında sonuca ulaşmayı bekleyen bir çok konu mevcut.Ben burdanda yola çıkarak bu paylaşımı yapmayı daha blogumun temasını hazırlarken aklımdan geçirmiştim ve bugüne kısmetmiş diyerek anlatımıma geçiyorum. (daha&helliip;)

Devamını Oku


Css ile Listeleme Yöntemleri

Egemen Özbeyli Yorum yazın CSS3

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. (daha&helliip;)

Devamını Oku