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 7 / 8


 

Yüzen Kutular

 

Yüzen Bir Kutunun Anlamı

 

Yüzen bir kutu, içerildiği kutunun içeriğinin, etrafından aktığı bir kutu olarak tanımlanır. Türkçe gibi Latin alfabesi kullanılan, yatay gelişen sayfalarda, yüzey bir kutu, içeren bloğun ya soluna ya da sağına yaslanabilir. Yüzen bir kutu oluşturmak için, 'float' özelliği kullanılır.

 

'float' Özelliği(IE 6.02 SP2 bu özelliği desteklemektedir)

 

Bu özellik, bir elementin görüntüsü için oluşturulan kutunun içerildiği kutunun kenarlarına yaslanma şeklini belirler.

İsim : 'float'

Değer: left | right | top | bottom | inside | outside | start | end | none

Başlangıç Değeri: none

Uygulanabilecek Elementler:tüm elementler (yerleştirilmiş olanlar "positioned elements", oluşturulmuş içerik "generated content" ve kök element " root element " dışında)

Kalıtım: hayır

Yüzde: belirtilmemiştir

Medya: görsel (visual)

Hesaplanan Değer: belirtilen değer

 

Değerlerin açıklamaları: (değerlerin anlamları sadece yatay akış yönü için açıklanmıştır)

left , top

Element sola yaslanmış ve yüzen bir kutu ile görüntülenir. İçeren kutunun içeriği, sağ taraftan tepeden aşağı doğru akar (bu özellik 'clear' niteliği de değiştirilebilir). Okunabilirliğin artması için bu değerin kullanılması sağlık verilmektedir.

right , bottom

Element sağa yaslanmış ve yüzen bir kutu ile görüntülenir. İçeren kutunun içeriği, sol taraftan tepeden aşağı doğru akar (bu özellik 'clear' niteliği de değiştirilebilir).

inside

Bu özellik sadece sayfalı (paged) medya için geçerlidir. Sayfalı medya için kutunun bulunduğu yere bağlı olarak, aynı 'left' veya 'right' gibi etki yapar. Sayfasız medaya için etkisi 'left' gibidir.

outside

Bu özellik sadece sayfalı (paged) medya için geçerlidir. Sayfalı medya için kutunun bulunduğu yere bağlı olarak, aynı 'right' veya 'left' gibi etki yapar. Sayfasız medaya için etkisi 'right' gibidir.

start

Soldan sağa akış yönünde etkisi 'left/top' gibidir.

end

Soldan sağa akış yönünde etkisi 'right/bottom' gibidir.

none

Element yüzen bir kutu olarak görüntülenmez.

Yüzen bir kutu örneğini öngören kodlar aşağıda görülmektedir:

 

 

Bu kodlar, float.htm sayfasında uygulanmış ve sonuç aşağıda görüldüğü gibi olmuştur:

resim3

 

Yukarıdaki sonuç, float olayının uygulanmasına en belirgin örneklerden biridir. CSS3 Box modülü, float olayını özellikle belge çözümleyicilerinin yorumlamalarını yönlendirecek şekilde tanımlamaktadır.

 

'clear' Özelliği (IE 6.02 SP2 bu özelliği desteklemektedir)

 

'clear' özelliği kolay kavranacak bir özellik değildir. Bu özellik bir elementin kutusunun, önceki bir yüzen kutunun hangi kenarı ile bitişik olmayacağını belirtir. Bu özellik sadece blok-düzey elementlere (yüzenler dahil) uygulanır. Kutunun compact veya run-in kutu durumunda, en son compact veya run-in kutuya uygulanırlar.

 

İsim : 'clear'

Değer: left | right | top | bottom | inside | outside | start | end | none

Başlangıç Değeri: none

Uygulanabilecek Elementler:blok-düzey elementler

Kalıtım: hayır

Yüzde: belirtilmemiştir.

Medya: görsel (visual)

Hesaplanan Değer: belirtilen değer

 

Değerlerin açıklamaları: (değerlerin anlamları sadece yatay akış yönü için açıklanmıştır)

left , top

Oluşan kutunun üst marj değeri yeterince arttırılarak, üst kenar sınırının daha önce oluşmuş bir yüzen kutunun alt marj sınırınırın altında olmasını sağlar.

right , bottom

Analog bir şekilde, fakat sağ ve alt yüzen kutunudan uzak durulacak şekilde görüntülenir.

inside

Sayfalı medya için kutunun bulunduğu yere bağlı olarak, aynı 'left' veya 'right' gibi etki yapar. Sayfasız medaya için etkisi 'left' gibidir.

outside

Bu özellik sadece sayfalı (paged) medya için geçerlidir. Sayfalı medya için kutunun bulunduğu yere bağlı olarak, aynı 'right' veya 'left' gibi etki yapar. Sayfasız medaya için etkisi 'right' gibidir.

start

Solda sağa akış yönünde etkisi 'left/top' gibidir.

end

Solda sağa akış yönünde etkisi 'right/bottom' gibidir.

 

both

Oluşan kutu, daha önceki left/top veya right/bottom yüzen kutulardan uzak tutulur.

none

Oluşan kutunun görüntüsünün daha öncekilerle ilgili bir kısıtlaması olmaz.

 

 

 

Thursday, October 6, 2005 21:17

 

validate in W3C !