CSS ile Basit Sablon Yapmak
CSS ile site yapmaya karar verdiniz ve hic bilginiz olmadigini dusunelim. Tablolarda artik biraz daha cag disi kaldigini dusunursek, kararinizin ne kadar dogru oldugunu gorebiliriz.

Ben iki sutunlu sablon hazirlama teknigini basit yoldan gosterecegim.

Sablonu hazirlarken bir onceki yazim'da belirttigim gibi ortalayarak yapicam. Ben sablon genisligini 610 pixel verdim. Fakat kullanim alanimiz 600 pixel olucak. 200 pixel sol menu, 400 pixel sag taraf yani icerik alanimiz icin. 10 pixelde iki sutun arasindaki bosluk olucak. Sol menumuzu olusturup float:left ile, sag taraf yani icerik alanimizi da olusturup float:right dedigimizde otomatik olarak arada 10 pixel bos aralik alani olusucak.

Bunun icin sayfada kullanacaginiz kod gorunumu:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>CSS Ortalama</title>
<style>
#Cerceve{margin: 0 auto;width:610px;}
#Sol{background: #ccc;width:200px;float:left;}
#Sag{background: #ccc;width:400px;float:right;}
</style>
</head>
<body>
<div id="Cerceve">
<div id="Sol"><b>Menu</b></div>
<div id="Sag"><b>Icerik</b><br/>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
</div>
</body>
</html>


ornegi gormek icin tiklayiniz.

December 13, 2008
Ayberk Atasay
CSS
3 yorum