kodlarımız çok basit css ve div kodlarından oluşuyor şablonu oturttuktan sonra geri kalan çalışmalar size kalmış istediğiniz gibi ekleme ve çıkartma yapabilirsiniz gelelim kodlarımıza: kodlarımıza ilk başta olmazsa olmazı css kodlarımı head tagından sonra açıyoruz ve başlıyoruz css kodlarımızı yazmaya isteyen arkadaşlar dreamweaver kullanarak daha kolay bir şekilde yapabilir ama ben öğrenmek istiyorum diyorsanız tek tek elle yazmanızda fayda vardır. fazla bir kod kullanmadık oluşturduğumuz şablonda sadece sizi tablo yapısından kurtarıp sitenize daha fazla işlevsellik katıyoruz. Kodları sizin anlayacağınız şekilde anlatmaya çalışacağım.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Başlıksız Belge</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
burada sayfamızın boşluklarını alıyoruz çünkü yanlardan boşluklar bırakabilir bu da düzgün bir görüntü sağlamaz
}
.anasablon{
width: 980px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
bu şablonumuzu bir arada tutan ve sayfamızı ortalayan css kodları geçen de anlatmıştım nasıl işlediğini
}
.ustkisim{
float: left;
height: 150px;
width: 980px;
margin-bottom: 10px;
background-color: #CCC;
asıl konumuza gelelim burada neler yaptık alttakiler de bu css kodları ile aynı işlevleri görüyorlar. FLOAD:LEFT bu kod DİV'imizi sola yaslıyor ve diğer alttaki divlerle karışmamasını sağlıyor kullanmazsak ne olur divler iç içe geçmiş bir şekilde görünür. HEİGHT ve WİDTH burada div'in boyutlarını ayarlıyoruz. MARGİN-BOTTOM:10PX; burada alttan 10 piksel boşluk bırakmışım alttaki divler ile arasında 10 piksellik boşluk oluşacak diğer komutları ise MARGIN-TOP: 10PX; üstten 10 piksel boşluk verir 20 yaparsanız 20 piksel boşluk verir. MARGİN-LEFT: 10PX; soldan 10 piksel boşluk verir MARGİN-RİGHT: 10PX; sağdan 10 piksel boşluk verir siz kodları benim gibi büyük yazmayın ben görmeniz için yazdım. bu ayarlamaları istediğiniz gibi sayfanıza uygulayabilirsiniz. BACKGROUND-COLOR: #CCC; burada ise div'e arkaplan vermişim gri renkli gözükecektir. hepsi bu kadar alttaki kodlar da burasıyla aynı kodları içeriyor sadece büyüklük ve genişlikleri farklı
}
.anakisim{
float: left;
height: 590px;
width: 690px;
margin-right: 5px;
background-color: #CCC;
}
.sagmenu{
float: left;
height: 590px;
width: 280px;
margin-left: 5px;
background-color: #CCC;
}
.altkisim{
float: left;
height: 150px;
width: 980px;
margin-top: 10px;
background-color: #CCC;
}
</style>
</head>
html:
<body><div class="anasablon">
<div class="ustkisim">burası üst kısım</div>
<div class="anakisim">burası ana şablonumuz</div>
<div class="sagmenu">burası sağ taraftaki menümüz</div>
<div class="altkisim">burası alt kısım</div>
</div>
</body>
bu kodları kullandıktan sonra siteniz yukarıdaki resim gibi görünecektir. kolay gelsin şimdiden.