CSS İle Web Sayfası tasarımı – 2

CSS Dersleri

Elastik Web Sayfaları Oluşturma

Likid Sayfalar yüksek çözünürlüğe sahip geniş ekranlarda satır yüksekliklerinden dolayı pek hoş görünmeyebilir. Bunun aksine, daraltılmış pencerelerde çok kısa ve parçalanmış görüneceklerdir ve metin boyutu arttırıldığında üst üste binmiş satırlarda görüneceklerdir. Bununla ilgili olarak elastik sayfa oluşturma metodu bize yardım edecektir.

Elastik Sayfalar web tarayıcılarına göre font boyutunun ve elementlerin genişliğinin göreceli olarak ayarlandığı sayfalardır. Genişlikleri em, yüzde(%) ve ex gibi göreceli birimler kullanarak tanımladığımızda font boyutu sayfa genişliğine göre değişecektir. Aynı şekilde satır yüksekliği(line-height) değerinde de göreceli birimler kullanarak daha okunaklı sayfalar elde edebilriz.

Elastik sayfa planlama metodununda bazı problemleri vardır, örneğin sabit genişlikteki sayflardaki gibi elastik metodda da boş alanlar yeterince kullanılamaz. Çünkü font boyutu arttırılırsa sayfa genişliği tarayıcının genişliğini geçecektir ve yatay kaydırma çubuğu çıkacaktır. Bu durumdan kurtulmak için body elementine max-width 100% ataması yapabilriz. Ancak bu özelliği IE6 desteklememektedir.

Elastik web sayfası tasarlamak çok kolaydır. Sabit Genişlikte sayfa tasarımı yapılan bir sayfanın birimleri piksel yerine em olarak değiştirilirse sayfa elastik yapıya kavuşacaktır. 1em yaklaşık olarak 10piksele denk gelir.

em?in asıl tanımı küçük “m” harfi genişliğidir. Normalde em font boyutu birimi olarak kullanılır ancak CSS?de width,line-height vd. özelliklerin birimi olarak da kullanılabilir. Em üst elemente veya diğer elementleri baz alarak göreceli bir değer alır. Bu özellik bize elastik web sayfası hazırlama imkanı verir.

Çoğu web tarayıcısınnda normal font boyutu 16px?dir. 10 pikselin yüzdesel değeri yaklaşık olarak 62.5% civarındadır. Bu belirtilen değerlere göre kodumuzu yazarsak:

01 body{
02 text-align:center;
03 font-size:62.5%;
04 font-family:Arial, Helvetica, sans-serif;
05 }
06 #sayfa{
07 width:72em;
08 margin:0 auto;
09 text-align:left;
10 }
11
12 #ustAlan
13 {
14 width:72em;
15 }
16
17 #anaMenu
18 {
19 float: left;
20 width: 18em;
21 }
22
23 #KapsayiciAlan
24 {
25 float: right;
26 width: 52em;
27 }
28
29 #icerik
30 {
31 float: left;
32 width: 32em;
33 }
34
35 #BannerAlani{
36 float: right;
37 width: 20em;
38 }
39
40 #altAlan
41 {
42 width:72em;
43 clear: both;
44 }

Burada body elementi font boyutunu 1em eşit olan font-size:62.5%; atamasını yaptık. Daha sonra sayfadaki birimleri bu değeri baz alarak hesapladık ve em birimi vererek sayfamızı elastik bir hala getirdik.

Sayfamızın Sabit Genişlikteki sayfalardan farkını anlamak için web tarayıcısının font boyutu değerlerini veya yakınlaştırma(zoom) aracını (Opera, FF-eklentisi var ve IE 7 de var)kullanarak görebilriz. IE ve FF için Görünüm(View) ? Metin Boyutu(Text Size) Opera için View ? Zoom seçeneklerini kullanarak farkı görebilriz.

Kaynak : Fatih Hayrioğlu, CSS dersleri

Bana Ders Anlat © 2008-2022