div class nasıl çalışır ve bunun div id ile farkı nedir

Tarih: 15 Aralık 2008

Sitenizde herhangi bir sayfanın bir kısmı için o kısma has yazı boyutu, arka plan rengi, en, boy, sınır çizgisi vs. belirleyeceksiniz. Aynı sayfanın mesela üstü veya altı için ayrı ayrı ayarlar düşünüyorsunuz.

İşte bütün bu ayarlar css style sayfalarında çoğunlukla çeşitli div ayarlamalarıyla belirlenir. Her bir ayar ayrı isimlerle adlandırılır. Sonra o ayarlar değil o ayarların sadece isimleri web sayfasının HTML sayfasında çok kısa kodlarla kullanılır. Bu kodlar genelde div kodlarıdır.

web sayfası biçimlendirmeleri

Değişik özellikler bir sayfanın geneli için, bir paragrafı için, bir satırı için, hatta tek bir kelimesi için bile belirlenebilir. İç içe ayrı ayrı yapılabilir. Bir ayar style sayfasına kayıt edilir. HTML sayfasında biçimlendirilmek istenen bölümler uygun görülen div kodlarıyla sınırlanır. O sınırların içinde kalan kısım style sayfasındaki ayarların gerektirdiği özelliklere sahip olur. Bir ayar çok yerde kullanılabilir. XHTML açısından kusurlu görülmemesi için; aynı sayfanın değişik yerlerinde aynı ayarı birkaç yerde kullanacaksanız bunu div id ile değil, div class ile yapmalısınız.
Niçin?
Çünkü div id ayarları bir isimle bir sayfada sadece bir defa kullanılabilir. Aynı bir sayfada div id’yi birden çok kullanacaksanız isimleri farklı olmalıdır.
Örnekler:
style sayfasında:
#solmenu{……bu noktalı yerler ayarlar içindir……}
html sayfasında:
<div id="solmenu">……bu noktalı yerler biçimlendirilecek kısım içindir…</div>

Örnekteki “solmenu” div id’si aynı sayfada sadece tek bir yer için kullanılabilir.
Aynı sayfadaki başka bir yeri biçimlendirmek için başka bir div id oluşturmalısınız.
Örnekler:
#sagmenu{………}
#altresim{………}

div class ayarlamaları ve kodları

a) Style sayfasında
div id için style sayfasında isminin başına # (kare) işareti getiriliyordu. div class’ta ise . (nokta) işareti kullanılır.
örnek:
.menuler{……………}

b)HTML sayfalarında
sivri parantez içinde class kelimesi aşağıda gördüğünüz gibi yazılır.
örnek:
<div class="menuler”>…………</div>

Dikkat ederseniz div sınırlamalarında div id’nin de div class’ın da kapanış kodu </div> olarak aynıdır.

Aynı isimli bir div class’ı aynı sayfada istediğiniz sayıda kullanabilirsiniz.

div id ve div class kodlarının birleşik kullanımı

Bu durumda ikisi tek bir kod gibidir; dolayısıyla kapanış kodu sadece bir adet </div> olur.
Örnek:
<div id="solmenu" class="menuler">……………</div>

Buna niçin gerek duyulur?
Daha fazla detaya inelim:
Meselâ sol sütun için sadece genişlik, arkaplan rengi, kenar boşlukları gibi özellikleri ayrı tasarlarsınız, bunu div id ile belirlersiniz. Sol menünün tamamı için geçerli olur. Sadece sol menüyü ilgilendirir. Olur ya; sol menü için farklı genişlik, sağ menü için farklı genişlik hatta farklı arka plan rengi tasarlamak isteyebilirsiniz. Böyle bir durumda sağ menü için başka bir div id oluşturursunuz.
Menülerde yazılar olur, linkler olur. Bu yazıların ve linklerin yazı boyutlarının, renklerinin her menüde aynı şekilde olmasını isteyebilirsiniz. O halde “menuler” isimli bir div class’a ihtiyacınız var.

Şimdi bütün bunların kodlarını görelim:
a) Style sayfasında:
#solmenu{…………}
#sagmenu{…………}
.menuler{……………}

