Css Ile Web Sayfasi Oluþturma

[gokhanaygun]

CSS’in en büyük avantajlarýndan biri ve en önemlisi baþka bir koda(XHTML hariç) ihtiyaç duymaksýzýn sayfa iskeleti ve stilini oluþtumamýza olanak saðlamasýdýr. CSS 1996′dan beri kullanýla gelen bir standart olsa da popülaretesini Zen Garden’ýn sayfa planlamasý için kullanmaya baþlamasýndan sonra arttýrmýþtýr. Eskiden sayfayapýsýný tablolarla oluþtururduk. Bu kullanýmýn bir çok sorunlarý vardý. Bunlarý aþmak için CSS ile sayfa planlama metodlarý kullanýlmaya baþlanmýþtýr. Biz burada bu konudan bahsedeceðiz.

CSS ile sayfa planlamasý yaparken bazý problemlerle karþýlaþacaðýz, ancak buradan þu anlaþýlmamalý CSS’de sorun var. Aksine sorun CSS’den deðilde standartlarý kendine göre yorumlayan web tarayýcýlarýndan kaynaklanmaktadýr. Zamanla bu web tarayýcýlarý kendine çeki düzen vermeye baþladý(Örn: ÝE7 de CSS sorunlarýnýn bir çoðunu halletti) Amaç körü körüne tablosuz web sayfasý tasarlamak deðil, sayfalarýmýzý standartlara ve web tarayýcýlarýna en uygun þekilde kodlamaktýr. Hiç tablo kullanmayayým diye tablo kullanýlmasý gerek yerlerde de tablo kullanmamak abesle iþtigaldir.

Aslýnda þimdiye kadar ki makaleler de bu konunun temellerini attýk.CSS ile konumlandýrma(positioning) , Float ve Clear özellikler ile konumlandýrma vd. makaleler bu iþin temellerine deðindik. Burada daha elle tutulur örneklerle bu metodu anlatmaya çalýþacaðýz.

CSS sayfa planlama metodlarý üç temel konu üzerine inþa edilmiþtir. Konumlandýrma, floating ve margin farklýlýklarý. Bu üç temel konu anlaþýldýktan sonra CSS ile sayfa planlamayý anlamamýz çok kolaydýr. Biz burada floating metodu ile sayfa oluþturmayý göreceðiz. Bunun dýþýnda konumlandýrma öðeleleri kullanarak sayfa oluþturma ve eksi margin deðeri ile sayfa oluþturma metodlarýda vardýr. Ancak biz burada bunlara deðinmeyeceðiz.

Sabit Geniþlikteki Sayfalarda Ýki Kolonlu Yapý


Ýlk olarak XHTML kodlarýný yazalým.

<div id="sayfa">
<div id="ustAlan">
…
</div>
<div id="icerik">
…
</div>
<div id="anaMenu">
…
</div>
<div id="altAlan">
…
</div>
</div>
Önemli bir nokta varki oda icerik alanýnýn anaMenu‘den önce gelmesi gerekmektedir. Eriþebilirlilik(yani tüm araçlarda sayfamýzýn en iyi þekilde görünmesi) için icerik alanýnýn anaMenu‘den önce gelmesi gerekir. Çünkü pda ve cep telefonu gibi araçlarda katmanlarýn sýralamasýna göre ekranda görüneceðinden, ilk olarak içerik alanýnýn görünmesi tercih sebebidir. þžimdi css kodumuzu yazarsak:

#sayfa
{
width:768px;
}

#ustAlan
{
width: 768px;
}

#icerik
{
float: right;
width: 568px;
}

#anaMenu
{
float: left;
width: 200px;
}

#altAlan
{
width: 768px;
clear: both;
}
Bu kodu yazdýktan sonra sayfamýz baþta gördüðümüz þekildeki duruma gelmiþ bulunmaktadýr. Burada yazdýðýmýz kodda "icerik" alanýnýn saða, "anaMenu" alanýnýn sola yerleþmesi için geniþlik deðeri ve float deðerleri tanýnmlanmýþtýr. Ayrýca altAlan‘ýn bu iki bölümün altýnda kalmasý için clear:both tanýmlamasý yapýlmýþtýr.

