Web Site Tasarımında DIV Kullanımı
Bugün artık tüm web tasarımlarında site temel çatısı olarak DIV tagı kullanılmaktadır. Bunun nedeni DIV tagının parçalı yüklenebilmesi -ki bu sayede yüklenme hızı artar- ve ölçeklendirmesinin (özellikle cep telefonları ekranları için) kolay olmasıdır.
Aşağıdaki gibi bir DIV yapısına sahip iskeleti oluşturalım.
HTML Kodu:
<body>
<div class="tual">
</div>
</body>
<div class="tual">
</div>
</body>
CSS Kodu:
.tual { width: 960px; margin:0 auto; }
HTML Kodu:
<div class="tual">
<div class="sol_menu"></div>
<div class="sag_icerik"></div>
<div style="clear: both"></div>
</div>
<div class="sol_menu"></div>
<div class="sag_icerik"></div>
<div style="clear: both"></div>
</div>
CSS Kodu:
.tual { width: 960px; margin:0 auto; background-color: burlywood; }
.sol_menu { width: 300px; height: 600px; float:left; background-color: aqua; }
.sag_icerik { width: 660px; height: 600px; float:left; background-color: gold; }
.sol_menu { width: 300px; height: 600px; float:left; background-color: aqua; }
.sag_icerik { width: 660px; height: 600px; float:left; background-color: gold; }
HTML Kodları:
<body>
<div class="tual">
<div class="sol_menu"></div>
<div class="sag_icerik">
<div class="sag_icerik_ust"></div>
<div class="sag_icerik_orta"></div>
<div class="sag_icerik_alt"></div>
</div>
<div style="clear: both"></div>
</div>
</body>
<div class="tual">
<div class="sol_menu"></div>
<div class="sag_icerik">
<div class="sag_icerik_ust"></div>
<div class="sag_icerik_orta"></div>
<div class="sag_icerik_alt"></div>
</div>
<div style="clear: both"></div>
</div>
</body>
CSS Kodları:
.tual { width: 960px; margin:0 auto; background-color: burlywood; padding: 30px; }
.sol_menu { width: 300px; height: 660px; float:left; background-color: aqua; }
.sag_icerik { width: 600px; height: 600px; float:left; background-color: gold; padding: 30px;}
.sag_icerik_ust { height: 200px; background-color: chartreuse; }
.sag_icerik_orta { height: 100px; background-color: sandybrown; }
.sag_icerik_alt { height: 300px; background-color: blueviolet; }
.sol_menu { width: 300px; height: 660px; float:left; background-color: aqua; }
.sag_icerik { width: 600px; height: 600px; float:left; background-color: gold; padding: 30px;}
.sag_icerik_ust { height: 200px; background-color: chartreuse; }
.sag_icerik_orta { height: 100px; background-color: sandybrown; }
.sag_icerik_alt { height: 300px; background-color: blueviolet; }
HTML Kodu:
<body>
<div class="tual">
<div class="sol_menu"></div>
<div class="sag_icerik">
<div class="sag_icerik_ust"></div>
<div class="sag_icerik_orta"></div>
<div class="sag_icerik_alt">
<div class="sag_icerik_alt_sol"></div>
<div class="sag_icerik_alt_orta"></div>
<div class="sag_icerik_alt_sag"></div>
<div style="clear: both"></div>
</div>
</div>
<div style="clear: both"></div>
</div>
</body>
<div class="tual">
<div class="sol_menu"></div>
<div class="sag_icerik">
<div class="sag_icerik_ust"></div>
<div class="sag_icerik_orta"></div>
<div class="sag_icerik_alt">
<div class="sag_icerik_alt_sol"></div>
<div class="sag_icerik_alt_orta"></div>
<div class="sag_icerik_alt_sag"></div>
<div style="clear: both"></div>
</div>
</div>
<div style="clear: both"></div>
</div>
</body>
CSS Kodu:
.tual { width: 960px; margin:0 auto; background-color: burlywood; padding: 30px; }
.sol_menu { width: 300px; height: 660px; float:left; background-color: aqua; }
.sag_icerik { width: 600px; height: 600px; float:left; background-color: gold; padding: 30px;}
.sag_icerik_ust { height: 200px; width:600px; background-color: chartreuse; }
.sag_icerik_orta { height: 100px; width:600px; background-color: deeppink; }
.sag_icerik_alt { height: 300px; width:560px; background-color: blueviolet; padding: 20px; }
.sag_icerik_alt_sol { height: 300px; width: 33.3%; float: left; background-color: darkorange; }
.sag_icerik_alt_orta { height: 300px; width: 33.3%; float: left; background-color: tomato; }
.sag_icerik_alt_sag { height: 300px; width: 33.3%; float: left; background-color: cyan; }
.sol_menu { width: 300px; height: 660px; float:left; background-color: aqua; }
.sag_icerik { width: 600px; height: 600px; float:left; background-color: gold; padding: 30px;}
.sag_icerik_ust { height: 200px; width:600px; background-color: chartreuse; }
.sag_icerik_orta { height: 100px; width:600px; background-color: deeppink; }
.sag_icerik_alt { height: 300px; width:560px; background-color: blueviolet; padding: 20px; }
.sag_icerik_alt_sol { height: 300px; width: 33.3%; float: left; background-color: darkorange; }
.sag_icerik_alt_orta { height: 300px; width: 33.3%; float: left; background-color: tomato; }
.sag_icerik_alt_sag { height: 300px; width: 33.3%; float: left; background-color: cyan; }
Yorumunuzu Ekleyin
Web Site Tasarımında DIV Kullanımı Yorumları +2 Yorum
