Merhaba arkadaşlar bu dersimizde DIV (diversion) kullanımından bahsedeceğiz. Site tasarlarken ilk aklımıza gelen kullandığımız Editör üzerinden tablo sürükleyip çalışmamımıza atmaktır. Bunu hangimiz yapmıyoruz ki? Şimdi asıl soru şu aslında DIV kullansak nasıl olur?

Projenin büyüklüğünü düşünün, binlerce tablo olduğunu daha yazarken yoruluyoruz. Ama DIV ve CSS kullandığımızda bunları kombine ettiğimizde tek sayfa üzerinde kolaylıkla projeye şekil verebiliriz. Şimdi bu DIV Taglarına ve kullanım yerlerine bakalım. Şunuda söylemeden geçemeyeceğim yalnız halen CSS & DIV sıkıntısı çıkaran tarayıcı sorunları vardır (Explorer, Fire Fox, Opera, Netscape e.t.c).

Klasik bir sayfa yapımızda en basit şekli ile;

Header: Banner alanı olarak kullanız genelde sitenin üst alanıdır.
<h1> İLK WEB SAYFAMIZ </h1>

Navigation: Genellikle listeleme yapmak için kullanacağımız durumlardır.

<ul id="navigation">Siyah</ul>

Left Sidebar: Sayfamızın sol yanı ile ilgili kısım.

<div id="sidebar">Sayfa Sol Alan</div>

Right Sidebar: Sayfamızın sağ yanı ile ilgili kısım.

<div id="subtext">Sayfa Sağ Alan</div>

Body: Sayfanın genellikle en çok kullandığımız kısmı ana çatıdır.

<div id="body">Anasayfa ve Temel işlemler</div>

Footer: Sayfamızın genellikle alt kısmını temsil eder.

<div id="footer">Hakkımızda | S.S.S </div>

Sayfamızda kullanacağımız DIV leri tanımladıktan sonra artık onları CSS kısmında kontrol etmek çok kolaydır. Bu kullanımı id ve style etiketi ile gerçekleştiririz. Örnek:

<div id="menu"
style="position: absolute; left: 2; top: 75">
Buraya gelecek olan Menu dizilimimiz; 
Sayfa sol kısım 2 pixel boşluklu ve yukardan aynı şekilde 
75 pixel boşlukla yerleştirilecek.
</div>

Div etiketi içerisinde style değerlerinin aldığı bazı karşılıklar ise:

position; absolute, relative, static, fixed
İçeriğin, kesin olarak verdiğimiz doğurultuda mı yerleşeceğini, yoksa sayfa içindeki diğer içeriklere göre mi yerleşeceğini belirtir.

left: ...px, ...%
Yerleştirilen içeriğin sol köşesinin nerden başlayacağını belirtir.

top: ...px, ...%
Yerleştirilen içeriğin hangi yükseklikten başlayacağını belirtir.

width: ...px, ...%
Yerleştirilen içeriğin genişliğini belirtir.

height: ...px, ...%
Yerleştirilen elemanın yüksekliğini belirtir.

clip shape
Yerleştirilecek elemanın, görünmesi istenilen bölgeyi içeren kutucuk.

overflow: scroll, visible, hidden
Bu komut yerleştirilen elemanın, istenilen bölgeye sığmaması durumunda sığmayan kısmına ne olacağını belirtir.

baseline, sub, super, top, text-top, middele, bottom, text-bottom, lenght
Elemanın dikey olarak nasıl yerleştirileceğini belirtir.

z-index: 1, 2, ..,99
Yerleştirilen içeriğin destedeki sırası.

visibility: visible, hidden
Yerleştirilen içeriğin görünüp, görünmeyeceğini belirtir.

İşte DIV kullanımı genel olarak bu şekildedir. Her ne kadar tablolardan kolay kontrol edilsede ilk aşamada kurgulanması tablolar kadar kolay
değildir. Ama günümüz sitelerinde oldukça sık kullanılmaktadır. Daha detatlı bilgi için CSS ilişkili konuları araştırabilirsiniz.