DIV doğru yöntem. Positioning çoğu zaman boş bırakılır. Boş olunca statik anlamına geliyor.
Şimdi sizin yapmanız gereken şey şuna karar vermek: Sitenin sabit bir genişliği olacak mı yoksa esnek mi olacak? Benim tavsiyem sabit genişlik olsun çünkü widescreen monitörlerde veya 19" monitörlerde %100 genişlik her zaman iyi durmuyor. İçerikleri düzenlemek zor oluyor. Onun yerine 950px genişlikte ve ortaya hizalı bir tasarım tavsiye ederim.
Herkes birkaç link vermiş. Ben de geleneği bozmayayım. Hazır tasarımları
bu sayfada bulabilirsiniz. Bu konuların açıklamasını ise
bu sayfada bulmak mümkün.
Şüphesiz kaynakları okuyup çok şey öğrenilebilir ancak bu konuyu bir de benden dinleyin:
950px sabit genişlikte resimde gösterdiğiniz tasarımı adım adım yapalım:
1. 950px genişlik ve ortaya hizalama konusu için önce bir container div koyuyoruz. Yani bütün herşeyi içine alacak bir container. HTML sayfamızın body kısmına şunu yazıyoruz:
<div id="container"></div>
Şimdi CSS ile container divini biçimlendirelim. HTML sayfamızın head tagları arasına ise şunu yazıyoruz:
<style type="text/css">
<!--
#container {
width: 950px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #FFFF00;
}
-->
</style>
Margin değerlerini bu şekilde yazıp ortaya hizalama yaptım. Container kolay anlaşılsın diye sarı background rengi kullandım. Ayrıca geçici olarak yükseklik değeri verdim gözüksün diye.
2. Siteyi, önce 3 parçaya bölelim: üst, orta ve alt. Sol, sağ ve içerik dediğiniz yerleri orta isimli divin içinde oluşturacağım. Şimdilik sol sağ ve içeriği bırakıp üst, orta ve alt kısımlarını div olarak container'in içine ekliyorum. Gözüksünler diye divlerin içine birer karakter boşluk koydum. yazan şey bir karakter boşluktan başka bir şey değil.
<div id="container">
<div id="ust"> </div>
<div id="orta"> </div>
<div id="alt"> </div>
</div>
CSS'e gelirsek: Orta her zaman üst'ün altında olmalı. Ayrıca alt her zaman ortanın altında olmalı. Bundan emin olmak için clear değeri kullancağım. Ayrıca yine kolay anlaşılsın diye renk veriyorum.
<style type="text/css">
<!--
#ust {
background-color: #0099FF;
}
#orta {
background-color: #00FF00;
clear: both;
}
#alt {
background-color: #FF0000;
clear: both;
}
-->
</style>
Şimdi diyeceksiniz ki ust, orta ve alt divleri için genişlik falan vermedik. Doğrudur. zaten gerek yok çünkü genişlik verilmeyince %100 oluyor. Bunlar 950px'lik container'in içinde olduğu için genişlik onun genişliği kadar olacak.
Şimdi orta isimli divin içine sol, içerik ve sag divlerini koyalım:
<div id="container">
<div id="ust"> </div>
<div id="orta">
<div id="sol"> </div>
<div id="icerik"> </div>
<div id="sag"> </div>
</div>
<div id="alt"> </div>
</div>
Şimdi sol, içerik ve sag için biçimlendirme yapacağım. Sol ve sağ için bir genişlik belirlemem lazım. Varsayalım onların her biri 160px genişlikte olsun. Bu durumda icerik =950-160-160=630px eder. Ancak solda ve sağda 5 px boşluk bırakacağım için 620 yapıyorum.
Sol'u sola hizalayacağım. Sag'ı sağa hizalayacağım. İçeriği de sola hizalayacağım. Hiçbirine positioning yazmıyorum.
<style type="text/css">
<!--
#sol {
background-color: #990066;
float: left;
width: 160px;
height: 500px;
margin-top: 5px;
margin-bottom: 5px;
}
#sag {
background-color: #9999FF;
float: right;
width: 160px;
height: 500px;
margin-top: 5px;
margin-bottom: 5px;
}
#icerik {
background-color: #CC6633;
float: left;
width: 620px;
height: 500px;
margin: 5px;
}
-->
</style>
Container için geçici olarak verdiğim yüksekliği iptal ettim. Ayrıca üst, alt, sol, sağ, icerik divleri için yükseklik verdim. Bir de içerik, sol, sağ divlerinün üstünde altında boşluk bıraktım. Firefox'ta düzgün çalışsın diye orta divine boşluğu eklemek yerine ortanın içindeki elemanlara ayrı ayrı ekledim.
Sonuçta bütün HTML sayfamızın içi şu oldu:
Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>css layout</title>
<style type="text/css">
<!--
#container {
width: 950px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#ust {
background-color: #0099FF;
height: 120px;
}
#orta {
clear: both;
}
#alt {
background-color: #FF0000;
clear: both;
height: 80px;
}
#sol {
background-color: #990066;
float: left;
width: 160px;
height: 500px;
margin-top: 5px;
margin-bottom: 5px;
}
#sag {
background-color: #9999FF;
float: right;
width: 160px;
height: 500px;
margin-top: 5px;
margin-bottom: 5px;
}
#icerik {
background-color: #CC6633;
float: left;
width: 620px;
height: 500px;
margin: 5px;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="ust"> </div>
<div id="orta">
<div id="sol"> </div>
<div id="icerik"> </div>
<div id="sag"> </div>
</div>
<div id="alt"> </div>
</div>
</body>
</html>