HTML Image Map b2s1 Ek4 Ek 6 Ek5 b8s1 b1s1  Ek7 Nitelikler b5s1.htm Ek2 b3s1 Ek3 b7s1 Ek7 Elementler Ek1 b4s1 b6s1  Ek7 Catalogue index previous next

Katlı Stil Sayfaları (Sürüm 3)

Kutu Modeli

Sayfa 6 / 8


 

Kutu Yükseklik ve Genişliği

 

'width' ve 'height' Özellikleri(IE 6.02 SP2 bu özelliği iyi bir şekilde desteklemektedir)

 

Bu özellik bir elementin görüntüsü için oluşturulan kutunun genişlik ve yüksekliğini belirtir.

 

İsim: 'width' , 'height'

Değer: <uzunluk> | <yüzde> | number | auto

Başlangıç Değeri: auto

Uygulanabilecek Elementler: tüm elementler ('display-model' değeri 'inline-inside' olan satıriçi elementler dışında)

Kalıtım: hayır

Yüzde: içeren bloğun genişliği*

Medya:görsel (visual)

Hesaplanan Değer: <uzunluk> veya 'auto'

*) Yukarıdan aşağı doğru yazılan alfabelerde kutunun boyu temel alınır.

 

Bu özellik içerik alanının genişliğini ve yüksekliğini belirtir. Değerler negatif olamaz ve belge çözümleyiciler, minimum bir alt limitle sınırlama yapabilirler.

Hesaplanan değer normal koşullarda bir <uzunluk> değeridir, fakat yatay gelişim için, eğer 'height' ve 'box-height' değerleri 'auto' olarak belirtilmiş ise, hesaplanan değer de 'auto' olacaktır.

Örnek bir çalışma, width and height.htm dosyasında görülebilir. Bu örnekte alınan sonuçlar çok ilgi çekicidir, çünkü eni ve boyu boyutlandırılmış bir panel oluşturulması sağlanmıştır. Yer tutma ve diğer görsel etkilerin kullanımı ile, gösterişli Web sayfaları tasarımı için iyi bir araç sağlanmış olmaktadır.

Yüzde değeri içeren bloğun genişliği temel alınarak hesaplanır, fakat eğer içeren bloğun genişliği 'auto' olarak tanımlanmışsa, tanımlanan değer de 'auto' olarak kabul edilir.

Yer değiştirmiş bir elementin en genel örneği, bir resim çapasıdır. Burada, çapa elementi, bir resim ile yer değiştirmiştir. Eğer yer değiştirmiş bir elementin içerildiği bir kutunun boyutları 'auto' değerinden başka bir değere ayarlanmışsa ve resmin boyutları, kutu boyutları ile uyuşmazsa resim deforme olabilir. Bu durumu düzeltmek için ya resmin ya da kutunun boyutları yeniden düzenlenmelidir.

 

Sayı Olarak Verilen Yükseklik ve Genişlik Değerleri

 

Sayı değeri CSS3 spesifkasyonu ile yeni getirilmiştir. Bu değer, kutunun boyutunu yer değiştirmiş bir elementin içsel boyutunun katları olarak tanımlamaktadır. Bir elementin içsel boyutu, hiçbir dış etki olmadan sahip olduğu orijinal boyut olarak tanımlanmıştır. Kutu yer değiştirmiş bir element içermeden bu değer verilmişse veya yer değiştirmiş elementin içsel boyutu yoksa, değerin yorumlanması belge çözümleyiciye bağlı olacaktır.

 

'auto' Olarak Verilen Yükseklik ve Genişlik Değerleri

 

Yer değiştirmiş elementler için iki durum söz konusudur:

  1. Hem genişlik hem de yükseklik 'auto' değerindedir. Bu durumda kutunun boyutları, yer değiştirmiş elementin içsel boyutlarının aynı olacaktır.

  2. Sadece içlerinden birisi 'auto' değerindedir. Bu durumda kutunun boyutları, yer değiştirmiş elementin içsel boyutlarının oranı ile aynı oranda olacak şekilde boyutlandırılacaktır.

Eğer, elementin içsel genişlik veya yükseklik değeri 0 ise, element yeniden boyutlandırılmayacak ve 'auto' değerinin hesaplanmış değeri içsel değer olacaktır. Eğer elementin içsel değeri veya boyut oranı yoksa, hesaplanan değer, belge çözümleyiciye bağlı olacaktır.

