Html ve CSS kullanarak oluşturulan örnek bir site iskeleti,

Daha önceki css yazılarımda sayfayı div etiketleri ile header, içerik ve footer olarak parçalamıştık. Bu yazımda ise aynı mantığı html5 ile gelen header, nav, section, aside ve footer etiketleri ile kuracağız. css kodlarını da harici bir css dosyasına yazacağız. Ortaya bir blog sitesinin genel iskeleti çıkacak.

html dosyası

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
}
</style>
<link rel="stylesheet" href="style.css" />
</head>
<body>

<div class="container">
<header>
sitenin üst bölümü
</header>
</div>

<nav>
sitenin ana menü bölümü
</nav>

<div class="container">
<section>
sitenin (sol yada sağ) içerik bölümü
</section>

<aside>
sitenin (sol yada sağ) side bar bölümü
</aside>
</div>

<div class="temizle"></div>

<div class="container">
<footer>
sitenin alt bölümü
</footer>
</div>

</body>
</html>

css dosyası

/*
harici css dosyamız
(style.css)
*/

header{
width:1000px;
height:120px;
margin-right:auto;
margin-left:auto;
background-color:#ff5c26;
}

nav{
width:100%;
height: 40px;
background-color:#23008c;
}

.container{
width:1000px;
margin:0 auto;
}

.temizle{
clear:both;
/*
bir sonraki etiketi
yeni satırdan başlatmak için kullanılır. */
}

section{
float:left;
width:700px;
height: 220px;
background-color:#ffbf00;
}

aside{
float:right;
width:290px;
height: 320px;
background-color:#ffbf00;
}

footer{
width:1000px;
height: 120px;
margin-right:auto;
margin-left:auto;
background-color:#4cd2ff;
}

kodların açıklamasını yapacak olursak,

html dosyasının head bölümünde önce küçük bir style etiketi var. Buradaki * işareti sayfadaki tüm etiketleri seçer, margin:0 ile de tarayıcıların etiketlere kendiliğinden verdiği dış boşlukları sıfırlıyoruz. Bunu yapmazsanız sayfanın kenarlarında ve başlıkların etrafında sizin vermediğiniz boşluklar görürsünüz. Hemen altındaki link satırı ile de style.css dosyamızı sayfaya bağlıyoruz.

.container class'ı 1000px genişliğinde bir kutu. margin:0 auto ile sağdan ve soldan boşluğu otomatik yaparak bu kutuyu sayfanın ortasına alıyoruz. header, içerik ve footer bölümlerini bu kutunun içine koyduğumuz için hepsi ortalanmış oluyor.

nav etiketine dikkat ederseniz container içinde değil ve genişliği 100% verildi. Yani menü bölümü diğerleri gibi 1000px'de kalmıyor, sayfanın bir ucundan diğer ucuna kadar uzanıyor. Bir çok sitede gördüğünüz tam genişlikteki menü çubuğu bu şekilde yapılıyor.

section ve aside etiketlerine float vererek ikisini yan yana getirdik. section sola, aside sağa yaslanıyor. Burada önemli bir nokta var. float verilen etiketler sayfanın normal akışından çıkar ve kendisinden sonra gelen etiketler bu kutuların altına değil yanına yada arkasına yerleşmeye çalışır. İşte .temizle class'ı burada devreye giriyor. clear:both ile float etkisini bitiriyoruz ve footer'ın içerik bölümünün altından, yeni bir satırdan başlamasını sağlıyoruz. Bu boş div'i silip sayfayı tarayıcıda açarsanız footer'ın yerinin kaydığını kendiniz de görebilirsiniz.

dosyaları aynı klasöre kaydedip html dosyasını tarayıcıda açtığınızda üstte turuncu header, altında mavi bir menü çubuğu, ortada yan yana iki sarı kutu ve en altta açık mavi footer göreceksiniz. Bu iskeletin içini doldurarak kendi sitenizin tasarımına geçebilirsiniz.

daha geniş anlatım hali için video ders linki Youtube Konu