CSS Listeleme
Yeni bir makalede tekrardan selamlar yolluyorum :)
Web tasarım yolunda adım adım tasarım derslerine devam ederken bugünkü yeni konumuz CSS'te listeleme olacak.
Listeleme derken aslında nesnelerin,yazıların vs.alt alta ya da yan yana sıralı bir biçimde dizilmesini kastediyorum.HTML listelemek için iki DOM nesnesini kullanıyoruz; ul ve li tagları.
Ul tagı aslında listenin dış katmanıdır ve listeyi bir düzlemde düzgün bir biçimde durmasını sağlar,li tagı ise listedeki sıralı nesnelerin her birine denir.Bu demek oluyor ki bir ul tagı ile sonsuz li tagını içeren sıralı bir nesne oluşturabiliriz.
Konuyu küçük bir örnekle devam ettirelim ve yeni bir boş HTML belgesi oluşturalım,ardından body tagları içerisine ul tagı ekleyelim:
Nesneler listesinin omurgasını bu kadar basit bir şekilde kurduk şimdide nesnelerimizi doldurmaya geldi,örnek olsun diye gıdaların listesini oluşturalım:
Ekran görüntüsüne bakalım:
Sanırım şu ana kadar CSS ile listeleme konusunu artık hayal ediyor olmalısınız :)
Listeleme konusuyla ilgili olarak bir diğer durum ise li tagına sahip listenin bir öğesi aynı zamanda bir başka liste olabilmektedir.Kulağa ilk başta karmaşık gelebilir ancak bahsettiğim konu meyve nesnesinin alt nesnelerini daha doğrusu elma,armut gibi alt listesini ekleyebiliriz.
Örneğimize uyarlarsak öncelikle "Temel Gıda" adında yeni bir li tagına sahip nesne oluşturuyoruz:
Şimdi yeni bir alt liste oluşturuyoruz,bunun için alt listemize ul tagıyla omurga oluşturduktan sonra her alt öğe için yeniden li tagları yazıyoruz:
Gördüğünüz gibi alt kategorileme denilebilecek yapımızı oluşturduk,şimdi birkaç örnek daha yazalım:
Not:Alt liste oluştururken görselde göründüğü gibi klavyenizden "Tab" tuşunu kullanarak boşluklar oluşturabilir ve HTML/XHTML belgenizin okunabilirliğini kolaylaştırabilirsiniz.
Diğer üst listenin alt öğelerini kendiniz doldurarak elinizi bu konuya aşina kılabilirsiniz,çünkü CSS listeleme konusu şimdi başlıyor :)
CSS listeleme konusuyla ilgili üç öznitelik vardır,bunlar listelerin sol kısımdaki madde imlerini düzenlememize yardımcı olmaktadırlar.
Şimdi sırayla görelim:
1-List-Style-Type
Liste öğelerinin yanındaki madde imlerini doğrudan düzenlemimize yardımcı olurlar.Çok sayıda liste stil tipleri vardır,en başlıca kullanılanları:
Circle: İçi boş çember,
Decimal: Liste elemanları 1'den başlar ve numerik olarak sonsuza kadar gider,
Disc: İçi dolu çember,
Lower-Alpha: Küçük harfler,
Upper-Alpha: Büyük harfler,
Square: Kare,
None: Hiçbir madde imi olmadan öğeleri sıralar.
Örneğimizde listemizin ana öğelerine rakam,alt öğelerine ise küçük harfler verelim,bunun için head tagına style tagı açıyor ve içerisine ul ve li için ayrı ayrı CSS biçimleri yazıyoruz:
Şimdi style tagımıza bir bakalım ne yapmışız;
8. satırda en dış omurganın içindeki liste elemanlarını yani; sebze,meyve.. elemanlarının liste imlerini decimal
belirttik.
9. satırda sırasıyla en dış elemanın alt öğelerindeki omurganın alt öğelerinin liste imlerini lower-alpha olarak
biçimlendirdik.
Sıralama konusu en dışardan en içeriye doğru gideceği için hangi omurga hangi listenin üstünde yer alıyor diye
dikkatli belirtmek gerekiyor.
2-List-Style-Image
Liste elemanlarının solunda list-style-type gibi numerik,alfabetik gibi küçük noktalama işaretleri kullanmak yerine her öğenin imine resim koymamızı sağlar.
Şimdi google'dan küçük bir yıldız resmi bulalım ve listemizde kullanalım.
Resmimiz 20x20 px boyutlarında bu olsun:
Resmi yeni alt listeye uyarlamak için sebze listesine alt öğeler ekliyor ve sebze listesi için bir sınıf oluşturuyoruz:
HTML listemize bakarsak Sebze listesinin alt listesindeki ul ile belirttiğimiz omurgaya sınıfımızı yazdık ve bu sınıfımızdaki list-style-image özniteliğindeki resim sebze listesinin alt listesindeki her elemanın madde imi oluyor:
Tabi listedeki madde imi olarak kullanılacak resmin piksel cinsinden boyutlarını doğru hesaplamak gerekiyor,aksinde
madde imlerindeki resimlerin çok büyük ya da küçük olması liste görünümünü hiçte hoş kılmaz.
3-List-Style-Position
Liste elemanlarının yanındaki madde imlerinin sayfanın iç kısmına olan uzaklığını ifade eder,inside (içeride) ve
outside(dışarıda) olmak üzere iki özelliği yer almaktadır.
Öncelikle sayfamızdaki listenin yapısına bir gözatalım:
Şimdiyse style tagına daha önceden yazmış olduğumuz ul li sırasının içerisine inside niteliğini ekleyelim:
Gördüğümüz gibi tüm liste sayfanın sol kenarından uzaklaşıp sayfanın içerisine (inside) doğru kaydı,eğer outside kullanmış olsaydı liste sol kenara yaklaşacaktı.
CSS List-Style makalemizin böylece sonuna gelmiş bulunuyoruz,bir sonraki makalemizde görüşmek dileğiyle hoşçakalın :)
Web tasarım yolunda adım adım tasarım derslerine devam ederken bugünkü yeni konumuz CSS'te listeleme olacak.
Listeleme derken aslında nesnelerin,yazıların vs.alt alta ya da yan yana sıralı bir biçimde dizilmesini kastediyorum.HTML listelemek için iki DOM nesnesini kullanıyoruz; ul ve li tagları.
Ul tagı aslında listenin dış katmanıdır ve listeyi bir düzlemde düzgün bir biçimde durmasını sağlar,li tagı ise listedeki sıralı nesnelerin her birine denir.Bu demek oluyor ki bir ul tagı ile sonsuz li tagını içeren sıralı bir nesne oluşturabiliriz.
Konuyu küçük bir örnekle devam ettirelim ve yeni bir boş HTML belgesi oluşturalım,ardından body tagları içerisine ul tagı ekleyelim:
Nesneler listesinin omurgasını bu kadar basit bir şekilde kurduk şimdide nesnelerimizi doldurmaya geldi,örnek olsun diye gıdaların listesini oluşturalım:
Ekran görüntüsüne bakalım:
Sanırım şu ana kadar CSS ile listeleme konusunu artık hayal ediyor olmalısınız :)
Listeleme konusuyla ilgili olarak bir diğer durum ise li tagına sahip listenin bir öğesi aynı zamanda bir başka liste olabilmektedir.Kulağa ilk başta karmaşık gelebilir ancak bahsettiğim konu meyve nesnesinin alt nesnelerini daha doğrusu elma,armut gibi alt listesini ekleyebiliriz.
Örneğimize uyarlarsak öncelikle "Temel Gıda" adında yeni bir li tagına sahip nesne oluşturuyoruz:
Şimdi yeni bir alt liste oluşturuyoruz,bunun için alt listemize ul tagıyla omurga oluşturduktan sonra her alt öğe için yeniden li tagları yazıyoruz:
Gördüğünüz gibi alt kategorileme denilebilecek yapımızı oluşturduk,şimdi birkaç örnek daha yazalım:
Not:Alt liste oluştururken görselde göründüğü gibi klavyenizden "Tab" tuşunu kullanarak boşluklar oluşturabilir ve HTML/XHTML belgenizin okunabilirliğini kolaylaştırabilirsiniz.
Diğer üst listenin alt öğelerini kendiniz doldurarak elinizi bu konuya aşina kılabilirsiniz,çünkü CSS listeleme konusu şimdi başlıyor :)
CSS listeleme konusuyla ilgili üç öznitelik vardır,bunlar listelerin sol kısımdaki madde imlerini düzenlememize yardımcı olmaktadırlar.
Şimdi sırayla görelim:
1-List-Style-Type
Liste öğelerinin yanındaki madde imlerini doğrudan düzenlemimize yardımcı olurlar.Çok sayıda liste stil tipleri vardır,en başlıca kullanılanları:
Circle: İçi boş çember,
Decimal: Liste elemanları 1'den başlar ve numerik olarak sonsuza kadar gider,
Disc: İçi dolu çember,
Lower-Alpha: Küçük harfler,
Upper-Alpha: Büyük harfler,
Square: Kare,
None: Hiçbir madde imi olmadan öğeleri sıralar.
Örneğimizde listemizin ana öğelerine rakam,alt öğelerine ise küçük harfler verelim,bunun için head tagına style tagı açıyor ve içerisine ul ve li için ayrı ayrı CSS biçimleri yazıyoruz:
Şimdi style tagımıza bir bakalım ne yapmışız;
8. satırda en dış omurganın içindeki liste elemanlarını yani; sebze,meyve.. elemanlarının liste imlerini decimal
belirttik.
9. satırda sırasıyla en dış elemanın alt öğelerindeki omurganın alt öğelerinin liste imlerini lower-alpha olarak
biçimlendirdik.
Sıralama konusu en dışardan en içeriye doğru gideceği için hangi omurga hangi listenin üstünde yer alıyor diye
dikkatli belirtmek gerekiyor.
2-List-Style-Image
Liste elemanlarının solunda list-style-type gibi numerik,alfabetik gibi küçük noktalama işaretleri kullanmak yerine her öğenin imine resim koymamızı sağlar.
Şimdi google'dan küçük bir yıldız resmi bulalım ve listemizde kullanalım.
Resmimiz 20x20 px boyutlarında bu olsun:
Resmi yeni alt listeye uyarlamak için sebze listesine alt öğeler ekliyor ve sebze listesi için bir sınıf oluşturuyoruz:
HTML listemize bakarsak Sebze listesinin alt listesindeki ul ile belirttiğimiz omurgaya sınıfımızı yazdık ve bu sınıfımızdaki list-style-image özniteliğindeki resim sebze listesinin alt listesindeki her elemanın madde imi oluyor:
Tabi listedeki madde imi olarak kullanılacak resmin piksel cinsinden boyutlarını doğru hesaplamak gerekiyor,aksinde
madde imlerindeki resimlerin çok büyük ya da küçük olması liste görünümünü hiçte hoş kılmaz.
3-List-Style-Position
Liste elemanlarının yanındaki madde imlerinin sayfanın iç kısmına olan uzaklığını ifade eder,inside (içeride) ve
outside(dışarıda) olmak üzere iki özelliği yer almaktadır.
Öncelikle sayfamızdaki listenin yapısına bir gözatalım:
Şimdiyse style tagına daha önceden yazmış olduğumuz ul li sırasının içerisine inside niteliğini ekleyelim:
Gördüğümüz gibi tüm liste sayfanın sol kenarından uzaklaşıp sayfanın içerisine (inside) doğru kaydı,eğer outside kullanmış olsaydı liste sol kenara yaklaşacaktı.
CSS List-Style makalemizin böylece sonuna gelmiş bulunuyoruz,bir sonraki makalemizde görüşmek dileğiyle hoşçakalın :)