css ile listeleme

Css Liste Özellikleri

Egemen Özbeyli 3 Yorum CSS3

Merhaba arkadaşlar,

Bu paylaşımımda sizlere Css ile liste tanımlamayı ve liste özelliğini kullanarak yapabileceğiniz uygulamalardan bahsedeceğim.

İlk olarak konu hakkında genel bi bilgi vermek gerekirse,Css liste özelliği ilk zamanlarda konuları veya maddeleri listelemede kullanılıyordu fakat artık liste yapısı menu yapımında daha çok kullanılmakta.Yani güzel menüler tasarlamak için Css ve liste yapısını bilmek çok etkilidir.

Şimdi liste özelliklerine madde madde göz atalım ;

1 – List Style Type :

disc,circle,square,decimal,lower-roman,upper roman gibi farklı kullanım özellikleri bulunmaktadır,Bu özellikler list-style-image değeri none olduğunda kullanılan özelliklerdir.Listelerin başındaki simgeleri bu özellikleri kullanarak değiştirebilir,listelerin başında daire,çember,kare veya sayı değerleri şeklinde sıralayabilirsiniz.

Kullanımı aşağıdaki gibidir,İlk olarak Css tanımlamasını belirleyip sonra Html kısmını düzenliyoruz.


ul.a {list-style-type:circle;}  // circle yazan kısma diğer parametleri koyarak deneme yapabilirsiniz.

/////////////////////////////////////

<ul class="a">
<li>Adana</li>
<li>İstanbul</li>
<li>Zonguldak</li>
</ul>

List-Style-Type | değer ; Diğer değerlerle listelendiğinde nasıl göründüğü önizlemek için buraya bakabilirsiniz.

2 – List-Style-Position :

Bu özellikle list-item işaretlerinin metinin içindenmi , dışındanmı olacağını belirleyebilirsiniz.Bu şekilde net anlaşılmasada buradaki örneğe bakara dediğimi daha iyi anlayabilirsiniz.

3 – List-Style-İmage :

Bence bu konuda bilmeniz gereken en önemli özellik budur,Çünkü yazımın başındada söylediğim gibi bu özellik sayesinde çok güzel menüler oluşturabilirsiniz.Ben bu yazımda bu bölümü direk eski paylaşımıma yönlendirmek istiyorum çünkü geçmiş zamanda bu konu hakkında ayrıntılı bir paylaşımda bulunmuştum.Ayrıntılı bilgi için buraya

 

Umarım faydalı bir paylaşım olmuştur,Kafanıza takılan veya merak ettiğiniz kısımları bana yorum bölümünden iletebilirsiniz.

Devamını Oku


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