Ayberk Atasay

ASP, CSS, Internet konuları üzerine paylaşımlar

CSS ile Basit Şablon Yapmak

CSS ile site yapmaya karar verdiniz ve hiç bilginiz olmadığını düşünelim. Tablolarda artık biraz daha çağ dışı kaldığını düşünürsek, kararınızın ne kadar doğru olduğunu görebiliriz.

Ben iki sütunlu şablon hazırlama tekniğini basit yoldan göstereceğim.

Şablonu hazırlarken bir önceki yazım'da belirttiğim gibi ortalayarak yapıcam. Ben şablon genişliğini 610 pixel verdim. Fakat kullanım alanımız 600 pixel olucak. 200 pixel sol menü, 400 pixel sağ taraf yani içerik alanımız için. 10 pixelde iki sütun arasındaki boşluk olucak. Sol menümüzü oluşturup float:left ile, sağ taraf yani içerik alanımızı da oluşturup float:right dediğimizde otomatik olarak arada 10 pixel boş aralık alanı oluşucak.

Bunun için sayfada kullanacağınız kod görünümü:

<!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>Menü</b></div>

<div id="Sag"><b>İçerik</b><br/>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s 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>

Örneği görmek için tıklayınız.

CSSAyberk Atasay13 Aralık 2008, CumartesiEkle Bunu

Önceki Kayıt

Sonraki Kayıt

Yorumlar

İbrahim ÇAKICI
13 Aralık 2008, Cumartesi

Bu ne hız ayberk abi. :) Çok güzel konuya değinmişsin abi. ;)