Yer değiştirmemiş elementler için yüksekliğin 'auto' olarak belirtilmesi, daima elementin hesaplanmış genişliğine karşı gelen içsel yükseklikle sonuçlanır. Genişlik için belirtilen 'auto' değerinin hesaplanmış değeri, kutunun tipine bağlıdır:

  1. Eğer element kök elementten farklı bir akış kökü ise, genişliği, içsel genişliktir.

  2. Eğer element sayfalı medya üzerinde bir kök element ise, değer 'size' özelliğinin hesaplanmış genişlik değeri olacaktır.

  3. Eğer element bir blok-düzey element ise ve kendini içeren blok da yatay akışta ise, o zaman genişlik aşağıdaki denklem (1) ile hesaplanır.

  4. Aksi halde, eğer element bir blok-düzey element ise ve kendini içeren blok da değişik yönlenimde ise, o zaman genişlik içsel genişlik ile aynı olur.

  5. Aksi halde, eğer element bir yerleştirilmiş (pozisyonlu) element veya bir tablo elementi veya bir ruby ise ilgili bölümlerin belirttiği yöntemlere göre hesaplanır.

CSS2.1 de yüzen (floating) elementler belge çözümleyiciye bağlı olmayan küçük bir genişlik verilmiş olmasına karşın, CSS3 de durum 1 de görüldüğü gibi içsel genişlik verilmiştir. Buna genel olarak büzülmeyle katlanma (shrink wrapped) adı verilir. Bu özellik, belge çözümleyicinin pencere boyutları değişirken yüzen kutuların içeriğinin de yeniden düzenlenmesini sağlar.

 

Blok-düzey Elementlerde Marj, Yükseklik ve Genişlik Kısıtlamaları

 

Yataya akıştaki bir blok-düzey kutu içinde yine yatay akıştaki bir blok-düzey kutunun genişlik ve marj değerleri aşağıdaki kısıtları sağlamalıdır:

içeren bloğun genişliği = sol marj + sol kenar + sol gezinti alanı + genişlik + sağ gezinti alanı + sağ kenar + sağ marj

Aşağıdaki durumlar gerçekleşebilir:

  1. Genişlik, sol ve sağ marjlardan hiçbirisi 'auto' değeri taşımaz ve değerler kısıtı sağlar.

  2. Genişlik, sol ve sağ marjlardan hiçbirisi 'auto' değeri taşımaz ve değerler kısıtı sağlamaz. Bu durumda iki olasılık söz konusudur:

    1. Elementin yönü soldan sağa ise, sağ marjın belirtilen değeri gözardı edilir ve sağ marja kısıtı sağlayacak bir değer atanır.

    2. Elementin yönü sağdan sola ise (Arapça ve İbrani dilleri gibi), bu durumda sağ marj değeri gözardı edilir ve sağ marja kısıtı sağlayacak bir değer atanır.

  3. Eğer genişlik, sol ve sağ marjlardan sadece birisi 'auto' olarak belirtilmişse, değeri denklemden hesaplanır.

  4. Eğer genişlik ve marjlardan birisi veya ikisi birden 'auto' olarak belirtilmişse, 'auto' olarak belirtililenler 0 olarak alınır ve denklem genişlik için çözülür.

  5. Eğer hem sağ, hem de sol marj 'auto' olarak belirtilmişse, denklem sağ marj=sol marj şeklinde bir ek kısıt konularak çözülür.

Eğer denklem çözüldükten sonra elde edilen genişlik değeri, öngörülen an az ve en çok genişlik ('min-width' ve 'max-width') değerlerinden büyükse, hesaplanan genişlik değeri, en az ve en yüksek genişliklten daha yüksek bir değere ayarlanır ve denklem bu yeni değerle yeniden çözülür (henüz 'min-width' ve 'max-width' değerleri IE 6 SP 2 tarafından desteklenmemektedir).

5 inci olasılık, kutunun ortalanması için de kullanılabilir. Örnek:

 

 

Yukarıdaki kodlar margin centered.htm sayfasına uygulanmış ve gerçekten en alt bölümün ortalanmış olarak görüntülendiği belirlenmiştir. Burada dikkat edilmesi gereken konu, 'text-align' özelliğinin sadece kutunun içerdiği metni ortalarken, marjların 'auto' olarak belirtilmesinin, tüm kutunun içerildiği kutunun ortasına yerleştirilmesi olanağını verdiğidir. Sonuç aşağıdaki gibi olacaktır:

resim2

 

 

Thursday, October 6, 2005 21:16

 

validate in W3C !