Html ve CSS İle Tema Yapımı

Kategori : Demo, Css Yazar : alexander Tarih : 2 Eki 2010, Ct 00:20 9 Yorum

İ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

Paylaş

Benzer Yazılar

Etiketler

theme, tema, photoshop theme, html, header, footer, float, css tema, contain, clear:both, css

Yorumlar >> (9 Yorum)

  1. batuhan 21 Şub 2011, Pt 18:57 tarihinde yazılmış.
    Teşekkür ederim bu çok işime yaradı. Yalnız bi' şey soracam. Mesela alt kısımla orta kısım arasına 3 tane daha 200x200 box yapmaya çalışsak nasıl olurdu ? Ben alt kısmı kopyalayıp alt2 alt3 şeklinde yerleştirmeye çalıştım fakat hepsi alt alta oldu :S
    • alexander 21 Şub 2011, Pt 20:42 tarihinde yazılmış.
      Head tagları arasına ekleyeceğin css kodları
      #orta2{
 margin-bottom:10px;
}

#batuhan{
 padding: 10px;
 margin-right:10px;
 float:left;
 width:200px;
 height:100px;
 background: #E6E5E3;
}
      Aşağıdaki html kodlarını orta ve alt id'li divlerin arasına yerleştir.
      <div id="orta2">
 <div id="batuhan"></div>
 <div id="batuhan"></div>
 <div id="batuhan"></div>
 <div class="temizle"></div>
</div>
    • batuhan 21 Şub 2011, Pt 19:02 tarihinde yazılmış.
      Hocam mükkemmel oldu, elinize sağlık. Bende temanızı geliştirerek bişeyler yapmaya çalışıyorum. Bi katkı olarak .Şimdi orta kısma içerik eklediğimiz zaman o bölümün otomatik olarak genişlemesi için orta kısma şöyle bi kod buldum "em", ve aşağıdaki gibi oldu. #orta .icerik{ background: #D2D0D1; float: left; width: 650px; padding: 10px; margin: 0 10px 0 0; position: relative; height: 500pxem; }Bunu iyice geliştrip açılır menüler ekledikten sonra burada sizlere sunacağım...
    • alexander 21 Şub 2011, Pt 19:04 tarihinde yazılmış.
      rica ederim. İyi çalışmalar.
  2. batuhan 21 Şub 2011, Pt 19:05 tarihinde yazılmış.

    Hocam dediğim gibi temayı biraz geliştirdim, kalıbıda buradan paylaşıyorum.
    index’i php olarak verdim çünkü ben kendi sistemimde içerik kısmına veri tabanımdam içerik alıyorum.Duruma göre içerik daha fazla olup aşağıya doğru uzayabiliyor.
    Tema tüm tarayıcılarda uyumlu ve center pozisyonunda, akordiyon menüler var, lightbox efekti ile resim göstermek için gerekli jsler ve yollarıda bu indirme linkinde mevcut. Ayrıca DW’den istediğiniz gibi düzenleyebilirsiniz.Benim gibi bu konularla ilgilenen arkadaşlar için paylaşıyorum.
    tema ön izleme resmi için
    http://img88.imageshack.us/img88/1205/phpcss.jpg
    tüm dosyalarını indirmek için (sadece 114 kb)
    http://hotfile.com/dl/89698349/211676f/mycms2.rar.html

    • alexander 21 Şub 2011, Pt 19:06 tarihinde yazılmış.
      Eline sağlık Batuhan güzel ve faydalı bir çalışma olmuş. Ayrıca çalışmanı paylaştığın için tebrik ederim.
  3. Selman 21 Şub 2011, Pt 19:07 tarihinde yazılmış.
    Merhaba, batuhan için verdiğiniz örnekte birden fazla id kullanımı var. Onları class yapmak daha doğru olur galiba.
    • alexander 21 Şub 2011, Pt 20:25 tarihinde yazılmış.
      evet haklısınız dikkat etmemişim . Batuhan için verdiğim kodlarda id'ler class olmalı dediğiniz gibi.#orta2{ margin-bottom:10px; }.batuhan{ padding: 10px; margin-right:10px; float:left; width:200px; height:100px; background: #E6E5E3; }Aşağıdaki html kodlarını orta ve alt id’li divlerin arasına yerleştir.
      <div id="orta2">
<div class="batuhan"></div>
<div class="batuhan"></div>
<div class="batuhan"></div>
<div class="temizle"></div>
</div>
  4. a.bilal akbulut 9 Oca 2012, Pt 02:21 tarihinde yazılmış.

    hocam teşekkürler sadece şu sizin anlatımınız en ii css ye başlangıç konuşunda teşekkürler

    Yorum Yap

    Yeni yorum yapıldığında bana bildir.

    Yorum Yazarken

    Basit Html etiketlerini kullanabilirsiniz.

    Kodlarınızı <pre></pre> etiketleri arasına yazınız.