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


 

Marj Özellikleri

 

Kenar Marjı Özellikleri(IE 6.02 SP2 bu özelliği iyi bir şekilde desteklemektedir)

 

Bu özellik bir elementin görüntüsü için oluşturulan kutu kenar marjlarının kalınlığını belirtir.

İsim: 'margin-top' , 'margin-right' , 'margin-bottom' , 'margin-left'

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

Başlangıç Değeri: 0

Uygulanabilecek Elementler: tüm elementler

Kalıtım: hayır

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

Medya:görsel (visual)

Hesaplanan Değer: <uzunluk>

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

 

'margin-top' Özelliğinin bir uygulaması örnekler arasında incelenebilir. Bu uygulama, iyi kullanılırsa, 'margin-top' özelliğinin bir elemente dikey aralık vermek için çok yararlı olduğunu belirtmektedir.

 

'margin' Kısayol Özelliği (IE 6.02 SP2 bu özelliği desteklemektedir)

 

margin' özelliği, kenar bir elementin dört kenarının marj genişliğini bir tek deyimde belirleyebilmek için kullanılabilecek bir kısayol özelliğidir.

 

İsim: 'margin'

Değer: [<uzunluk> | <yüzde> | auto] {1,4}

Başlangıç Değeri: (teker teker bireysel değerlerlere bakınız)

Uygulanabilecek Elementler:tüm elementler

Kalıtım:hayır

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

Medya: görsel (visual)

Hesaplanan Değer: teker teker bireysel değerlerlere bakınız

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

 

Bu özellik elementlerin marj genişliklerini belirtir. Değerler negatif olabilir, fakat belge çözümleyiciler kendilerine özgü bir alt sınır koyabilirler.

'margin' Kısayol özelliği 4 değer ile birlikte kullanılabilir. İlk değer üst, ikinci değer sağ, üçüncü değer alt, son değer sol marj genişliğini belirtir. Eğer tek değer kullanılırsa, bu değer tüm marj alanlarına uygulanır. Eğer sadece iki değer verilmişse, bu değerlerin ilki üst ve alt, ikincisi sağ ve sol marj genişlikleri olarak kabul edilir. Eğer üç değer kullanılırsa, bu değerlerden ilki üst, ikincisi sağ ve ve sol, üçüncüsü de alt marj genişlikleri olarak kabul edilir.

Marj kalınlıklarının 'auto' değerlerinin anlamı aşağıda belirtilmiştir:

(içeren bloğun genişliği) = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

Kutu genişlikleri incenirken, bu konu daha ayrıntılı olarak ele alınacaktır. Yukarıdaki denklemden de anlaşaılacağı gibi, elementlerin marj değerleri bazı ek kısıtları sağlamak durumundadır. Bu yüzden, hesaplanan marj değerleri, öngörülenlerden farklı olabilir.

Akış yönü tüm Latin alfabelerinde olduğu gibi, yatay olarak gelişiyorsa, 'margin-top' ve 'margin-bottom' özelliklerinin yüzde değerleri, içeren bloğun yüksekliğine değil, genişliğine oranlanır.

'margin-top' ve 'margin-bottom' özellikleri, yatay gelişen akış modelinde yer değiştirmemiş satırıçi elementlerine uygulanmaz. Bu konuda CSS3 satır bölümünde daha fazla bilgi verilmiştir.

 

Çakışan Marjlar

 

Blok-düzey bir kutunun üst ve alt marjları, kutunun bir üst ve bir alttaki blok-düzey kutularla minimum uzaklığını belirler. Negatif marj uzunlukları belirtilmemişse, ve başka kenar ve gezinti alanları genişlikleri belirtilmemişse, kutu aralarındaki minimum dikey uzaklık marj genişliklerinin toplamı değil, en büyük marjın uzaklığı kadardır. Bu olaya çakışan marjlar adı verilir. Türkçenin de dahil olduğu, dikey yönde yukarıdan aşağıya yatay yönde soldan sağa doğru gelişen alfabeler kullanılan sayfalarda, sadece blok-düzey elementlerin dikey (yukarıdan aşağıya ) marjlarının çakışmasının gerçekleşme şansı olabilir. Çince gibi dillerin kullanıldığı dikey yönde yukarıdan aşağıya, yatay yönde sağdan sola gelişimde ise, tam aksine ancak yatay marjlar çakışabilir. Aşağıdaki örnek, Latin alfabesine göe gelişimde iki paragraf elementinin yatay uzaklığının çakışan marjlardan dolayı nasıl değişebildiğini açıklamaktadır:

 

 

bu örnek kodlar collapsing margins1. htm sayfasına uygulanmıştır. Bu sayfanın görüntülenmesinde, iki paragraf arasındaki dikey uzaklığın, paragraf elementinin yeniden tanımlanmış stiline göre,

