Sitenizi ziyaret edenlerin gördükleri “bir sayfa”da aynı isimli div id iki defa kullanılamaz. XHTML bunu kabul etmiyor (aşırı titizdir kendileri).
div id’nin bilinmesi gereken en önemli özelliği
Web sayfalarını, örneğin bu yazıyı okuduğunuz sayfayı düşünün. Bir web sitesine girdiğinizde bir sayfada bulunuyorsunuz. Bunun bir de göremediğiniz HTML sayfası vardır; sayfanın iç organları gibidir. Ekranda gördüğünüz Aynı bir sayfanın HTML kısmında aynı isimli div id sadece bir defa kullanılabilir. Ama öte yandan aynı isimli div id ayrı ayrı sayfalarda çok defa kullanılabilir. Ana sayfa (index.php) tek bir sayfadır. kategorilerin veya etiketlerin görüntülendiği (archive.php) tek bir sayfadır. Özel sayfalar (page.php) tek bir sayfadır. Amaaaa.. Aman buna dikkat edin: Üst kısım (header.php), alt kısım (footer.php) ve varsa yan sütünlar, bu esas sayfalarla bütün halinde olur, tek sayfa halini alırlar, buna da dikkat etmelisiniz. Bunlara kompleks tek sayfa diyelim. “Aynı isimli” bir div id bu kompleks tek sayfaların her birinde sadece birer defa kullanılabilir; bu şekilde o div id her ayrı kopmleks sayfada (birer defa) kullanılabilir.
Örneğin ana başlık için kullanılan div id’nin bir adı vardır. Aynı bir sayfada başka paragraflar veya sütünlar için başka div id’ler başka adlarla kullanılabilir. Yalnızca her ad sadece bir defa kullanılacak.
div id ile style sayfasında ayarlamalar yapmak
Sayfanızda görüntülenecek bir paragraf öğelerinin veya sadece bir başlığın rengi, büyüklüğü, vb. gibi ayarları style sayfasında bulunur. HTML sayfasını yazının iç organlarına benzetirsek, style sayfasını yazının beynine benzetebiliriz.
Örnek:
Yazı biraz büyük. Rengi kırmızı. Bu bir ana başlık yazısı. Peki nasıl yapılıyor da böyle oluyor? Dikkatle okumaya devam ederseniz yazımın devamında gereken bütün bilgileri verdim ki bilmeyenler de yapabilsin.
div id’nin style sayfasındaki ayar kodu
Bunun için div id’ye bir isim verilir. İsmin başına # işareti konur. Verilecek ismin ne olduğu önemli değildir; sadece nerede kullanıldığı unutulmasın diye görevini çağrıştıran harfler kullanılabilir. İsterseniz teyzenizin veya öğretmeninizin adını verin: nermin de olabilir ahmet de olabilir. Yalnız büyük harf kullanmayın ve ç, ğ, ş, ö gibi Türkçede bulunup ingilizcede bulunmayan harfleri kullanmayın. Diyelim ki E. Ali Blog sitenin ana başlığıdır. O halde, style sayfasındaki ayarı çabuk bulalım diye şöyle bir isim verebiliriz: anab
#anab{font-size: 20px; color: #ff0000;}
Süslü parantezlerin başlangıç ve bitiş yerlerine dikkat edin. Bu temel bir ayar kodlamasıdır. İçinden bir nesne çıksa her şey alt üst olur. # işaretinden son süslü paranteze kadar her şey bir bütünün parçalarıdır, tek bir şeyin bütün sıfatlarını içinde saklar. Ne kadar ilginç değil mi? Evet, renkten büyüklükten başka daha pekçok sıfat koyabilirsiniz. Konumuz sadece div id olduğu için kolay öğrenesiniz diye sadece renk ve büyüklük kodları ile yetiniyoruz şimdilik.
HTML sayfasındaki sınırlama kodları.
Kırmızı renkte ve 20px büyüklüğünde olmasını istediğimiz E. Ali Blog başlığının HTML sayfasındaki çıplak görüntüsünün başına ve sonuna bu kodları koyacağız. Bütün div’lerin sınır kapatma kodu </div> şeklindedir. Burası kolay. Baş taraftakine gelelim. Bu div id’ye isim vermiştik: anab ismini vermiştik.
O halde: Başlığın evveline <div id="anab"> kodu gelecek. Şöyle:
<div id="anab">E. Ali Blog</div>
Evet, div id kodları ile başlığı sınırladık. Böylece, herkesin göreceği esas sayfada bu başlık şöyle görünecektir:
Çoğu kişinin karşılaştığı büyük bir sorun:
“Ama başlık linkli ve de bu ayarlar linklere uymuyor!!!
Cevap vereyim: Linkler özel şeyler. Yeni bir div id oluşturmadan, HTML sayfasına hiç girmeden sadece style sayfasından mevcut div id kodumuzu link uyumlu yapmamız gerekiyor. Linkleri a harfi temsil eder. Bunsuz olmaz.
Mevcut kod şuydu:
#anab{font-size: 20px; color: #ff0000;}
Şimdi, linkli başlık için ne istiyorsunuz? Mevcut ayarlar aynen korunsun mu? Evet aynen korunsun diyorsunuz. Tamam. Altına şunu ekleyelim:
#anab a, #anab a:visited{font-size: 20px; color: #ff0000;}
Yani bir satır kod vardı, şimdi iki satır oldu:
#anab{font-size: 20px; color: #ff0000;}
#anab a, #anab a:visited{font-size: 20px; color: #ff0000;}
Dikkat: Bu div id ile sınırladığınız kısımdaki yazıların bir kısmı linkli, bir kısmı linksiz ise, mesela linklilerin rengini, büyüklüğünü değiştirebilirsiniz, daha iyi olur. Linkli olmayanlar üst satır koddakinin etkisinde kalacaktır.
Özetleyecek olursak: Her div id’nin bir adı vardır ve o ada sahip bir div id bir sayfada sadece bir yerde kullanılır.
Div kullanımı daha çıkmamaışken, insanlar tablolar ile uğreaşırdı. Tablonun kaç kolon kaç sütun olacağı, her sütunun boyutu, tablonun konumu vs. birçok şeyi ayarlamak gerekliydi. Üstelik bu kadar haşin kurallar konduğundan sayfayı cep telefonu ile görüntülemeye kalktığınızda keyfiniz biraz bozulurdu. Div ile ise işler daha rahat, yine birçok XTML kuralı var ama bildiğim kadarıyla daha esnek, cep telefonlarında da görüntülemesi problem olmuyor, ekranın boyutuna göre kolayca uyarlanabiliyor.
Teşekkürler , anlaşılır bir yazı olmuş.