DIV + CSS Kullanımı Kolaylıkları?

DIV + CSS Kullanımı Kolaylıkları? Merhaba arkadaşlar, Css derslerine bir vakit mesafe vermiştik ve bu arayı bu yazımda anlatacağım ufak bir ders ile açmak istiyorum. Sizlere anlatacağım bu dersimizde DIV (diversion) kullanımından bahsedeceğiz. Site tasarlarken ilk aklımıza gelen tercih ettiğimiz Editör üstünden tablo sürükleyip çalışmamıza atmaktır. Bunu hangimiz yapmıyoruz ki? Şimdi asıl soru şu gerçekte 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 üstünde 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 problemi çıkaran tarayıcı sorunları olmaktadır (Explorer, Fire Fox, Opera, Netscape e.t.c).   Klasik bir sayfa yapımızda en basit türü ile; Header: Banner piyasası şekilde kullanız çoğunlukla 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 genel anlamda en aşırı tercih ettiğimiz bölümü ana çatıdır. <div id=”body”>Anasayfa ve Temel işlemler</div> ———————————————————— Footer: Sayfamızın çoğunlukla alt yönünü temsil eder. <div id=”footer”>Hakkımızda | S.S.S </div> ———————————————————— Sayfamızda kullanacağımız DIV leri tanımladıktan sonra bundan sonra onları CSS kısmında kontrol etmek çok fazla kolaydır. Bu kullanması id ve style etiketi ile gerçekleştiririz. Örnek:   1 <div id=”menu” 2 style=”position: absolute; left: 2; top: 75”> üç Buraya istikbal olan Menu dizilimimiz; 4 Sayfa sol kısım 2 pixel boşluklu ve yukardan tıpkı biçimde 5 75 pixel boşlukla yerleştirilecek. altı </div> ———————————————————— Div etiketi arasında style değerlerinin aldığı bazı karşılıklar ise: position; absolute, relative, static, fixed İçeriğin, kesin şekilde verdiğimiz doğurultuda mı yerleşeceğini, olmadan sayfa içindeki öbür 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 arzulanan bölgeyi içeren kutucuk. ———————————————————— overflow: scroll, visible, hidden Bu emir yerleştirilen elemanın, arzulanan bölgeye sığmaması mecburiyetinde sığmayan tarafına ne olacağını belirtir. ———————————————————— baseline, sub, super, top, text-top, middele, bottom, text-bottom, lenght  Elemanın dikey şekilde 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 kullanması genel şekilde bu şekildedir. Her ne kadar tablolardan kolay kontrol edilse de ilk aşamada kurgulanması tablolar kadar kolay değildir.


Yapılan Yorumlar
Erdem OFLAZ

Bir mum, diğer mumu tutuşturmakla ışığından bir şey kaybetmez.
 Kategoriler
 Popüler yazılar