CSS ile sayfalarýmýzý ve elementlerimizi ortalamak bölümündeki metodu uygulayarak sayfamýzý ortalayabilriz.

body{
text-align:center;
}

#sayfa{
width: 768px;
margin:0 auto;
text-align:left;
}
Sabit Geniþlikteki Sayfalarda en çok rastlanan problemler sabit geniþlik uygulanan katmanlara pading, margin ve border deðeri atandýðýnda IE5 de sorunlu görünmesidir bu problemi aþmak için iki yöntem vardýr. Birinci yöntem CSS ile Kutu modeli, sorunlarý ve çözümleri bölümünde anlatýlmýþtýr. ikinci yöntem ise kapsayýcý katmanlara(icerik, anaMenu vb.) padding ve margin vermek yerine kapsayýcý katman içindeki elementlere bu atamalarý yapmaktýr.

Basit yapýlý sayfalarda ikinci yöntemi, karmaþýk yapýlý sayfalarda ise birinci yöntemi denemenizi öneririm.

Likit Sayfalarda Ýki Kolonlu Yapý
Likit Sayfalarda Sabit Geniþlikteki Sayfalar’dan farklý olarak geniþlik deðerleri piksel(px) olarak deðil yüzde(%) olarak verilmesidir. Bu tür sayfalarda sayfa geniþliði web tarayýcýsýnýn boyutu ile baðlantýlýdýr. Web tarayýcýsýnýn geniþliði arttýrýldýðýnda sayfa geniþliði artacak, web tarayýcýsýnýn geniþliði azaltýldýðýnda sayfa geniþli azalacaktýr. Kodu yazarsak:

body{
text-align:center;
}

#sayfa{
width:83%;
margin:0 auto;
text-align:left;
}

#ustAlan
{
width: 100%;
}

#anaMenu
{
float: left;
width: 30%;
}

#icerik
{
float: right;
width: 70%;
}

#altAlan
{
width: 100%;
clear: both;
}
Kolonlu Yapý


Bir çok sitede üç kolonlu yapý kullanýlmaktadýr. kolonlu yapý ile iki kolonlu yapýnýn kodlamasýnda fazla bir fark yoktur. Tek yapamýz gereken yapýyý iki kolonlu bölümlere ayýrmaktýr, bunun için saðdaki iki kolonu bir kapsayýcý katman(KapsayiciAlan) içine alarak yapýyý iki kolonlu hale getirdik(anaMenu ve KapsayiciAlan)

body{
text-align:center;
}

#sayfa{
width:768px;
margin:0 auto;
text-align:left;
}

#ustAlan
{
width:768px;
}

#anaMenu
{
float: left;
width: 200px;
}

#KapsayiciAlan
{
float: right;
width: 568px;
}

#icerik
{
float: left;
width: 368px;
}

#BannerAlani{
float: right;
width: 200px;
}

#altAlan
{
width:768px;
clear: both;
}
Ve ayrýca xhtml koda da aþaðýdaki deðiþiklikleri yaptýðýmýzda üç kolonlu yapýyý elde ederiz.

<div id="sayfa">
<div id="ustAlan">
…
</div>
<div id="KapsayiciAlan">
<div id="icerik">
…
</div>
<div id="BannerAlani">
</div>
</div>
<div id="anaMenu">
…
</div>
<div id="altAlan">
…
</div>
</div>
Ayný þekilde Likit sayfalarda üç kolonlu yapý oluþturabiliriz. Yapmamýz gerek tek þey deðerleri (%) olarak vermektir.

4,5 vd. kolonlu yapýyý da ayný þekilde yapabiliriz. Bence 3 kolonlu yapýdan sonraki kadamelerde(4,5 vd.) tüm katmanlara float:left verilerek oluþturmak daha mantýklý ve kolay olur.