CSS'de Basit Bir Site İskeleti Oluşturmak

Bu derste sizlere PHP, Wordpress temaları gibi birçok alanda kullanılan CSS-HTML birleşimi ile meydana gelen site iskeletini oluşturmayı anlatacağım.

Merhabalar, 

Bu derste sizlere PHP, Wordpress temaları gibi birçok alanda kullanılan CSS-HTML birleşimi ile meydana gelen site iskeletini oluşturmayı anlatacağım. 

Verdiğim kodlardaki açıklamaları inceleyerek ve ekteki dosyayı indirerek konuyu rahatlıkla anlayabilirsiniz. Kolay gelsin.

HTML div tagı ile oluşturulmuş iskelet

<html>
	<head>
		<link href="style.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
			
		<!-- İlk başta üst kısmı oluşturduk -->
		<div id="header">ÜstBilgi</div>

		<!-- Sağ ve sol kısmıda yerleştirdik, CSS'den yönlerini belirticez -->
		<div id="ortala">
			<div id="left">
			    <div id="slider">Resim Geçişi</div>
			    <div class="icerik">İçerik1</div>
			    <div class="icerik">İçerik2</div>
			    <div class="icerik">İçerik3</div>
			    <div class="duzelt"></div>
			    <div class="konu">Konu1</div>
			    <div class="konu">Konu2</div>
			</div>

			<!--  -->
			<div id="right">
			    <div class="widgets">Widgets1</div>
			    <div class="widgets">Widgets2</div>
			    <div class="widgets">Widgets3</div>
			</div>
		</div>

		<!-- Son olarak alt kısmıda ekledik, burada sorun oluşmaması için CSS'de kod ekliycez -->
		<div class="duzelt"></div>
		<div id="footer">AltBilgi</div>
		
	</body>
</html>

CSS ile iskeletin düzenlenmesi

@charset "utf-8";

/* Float ile verdiğimiz değerlerin alanları boş kaldığından diğer divler o bölgeye yerleşiyor. Bunu engellemek için clear:both komutunu kullanıyoruz. */
.duzelt {
  clear:both;
}

/* Site içeriğini ortalıyor ve genel boyutu belirtiyoruz. */    
#ortala {
  margin: 0 auto;
  width:800px;
}

/* Üst kısmın sabitlenmesi ve diğer ayarlayını yapıyoruz. */
#header {
  margin-top:-10px;
  margin-left:-10px;
  margin-right: -10px;
  background-color: #000;
  height: 50px;
  color: #FFF;
}

/* Sol içeriği sola dayıyoruz. */
#left {
  margin-top: 10px;
  width: 615px;
  float: left;
}

/* Sağ içeriğide sağa dayıyoruz. */
#right {
  margin-top:10px;
  float: right;
  width: 185px;
}
#slider {
  background-color: #000;
  height: 100px;
  color: #FFF;
  width: 610px;
}
.icerik {
  float: left;
  margin-top: 10px;
  background: #000;
  margin-right: 5px;
  height: 100px;
  width: 200px;
  color: #FFF;
}
.konu {
  margin-top: 10px;
  width: 610px;
  height: 150px;
  background-color: #000;
  color: #FFF;
}
.widgets {
  margin-bottom: 10px;
  background: #000;
  height: 150px;
  width: 175px;
  color: #FFF;
}

/* Son olarak alt kısmı sabitliyor ve boyutlandırıyoruz. */
#footer {
  margin-top: 100px;
  margin-bottom: -10px;
  margin-left: -10px;
  margin-right: -10px;
  background-color: #000;
  height: 50px;
  color: #FFF;
}

Ve son olarak sonuç:

Örneği Buraya Tıklayarak İndirebilirsiniz.


Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git