Kutucuk Modeli

Kutucuk Modeli

24 Şubat 2005

Bu yaziyi, Zoque formunda karsilastigim bir konu basligindan sonra yazmaya karar verdim. Bu yazinin icerigi ic karartici nitelikte teknik olup, teknik konularla ilgilenmeyen okurlarin, daha fazla zaman harcamadan baska eglenceli yerlere gitmeleri onerilir.

CSS'li tasarimlarin vazgecilmeyen ogesi "kutucuk" lardir. Ornegin bu yazinin gorundugu kisim bir kutucuk, yukarida gordugunuz logonun bulundugu kisim ise baska bir kutucukdan olusmaktadir. Eskiden kullanilan bir metod olan tablolarin yerini, CSS'de kutucuklar almaktadir. Tabloda ki TD elementinin yerini, CSS'de DIV elementleri almaktadir.

CSS'de bir kutucuk yaratmak gayet basittir.

1. #kutu {
2. width: 400px;
3. margin:0;
4. padding:20px;
5. border: 20px solid #000;
6. }

Yukarida tanimlanan kutucuk icindeki elementlerin anlami su sekildedir:

width: yazinin bulunacagi alanin uzunlugu (tablodaki width'e esittir)
margin: bu kutucugun diger kutulardan uzakligi (tablodaki cellspacing ile ayni anlamda)
padding: yazi ile kutucugun basladigi yer arasindaki uzaklik (tablodaki cellpadding ile ayni anlamda). Yanlizca 20px degeri verildiginde bu tekste, kutucugun tum kenarlarindan 20 px tampon verir. Eger yanlizca kutucugun sol kenarindan tampon verilmek istenirse o zaman padding-left:20px yazilir.
border: kutunun etrafindaki kenar cizgisi (tablodaki border ile ayni anlamda). 20px kenar cizgisi kalinligini, solid cizginin sitilini ve #000 ise rengini belirlemektedir.

Iste bu CSS kodunu kullanarak, kutucugunuzu asagidaki gibi olusturabilirisiniz

Burada yazi var... Burada yazi var...

Buraya kadar hersey guzel. Maalesef, bu basit CSS kurali, butun web standartlarini destekleyen browserlarda duzgun calisirken, IE'de farkli calismaktadir. Iste bu probleme "Kutucuk Problemi" adi verilir.

Bunu gorsel bir ornek ile size aciklamaya calisacagim. Yukarida gordugunuz kod, web standartlarini destekleyen browserlarda asagidaki gibi bir sonuc verecektir:

Goruldugu gibi width:400px dedigimiz alan yanlizca yazilarin bulundugu kismin genisligini gostermektedir. Kutucugun toplam alan genisligi ise 480px olacaktir.

Fakat ayni kod, IE'de su sekilde goruntulenmektedir:

IE, toplam alandan, border ve padding miktarlarini cikararak, 320px'lik bir yazi alani bize vermekle birlikte, kutucugun toplam alani, bizim verdigimiz width degerine yani 400px'e esit olmaktadir. Bu problem, bir tasarim asamasinda, bizim kafamizi duvarlardan duvarlara vurmaya neden olmaktadir :)

Milyonlarca kisi, IE 5.x browser kullandigindan bu soruna bir cozum bulmak gerekli idi ve bu cozum Tantek Celik'de geldi. Tantek'in teknigi, bir tane CSS DIV elementi ile, standart ve standart olmayan browserlara, yazi alan genisligini tanimlamamizi sagladi. Iste bu teknigin ismine "Kutucuk Problemi Cozumu" deniyor. Tantek'in cozumu ile ilgili ayrintili bilgiyi "Box Model Hack" yazisinda bulabilirsiniz. Ben onun yerine, daha kolay olan Andrew Clover'in metodunu size gosterecegim.

Gelin bu teknige bir goz atalim. Bizim amacimiz yazi alaninin tum browserlarda 400px olmasi. Firefox gibi modern browserlarda yazi alani zaten 400px gorunmekte. IE'de ise 320px olarak algilanmakta. IE'de bu alani 400px yapmanin tek yolu, istedigimiz toplam degere sag padding, sol padding, sag border ve sol border genislikliklerini eklemek olacaktir.

400px + 20px sol padding + 20px sag padding + 20px sol border + 20px sag border = 480px

Biz, 480px'lik bir width tanimlayip, sayfamiza IE ile baktigimizda, tekst alani 400px olacaktir.

Peki bunu Firefox gibi modern browserlari etkilemeden CSS'imiz icine nasil koyabiliriz? Iste Andrew'nun cozumu:

1. #kutu {
2. padding: 20px;
3. border: 20px solid #000;
4. width: 480px; /* Bu kisim IE icin */
5. w\idth: 400px; /* gercek deger - modern browserlar icin */
6. }

Iste bu hepsi bu kadar. w\idth teknigi ile kutucugumuzun yazi alani hem IE'de hem de Firefox gibi modern browserlarda 400px olacaktir.

Dipnot: Bu problem IE'nin tum versiyonlarinda gorulmektedir. Microsoft, IE 6 ile birlikte, IE'nin cok gizlenmis bir ozelligini browserina dahil etti. IE 6, DOCTYPE'i belirlenmemis bir websitesine "Garip Mod"da calismakta iken eger DOCTYPE sayfaya eklenirse "Standart Mod"da calisiyor ve boylece, yukarida gosterdigimiz teknige gerek kalmiyor. Eger sitenizi ziyaret edenlerin buyuk bir cogunlugu IE 6 kullaniyorsa ve siz yukarida kullanilan teknigi, IE 5.x ve asagisi "standart" browserlar olmadigi icin desteklemek istemiyorsaniz, butun yapmaniz gereken sitenize DOCTYPE eklemek. Sizin sitenize uyan DOCTYPE'i gormek ve "DOCTYPE Salteri" hakkinda daha fazla bilgi almak istiyorsaniz, Eric Meyer'in sitesini ziyaret edebilirsiniz.

orijinal: mehmet doğan