Css-Div-Kullanım-Kolaylığı_emresupcinMerhaba arkadaşlar,

Css derslerine bir süre ara 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 kullandığımız Editör üzerinden tablo sürükleyip çalışmamı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:

 

     1  <div id="menu"
     2   style="position: absolute; left: 2; top: 75">
     3   Buraya gelecek olan Menu dizilimimiz; 
     4   Sayfa sol kısım 2 pixel boşluklu ve yukardan aynı şekilde 
     5   75 pixel boşlukla yerleştirilecek.
     6  </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 edilse de ilk aşamada kurgulanması tablolar kadar kolay değildir.

Yazar
Yazar
Bilgisayar Programcısı, Web Tasarımcı, Üniversite Öğrencisi...
Twitter Facebook Google Linkedin Flickr YouTube

Önceki Yazı:Sosyal Ağ Hesaplarınızın Parolalarını Değiştirin!

Sonraki Yazı:C# Kullanarak Guid Kullanımı Nasıl Olur?

YORUMLAR
SİZ DE CEVAP YAZABİLİRSİNİZ
Bu yazı hakkında görüşünüzü belirtin.

ES Web Tasarım Web Tasarım Blog Teması Emre Supçin Bu tema ES Web Tasarım tarafından düzenlenmiştir. Hiçbir şekilde kopyalanamaz.