Dreamweaver programını kullanarak daha önce Table etiketini kullanmadan site yapmamıştım. DIV etiketi ile yapım da pek de zor değilmiş.
Yine de tamamen problemsiz diyemem. Yüksekliğin dinamik olmaması ve tarayıcı uyumu problemi biraz rahatsız ediyor.
 
Aşağıdaki kodları yeni bir html sayfa içine yapıştırınız:
 
<!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=utf-8" />
<title>İlk DIV’Li Çalışmam!</title>
<style type="text/css">
<!–
#kapsar {
 position:relative;
 width:830px;
 z-index:1;
 color: #666;
 background-color: #99FFFF;
 margin: auto;
 height: 680px;
}
#menu {
 position:absolute;
 width:210px;
 height:300px;
 z-index:auto;
 background-color: #9999FF;
 color: #FF0;
 margin-right: auto;
 margin-left: auto;
 top: 70px;
 left: 5px;
}
#icerik {
 position:absolute;
 left:220px;
 top:70px;
 width:600px;
 height:600px;
 z-index:auto;
 background-color: #CCCC66;
 color: #000;
 margin: auto;
 padding: 2px;
 float: none;
 clear: both;
}
body {
 background-color: #060;
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#menu a:link,#menu a:visited {
 color: navy;
 display: block;
 height: 30px;
 text-align: left;
 border: thin outset #666;
 list-style-type: none;
 padding-top: 8px;
 padding-right: 0px;
 padding-bottom: 0px;
 padding-left: 5px;
 text-decoration: none;
 margin: 0px;
}
#menu a:hover {
 color: blue;
 height: 29px;
 text-align: left;
 border: thin inset #666;
 list-style-type: none;
 background-color: #C96;
 text-decoration: none;
 padding-top: 8px;
 padding-right: 0px;
 padding-bottom: 0px;
 padding-left: 5px;

ul {
 list-style-type: none;
 position: static;
 margin: 0px;
 padding: 0px;
}
hr {
 border: thin solid #ccc;
 width: 80%;
}
–>
</style>
</head>
<body>
<div id="kapsar">
  <h1><em>kapsayıcı</em> div (menu ve içeriği kapsar)</h1><div id="menu">
  <p><em>menu</em></p>
  <ul>
    <li><a href="divli.html">konu 1</a></li>
    <li><a href="divli.html">konu 2</a></li>
    <li><a href="divli.html">konu 3</a></li>
  </ul>
<p>&nbsp;</p>
</div>
  <div id="icerik">
  <h1><em>içerik</em> kısmı</h1>
  <p>Bu örnek içinde TABLE etiketi <u>kullanılmamıştır</u>.</p>
  <p>DIV ve UL etiketleri stiller ile düzenlenmiş, grafik zenginleştirilmesi yapılmamıştır.</p>
  <hr noshade="noshade" />
  <p>DIV’in iç içe olması kopuk görüntüyü iptal ediyor, bağımsız hareket etmiyorlar.</p>
  <p>&quot;Margin&quot; ayarları ile hep ortalı hale geliyor. Bunu &quot;auto&quot; ile hallediyoruz.</p>
  <p>&quot;Position&quot; değerlerini de içtekiler için &quot;absolute&quot;, kapsayıcı DIV için &quot;relative&quot; yapıyoruz.</p>
  <hr noshade="noshade" />
  <p>UL sayesinde A etiketi hizalı, kutu (düğme) benzeri çalışıyor. Liste simgesi &quot;list-style-type: none&quot; ile iptal edilmiştir. </p>
  <p>A etiketinin &quot;hover&quot; alt özelliği animasyon etkisi sağlıyor.</p>
  <p><strong>Problemler:</strong> </p>
  <p>Height sabit olduğundan içerik sınırlı kalıyor. <br />
    Bazı tarayıcılarda tam IE7 gibi gösterilemiyor.</p>
  <p><em>Bu sayfanın yapımı yaklaşık 2 saat olarak CS4 ile yapılmıştır.</em></p>
  </div>
</div>
</body>
</html>
Reklamlar