Şimdi bizim bir kalıbımız olacak tabiki ilk önce kalıbımızı oluşturalım.
1-Kenar için :
<div class="body4">
<div class="body5">
Kodlarınız ( İçeriginiz yani Boardınız, Kenar olmasını isteginiz kodlarınız )
</div></div>
1-Kenar için Css yapalım
.body4 { background: white url('images/body4.gif' repeat-y top left ; padding-left:20px }
.body5 { background: white url('images/body4.gif' repeat-y top right ; padding-right:20px }Acıklama : şimdi White olan yer 4-5 tablosu arasında kalan yerin rengidir.
repeat-y top left ise tekrarlanmasını ve üstde olmasını saglıyor padding-right:20px ise kenarlıgın kalınlıgını gösteriyor Bunu diger CSS Terimlerinden yararlanarak geliştirebilirsiniz.
2. logo veya Bir Tablonun arkası
<div class="banner2">
<div class="banner1">
<div class="banner3">
</div>
</div>
</div>
Veya Bir betinin arka plano yapacaksanız Örnegin SmfGrup Logo kısımı bu şekil yapılmış.
<div class="banner2">
<div class="banner1">
<div class="banner3">
Koları buraya koyacaksınız serach olabilir login kısımı olabilir.
</div>
</div>
</div>2. Logo İçin Css Hazırlayalım
.banner1 { background: url('images/banner1.gif' no-repeat top left ; height:150px }
.banner2 { background: url('images/banner.gif' repeat-x top left ; height:150px }
.banner3 { background: url('images/banner.gif' no-repeat top right ; height:150px }
Biraz acıklayalım. CSS terimlerinden bakarak bunları geliştirebilirsiniz. Konu Meteryallerdedir.
no-repeat top left Solda tekrarlanmadan durmasını saglıyor height aşşagı dogru zemin genişligidir.
repeat-x top left ; üstde tekrarlanarak ve soldan baslayarak devam ediyor
no-repeat top right : tekrarlanmadan üst kısım sagda duruyor.
3. Arka Plan Css
Bunun İndex.template karşıtı vardır zaten birşey yapmamıza gerek yok sadece Style.css arka plan kodlarını bulmaktır.
Bir iki örnek vereyim.
background: url(images/resim.gif);Sayfaya yayılır Komple
background:#renk url(images/resim.gif) no-repeat fixed center 60%;Tekrarlanmadan ortada durur ve resmin 60% oranla yayılmasını saglar
background:#000000 url(images/resim.gif) repeat-x;Üste yan yana tekrarlanır alt altda degil
Örnekler vererek Cogaltabiliriz
