1. Adım: Önce sitenin içerik, menü ve benzeri katmanları kapsayan bir ana katman oluşturuyoruz. 

Kısaca kapsayan DIV’in sağ ve solu otomatik uzaklıkta (sayfaya ortalı), rengi gri, genişliği 800 pikseldir. Padding 10 piksel değeri ile içteki katmanlara boşluk verilecektir. Tüm doküman ise 0 piksellik marj ve boşluk ayarına sahip.

2. Adım: Logo ve slogan metninin olacağı en üstteki katmanı ekleyelim.

#banner { padding:10px; background-color:#06C;
text-align:center; position:static; }

3. Adım: Yine bir kapsayıcımız var. icerikKapsar ile menü, içerik ve sağ kısım kolonlara ayrılacaktır. Sonra da menü için bir katman eklenir.

#icerikKapsar{ position:relative; margin-top:10px; }
#menu { padding:10px; background-color:#0C3;
width:150px; position:absolute; }
Menü sol tarafa yapıştırıldı. Genişliği 150 piksel ve yeşil bir renk verilir.  
4. Adım: Sayfa içeriğinin olacağı katman ortada olacak şekilde düzenlenir.
#icerik { padding:10px; background-color:#C93;
 width:400px; position:absolute; left:180px; }
5. Adım: Sağ tarafa reklam, arama ve benzeri işler için alan kazandıralım.
#sagAlan { padding:10px; background-color:#F96;
 width:170px; position:absolute; right:0px; }
Reklam alanı sağa dayalı, 170 piksel genişliktedir.  
6. Adım: Son olarak sitenin hakkında kısmı için en alta bir katman ekleyelim ve tüm kodu birlikte görelim. Hakkında kısmında margin-top ile göz kararı aşağı indirmek zorunda kaldık. Bu problem dışında sitemiz hazırdır.
<!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-9" />
<title>CSS Position</title>
<style type="text/css">
body {
margin:0px;
padding:0px;
font-family:Verdana, Geneva, sans-serif;
}
#kapsayici {
background-color:#999;
margin:10px;
margin-left:auto;
margin-right:auto;
padding:10px;
width:800px;
position:static;
}
#banner {
padding:10px;
background-color:#06C;
text-align:center;
position:static;
}
#icerikKapsar {
position:relative;
margin-top:10px;
}
#menu {
padding:10px;
background-color:#0C3;
width:150px;
position:absolute;
}
#icerik {
padding:10px;
background-color:#C93;
width:400px;
position:absolute;
left:180px;
}
#sagAlan {
padding:10px;
background-color:#F96;
width:170px;
position:absolute;
right:0px;
}
#hakkinda {
padding:1px;
background-color:#F9C;
text-align:center;
position:static;
margin-top: 300px;
}
</style>
</head>
<body>
<div id="kapsayici">
<div id="banner">
<p>Logo ve Slogan Metni</p>
</div>
<div id="icerikKapsar">
<div id="menu">
<p>Ana Sayfa</p>
<p>Resimler</p>
<p>Videolar</p>
</div>
<div id="icerik">
<p>Burada resimler, yazılar, bilgiler verilecek...</p>
<p>i&ccedil;erik i&ccedil;erik i&ccedil;erik i&ccedil;erik i&ccedil;erik i&ccedil;erik i&ccedil;erik i&ccedil;erik &ccedil;erik i&ccedil;erik i&ccedil;erik i&ccedil;erik i&ccedil;erik i&ccedil;erik i&ccedil;erik i&ccedil;erik i&ccedil;erik i&ccedil;erik i&ccedil;erik i&ccedil;erik i&ccedil;erik </p>
</div>
<div id="sagAlan">
<p>Arama</p>
<p>Reklamlar</p>
<p>Son Haberler</p>
<p>İstatistikler</p>
</div>
</div>
<div id="hakkinda">
<p>Webmaster ve diğer iletişim bilgileri buradadır.</p>
</div>
</div>
</body>
</html>
Reklamlar