İndir Demo

Bu yazımızın sonunda Html ve Css kullanarak tema hazırlayabilecek bilgileri edinmiz olacağız.

Tema yapımına başlamadan önce temamızda neler olacağını belirleyelim. Temamız 3 üst kısım, orta kısım olmak üzere 3 ana kısımdan oluşacak. Üst kısımda bir logomuz ve bir menümüz olacak. Orta kısıma gelince bu kısmıda kendi içinde icerik ve yan menü olarak iki bölüme ayıracağız.

Temamızın genel şablonunu photoshop ile çizmeye çalıştım pek beceremedim ama en azından size genel bir fikir verecektir :) . 

Css ve Html ile tema

Şimdi kodlama kısmına geçelim isterseniz. Yeni bir html sayfası oluşturalım ve aşağıdaki kodları yapıştıralım .

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
    <title>Html ve Css Tema Yapımı</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

</head>
<body>

	<div id="kapsayici">

		<div id="ust">
			<div class="logo">Logo</div>
			<div class="menu">Menü</div>
		</div>

		<div id="orta">
			<div class="icerik">İçerik</div>
			<div class="yan-menu">Yan menü</div>
			<div class="temizle"></div>
		</div>

		<div id="alt">Alt ısım</div>

	</div>

</body>
</html>

Html kodları içerisinde bize yabancı gelen 2 div bulunmaktadır. Bu divler "kapsayici" ve "temizle" class isimlerini sahip olanlardır. "kapsayici" classına sahip div temamızı oluşturan üst, orta, alt kısımları kapsayacak olan divdir. bu divimize sabit bir genişlik verip sayfada ortalayacağız ve bütün divlerimizi bu div içerisine eklyeceğiz.

Kapsayıcı (Container) nasıl oluşturulduğunu bu adresten okuyabilirsiniz ben detayına girmeyeceğim.

Kapsayıcı divimizin css özellikleri :

#kapsayici{
    margin: 0 auto;
    width: 940px;
}

Sırada üst kısım var. Üst kısımın css kodlarında 150px yükseklik, alt kısmından 10px boşluk(margin), 10px iç kısmından boşluk (bu özelliğimizi padding kullanarak vereceğiz. Padding değeri verilirken bu değerin genişlik üzerine eklendiğini unutmayalım. Diyelimki bizim divimizin genişliği 500px ve paddig değeri 10px olsun. Divimizin genişliği 520px olacaktır çünkü padding değerinden gelen sağ ve sol taraftan bırakılan iç boşluklar genişliğe eklenecektir.). Ayrıca üst kısım içerisinde "logo" ve "menu" classlarına sahip iki divimiz bulunmaktadır.

Üst kısımın Css kodu : 

#ust{
	background: #E6E5E3;
	margin: 0 0 10px 0;
	padding: 10px 10px 10px 10px;
	height: 150px;
}
#ust .logo {
	padding: 10px;
	font-size: 24px;
	font-weight: bold;
	height: 70px;
}
#ust .menu{
	background: #D2D0D1;
	padding: 10px;
	height: 40px;
}

Orta kısımda ise "icerik" ve "yan-menu" class isimlerine sahip iki div bulunmaktadır. "icerik" classa sahip divi sola dayalı(float:left;), 650px genişlik, 500px yükseklik, "yan-menu" classa sahip divi ise sağa dayalı bir şekilde(float:right;) 220px genişlik, 500px yükseklik değerlerini veriyoruz.

Orta kısım içerisinde gördüğünüz "temizle" adlı classa sahip divi diğer divlerde kullandığımız float özelliğinden dolayı oluşan yükseklik problemini çözmek için ekledik. Bu işi yapan Css kodumuz "clear: both;" dir. "temizle" adlı divimizi kaldırdığımızda oluşan yükseklik sorunun ekran görüntüsüne bakmak için tıklayın.

Orta kısımın Css kodu :

#orta{
	background: #E6E5E3;
	padding: 10px;
	margin: 0 0 10px 0;
}
#orta .icerik{
	background: #D2D0D1;
	float: left;
	width: 650px;
	padding: 10px;
	margin: 0 10px 0 0;
	position: relative;
	height: 500px;
}
#orta .yan-menu{
	background: #D2D0D1;
	float: right;
	width: 220px;
	padding: 10px;
	position: relative;
	height: 500px;
}
.temizle{clear: both;}

Son olarak da alt kısımın Css kodlarını veriyorum :

#alt{
	background: #E6E5E3;
	padding: 10px;
	height: 150px;
}

Kaynak kodları sayfanın başında ve sonunda verilen download linkine tıklayarak indirebilirsiniz. İyi çalışmalar.

İndir Demo