Burada şuna dikkat edin: “menuler” isimli div class ile biçimlendireceğiniz kısımda linkler olacağı için, bu “menuler” ayarlamasını link uyumlu yapmanız gerekiyor. İsterseniz linkler için başka ayarlar yapabilirsiniz. Böyle yaparsanız aşağıdaki örneğe göre linkler ikinci satırdaki a’lı ayarın gerektirdiği gibi görünecek, normal yazılar ise birinci satırın gerektirdiği gibi görünecek. HTML kodu ise değişmez. yine <div class="menuler">…….</div> şeklinde kullanılır; a’lı ayarlar da burada geçerli olur.
Link uyumunu da sağladık. Şimdi son duruma göre style sayfasındaki link uyumlu “menuler” ayarı şöyle:
.menuler{…………}
.menuler a, .menuler a:visited{…………}
Yine hatırlatayım: Bu ikisi de aynı yerin biçimlendirilmesi için kullanılacağı için, HTML sayfasında burada olduğu gibi iki ayrı kod gerekmez.
Sadece <div class="menuler">………</div> şeklinde uygulanır. İçerdeki normal yazılar ve linkler ayrı ayrı kendilerine ait sıfatlara bürünürler.

b) HTML sayfasında:
dikkat: burada iki tarzda yapabilirsiniz.
1. UZUN YOL
sol menü için:
<div id="solmenu"><div class="menuler">
son yazılar..
reklam…
</div></div>

Sağ menü için:
<div id="sagmenu"><div class="menuler">
kategoriler..
bağlantılar…
</div></div>

2- PRATİK YOL

Sol Menü için:
<div id="solmenu" class="menuler">
son yazılar..
reklam…
</div>

Sağ menü için:
<div id="sagmenu" class="menuler">
kategoriler..
bağlantılar…
</div>

1. yol da 2. yol da aynı şeydir. Bu durumda: div id sağ veya sol menünün enini, arka plan rengini, kenarlarını filan belirler. div class ise yazıların, linklerin boyutunu, satırların durumunu belirler.
Eğer bütün ayarların, yazılar linkler de dahil her şeyin her iki yerde birbirlerinden farklı görünmelerini istiyorsanız bütün ayarlamaları sadece div id ile yapabilirsiniz. Ayrıca bir div class’a ihtiyaç yoktur. Veya div id ile değil sadece div class ile yapabilirsiniz, dv id’ye ihtiyaç yoktur. Fark etmez.

Linkler için ayrıca li, ul gibi ayarlamalar da vardır ancak konumuz sadece div olduğu için şimdilik onlara girmedim.

div class ile div id arasında ne fark var?

Etkileri aynıdır. Yalnız XHTML kuralları büyük bir düzen gerektiriyor. Biçimlendireceği bölgeye mahsus bir adı olan bir div id bir sayfada sadece bir defa kullanılmalıdır. Aynı zamanda bölgelerin ayrıcalığını belirtmelidir. Meselâ header kısmının bütününde, esas yazı bölgesinin bütününde, sağ veya sol sütunların bütününde değişik adlarla birer defa kullanılır.
div class ise ayrıcalık gerektirmeyen genel ayarlamalar için kullanılmalıdır; böylece aynı isimli bir div class aynı sayfada değişik kısımlarda çok defa kullanılabilir.
HTML sayfalarındaki kodlarda hiyerarşik bir düzen olmalıdır.

Etiketler:

Kayıp Dosya Eki

Açıklamalar:
1- Okuduğunuz yazı hakkında sorunuzu veya yorumunuzu aşağıya yazabilirsiniz.
2- Yazılarımı RSS ile takip edebilirsiniz.

Yukardaki yazı ile ilgili ek bilgiler ve yorumlar:

  1. [...] olmaması gerekir. Bana göre hata yoktu ama anladığım kadarıyla p taglarının içine ayrıca div ayarları tagı konulmuyormuş gibi şeyler söz konusu. Fakat eklenti kodlarının içinde öyle şeyler yok [...]

  2. Kenan diyor ki:

    Yeni başlayanlar için güzel blgi.
    Teşekkürler.

  3. Destan diyor ki:

    Paylasim için teşekkurler devamını dilerim video görsel anlatım olsaydı daha güzel olurdu sagol

  4. ali diyor ki:

    son derece güzel bır anlatım olmus tesekkur ederim

  5. utku diyor ki:

    eyvallah birader on numara açıklama yapmışsın