Birinci paragraf alt marj uzaklığı ( 3cm) + İkinci paragraf üst marj uzaklığı ( 7cm) = 10cm

olması beklenirken, marj çakışması nedeni ile, sadece en yüksek marj aralığı olan 7cm olarak gerçekleşmiştir.

Marj değerlerinin belirlenmesi, uygun durumlarda, elementlerin yer tutma (pozitioning) özellikleri için yararlı olabilir. Çakışan marjlar prensibinin, ilk örnekle prensip olarak aynı fakat elementlerin görüntülendiği kutuları daha iyi vurgulayan renkli kenarları içeren ikinci bir örnek aşağıda görülmektedir :

 

 

Bu örnekteki kodlar da collapsing margins2. htm sayfasına uygulanmıştır. Bu örneğin incelenmesinde, blok-düzey bir element olan <ul> elementinin görüntülendiği kutunun, kendi çocuğu olan ve blok-düzey bir element olmayan <li> elementinin kutusunu içerdiği görülüyor.Sırasız liste elemanı ile alt paragraf satırı arasında, marj çakışması nedeni ile sadece en yüksek olan marj aralığı değeri olan 5cm ilk bir aralık olduğu görülüyor. Bu örnekte yer alan çakışma, birbirlerini takip eden blok-düzey kutuların yapışık marjlarının çakışması prensibi olarak adlandırılır. Doğal olarak yatay bir gelişimde blok-düzey kutuların sadece dikey marjları çakışabilir.

İlginç bir başka örnek de aşağıda görüldüğü gibi, marj aralıklarının elementlere yatay yer tutma özellikleri kazandırabileceğidir:

 

 

Bu örnekteki kodlar da collapsing margins3. htm sayfasına uygulanmıştır. Burada yatay marjların çakışmadığına dikkat ediniz. Liste elemanı bir blok-düzey elemenı değildir ve kendi marjı, içerildiği kutunun kenarından 7cm sola olarak gerçekleşmektedir. Kendisini içeren sırasız liste blok-düzey elementinin kutusu ise sayfa genelinden 5cm lik bir sol marjı olduğundan liste elemanı sayfa solundan 12cm solda görüntülenmektedir. Aynı görüntü, sırasız liste elementinin sol marjını 12cm olarak belirterek ve liste elemanına hiç marj vermeyerek de elde edilebilir.

Çakışan marjın genişliği, en yüksek pozitif marj açıklığının, en düşük negatif marj açıklığı ile cebirsel toplamı olarak kabul edilir. Örnek olarak çakışacak dört marjın aralığı 2cm, 3cm, -2.2cm, -1.7cm olsa marj aralığı 3+(-2.2)=1.8cm olarak hesaplanır. Negatif değer yoksa, açıklık olarak en yüksek pozitif değer alınır.

Çakışma hem komütatif, hem de transitif bir işlemdir. Eğer bir A elementin marjı bir B elementi ile, onun da marjı bir C elementi ile çakışıyorsa, komütatiflik gereği, B elementinin marjı da A elementi ile çakışır, transitiflik gereği , A elementi ile C elementinin marjları çakışır.

Marjların çakışması belirli koşulların gerçekleşmesine bağlıdır. 'display' Özelliği 'none' olan bir element, çakışma sırasında hiç oluşmamış olarak kabul edilir. Yüzen (Floating) kutular ne başka yüzen kutularla ne de normal kutularla çakışmazlar. Mutlak yer tutma özelliği verilmiş (absolut pozisyonlu) kutuların marjları, başka hiçbir kutunun marjı ile çakışmaz.

Yatay akışta aşağıdaki marjlar çakışır:

  1. Alt gezinti alanı ve kenarı olmayan blok-düzey bir kutu ile en son çocuğunun alt marjları.

  2. Alt gezinti alanı ve kenarı olmayan blok-düzey bir kutu ile en son çocuğunun üst marjları.

  3. Her ikisi de blok-düzey olan bir kutunun alt marjı ile en yakın çocuğunun kutusunun üst marjı.

  4. Yüksekliği 'auto' veya '0' olan, kenar ve gezinti alanı olmayan, içeriği olmayan( yani hiç satır kutusu ve yer değiştirmiş içeriği olmayan) bir blok-düzey kutusunun üst ve alt marjları.

Uygulamada bu kurallar gözetilerek kodlama yapılırsa istenilen görüntülerin az sayıda deneme ile oluşturulabildiği görülecektir. İyi ve hızlı bir tasarım için bilgi düzeyi anahtar konumundadır.

 

 

validate in W3C !

Thursday, October 6, 2005 21:16