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

Kod:

<style type="text/css">
#kapsayici{
       background-color:#999;
       margin:10px;
       margin-left:auto;
       margin-right:auto;
       padding:10px;
       width:800px;
}
</style>
<div id="kapsayici">
</div> 

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.

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

#banner {
       padding:10px;
       background-color:#06C;
       text-align:center;
}
<!-- Stilin etiketini kapatmayı unutmayın -->
<div id="kapsayici">
  <div id="banner">
    <p>Logo ve Slogan Metni</p></div>
</div>

Banner kapsayıcının içini tamamen kaplıyor, rengi mavi ve metin ortalı olarak ayarlanmıştır.

3. Adım: Sol tarafa menü ve benzeri kısımlar için bir katman eklenir. Ayrıca banner ve menü arasına temizleyici bir katman eklenir.

.temizleyici {
       clear:both;
}
#menu {
       padding:10px;
       background-color:#0C3;
       width:150px;
       margin-top:10px;
       float:left;
}
<!-- Stil ve body etiketine dikkat ediniz -->
<div id="kapsayici">
  <div id="banner">
    <p>Logo ve Slogan Metni</p>
  </div>
  <div></div>
  <div id="menu">
    <p>Ana Sayfa</p>
    <p>Resimler</p>
    <p>Videolar</p>
  </div>
</div> 

Menü sol tarafa yapıştırıldı ve üstten 10 piksel aşağı indirilir. 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;
       margin-top:10px;
       margin-left:10px;
       float:left;
}
<div id="kapsayici">
  <div id="banner">
    <p>Logo ve Slogan Metni</p>
  </div>
  <div></div>
  <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>

 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;
       margin-top:10px;
       float:right;
}
<div id="kapsayici">
  <div id="banner">
    <p>Logo ve Slogan Metni</p>
  </div>
  <div></div>
  <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 ierik l;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>
</div>

 Reklam alanı sağa dayalı, 170 piksel genişliktedir. Bu katmanın altına da temizleyicimizi ekledik.

6. Adım: Son olarak sitenin hakkında kısmı için en alta bir katman ekleyelim ve tüm kodu birlikte görelim. 

Banner ve hakkında kısmı birbirine benziyor, sadece padding 1 pikseldir.

<!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>DIV ve CSS</title>
<style type="text/css">
#kapsayici {
       background-color:#999;
       margin:10px;
       margin-left:auto;
       margin-right:auto;
       padding:10px;
       width:800px;
}
#banner {
       padding:10px;
       background-color:#06C;
       text-align:center;
}
.temizleyici {
       clear:both;
}
#menu {
       padding:10px;
       background-color:#0C3;
       width:150px;
       margin-top:10px;
       float:left;
}
#icerik {
       padding:10px;
       background-color:#C93;
       width:400px;
       margin-top:10px;
       margin-left:10px;
       float:left;
}
#sagAlan {
       padding:10px;
       background-color:#F96;
       width:170px;
       margin-top:10px;
       float:right;
}
#hakkinda {
       padding:1px;
       background-color:#F9C;
       margin-top:10px;
       text-align:center;
}
</style>
</head>
<body>
<div id="kapsayici">
  <div id="banner">
    <p>Logo ve Slogan Metni</p>
  </div>
  <div></div>
  <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 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 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 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 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 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 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>
  <div id="hakkinda">
    <p>Webmaster ve diğer iletişim bilgileri buradadır.</p>
  </div>
</div>
</body>
</html>
 
Reklamlar