Web Geliştirme Eğitimi Dersleri, 006

BOX MODEL

XHTML için kutu model sistemi.

max-width: | min-width:

Yeni bir komuttur. Modern browser’lar içindir. Herzaman olduğu gibi IE6’da çalışmaz. Render’dan sonra, elementin width’i istenilenden büyük yada küçük çıkarsa burada yazan değerler devreye girer.

max-height: | min-height:

Yeni bir komuttur. Modern browser’lar içindir. Herzaman olduğu gibi IE6’da çalışmaz. Render’dan sonra, elementin height’ı istenilenden büyük yada küçük çıkarsa burada yazan değerler devreye girer.

1. div#box
2. {
3.  max-width: 300px;
4.  max-height: 400px;
5. }
6. /* Ne olursa olsun width 300px’i, height da 400px’i geçemez! */
7. /* Scroll-Bar durumu elementin overflow:’una bağlıdır. */

Sizin istediğiniz, id’si box olan element’in ( muhtemelen bu bir div ) genişliği 300px’li geçmesin. Yada yükseklik en fazla 400px olsun. asp yada php gibi dinamik programlama dilleri ile çalışırken bu özellik çok işe yarar.

Düşününki veritabanı’ndan 30 kayıt çektiniz ve bir div için alt alta ( p içinde ) basıyorsunuz. Gelen kayıtta yazan text’in ekranda ne kadarlık bir genişlik / yükseklik kaplayacağını kestiremezseniz bunu css ile fixlemek için max-width: / max-height: kullanabilirsiniz.

border:

Shorthand kullanımdır. Aldığı parametreler ; border-width:, border-style: ve border-color: ’dır.

border-width:

Ölçü sistemindeki değerlerden alır. ( px , em , cm ... ) Ekstra olarak : thin | medium | thick şeklinde, browser’a bağlı kalınlıklarda border da olabilir. Bu çok tercih edilen bir metod değildir.

Bu tarz kullanımda tüm border’lara değer atanmış olur. border-width: 5px; dendiğinde top, right, bottom, left border’ların hepsinin width’i 5px olur.

border-style:

Parametreleri : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset şeklindedir.

Border tanımlamalarında genelde solid kullanılır. IE7 ve diğer modern browser’larda dotted ve dashed sağlıklı çalışırken, IE6’da dotted özelliği dashed olarak çalışır.

Bu tarz kullanımda tüm border’lara değer atanmış olur. border-style: solid; dendiğinde top, right, bottom, left border’ların hepsinin stil’i solid olur.

border-color:

Renk sistemindeki değerleri alır.

Bu tarz kullanımda tüm border’lara değer atanmış olur. border-color: red; dendiğinde top, right, bottom, left border’ların hepsinin rengi’i kırmızı olur.

border-top: | border-right: | border-bottom: | border-top:

Her border’a tek tek ulaşmayı sağlar. Shorthand şeklinde çalışır. 3 parametre alır. border-width, border-style ve border-color. Aynen border: gibi çalışır sadece ilgili border’a müdahale eder.

Hesap

1. /*
2. KUTU_GENİŞLİK = ( width + ( left padding + right padding ) ) + ( left border + right border )
3. KUTU_YÜKSEKLİK = ( height + ( top padding + bottom padding ) ) + ( top border + bottom border )
4. */
5. #box
6. {
7.  width: 300px;
8.  padding: 10px;
9.  /* Oluşacak kutu’nun genişliği : 300 + ( 10 + 10 ) = 320px, kutu içinde kalan CONTENT ise width değeri yani 300px olacaktır. */
10. }
11. #box2
12. {
13.  width: 300px;
14.  padding: 10px;
15.  border: 5px;
16.  /* Oluşacak kutu’nun genişliği : 300 + ( 10 + 10 ) + ( 5 + 5 ) = 330px, kutu içinde kalan CONTENT ise width değeri yani 300px olacaktır. */
17. }

Not

*** Marjin bilgisi, box’ın görsel ölçüsünü bozmaz. Sadece içinde bulunduğu elemente göre pozisyon almasını sağlar ( parentNode’una göre ). Herzaman olduğu gibi, IE6’da double margin-bug adında bir hata vardır. Float eden elementler’de olur. margin-right: 20px; dediğinizde IE6 x2 yani sağda 40px marjin bırakır.

Positioning

Görsel yerleşim için kullanılır. Tüm elementler default olarak relative pozisyon’dadırlar. En basit yerleşim elemanı olarak margin: kullanılabilir.

Koordinat Sistemi