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.
- #kutu {
- width: 400px;
- margin:0;
- padding:20px;
- border: 20px solid #000;
- }
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
<div id="kutu">Burada yazi var... Burada yazi var... </div>
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:
- #kutu {
- padding: 20px;
- border: 20px solid #000;
- width: 480px;
/* Bu kisim IE icin */ - w\idth: 400px;
/* gercek deger - modern browserlar icin */ - }
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.
Beni twitter'de takip edebilirsiniz: @mehmet_dogan
Bu yazıya ait 15 yorum var.
Bu yazı yorumlara kapatılmıştır.css yi hiç bilmeyen adam (zamanında hiç bilmezdim şimdi biraz bilirim) için en iyi başlangıçlardan biri , bir sürü değer deneyip üzerinde oynamalar yaparak , css öğrenilebilir.
özellikle topstyle 3 öğrenmeyi kolaylaştıran programların başında gelir.
Daha bugün arkadaşla css ile web sitesi yapımını konuşuyorduk. Eve gel hergünki gibi altıüstünü aç bide görki süper bir yazı. İyi yazı lafının üzerine geldi... Teşekkürler
Merhabalar !
Firefox kullanan arkadaslara Edit CSS extensionunu oneriyorum. Sayfalarin style bilgilerini gorebileceginiz gibi, degerlerlerle oynadiginiz vakit gercek zamanda etkilesimli olarak uzerinde calistiginiz/oynadiginiz sitedeki degisimleri gorebilirsiniz. Cok basit, çabuk ve islevsel bir araç.
Bu guzel makaleyi okuyanlar zaten web standardlari, css hakkinda temel bilgilere sahip olacaklar.(ya da zaten sahipler..) edit css islerini kolaylastirabilir.
Bu arada "birseyler tasarlamak" makalelerini de begeniyle okudum. Kullanici odakli tasarim cogu zaman bahsettigin engellerden oturu basarilamayan bir hedef olarak kaliyor. Kimi zaman fikir asamasinda, kimi zaman ise uygulama sirasinda çöken denemelerin basarili olmasi icin projenin amacina uygun bir içerik iskeletinin kurulmasi ve web standardlarinin verimli kullanilmasi cok onemli.
Blogun icin tebrikler ve gorunmez ucak satmaya devam..
Ogo
Tamda yabanci sitelerde bu konuyla ilgili makaleler ariyordumki, bu siteye rasgeldim..
Cok tesekkurler
Mustafa
Gerçekten faydalı bir püf noktası.Teşekkürler
Mehmet abi;
İmdat ya, ben bu probelmden muzdarip durumdayım şimdi height olayınıda h/eight yapıcaz bu mudur .? ben yapıorum olmuyor.
Bunu dışında bu problem IE 6.0 da yaşanıyor Doctype da olmasına karşın yine de 2 browserda farklı görüntü elde ediyorum.
Aynı problem bendede var.
Firefox da gayet güzel ve ortada görünen kutu ie de aynı yerde ve ölçüde olmuyor.
www.thenoodleincident.com/tutorials/box_lesson/boxes.html sitesindeki bilgileride denedim ama
olmuyor. Beceremiyorum.
Aynı problemi bende yaşadım fakat bir ayrıntı daha var.
Firefox Windows ile Linux ortamında farklı çalışıyor. Bende bazı noktalarda takıldım. Yaptığım tablo windows'daki Firefox'ta farklı Linux'deki Firefox'ta farklı çalıştı. Bunun sebebini hala bulamadım. Ama biz tasarımcılar(amatör veya profesyonel) bu farklılıkları gözardı etmemeliyiz.
Selamlar,
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. }
koduna ek olarak sunu denemenizi oneririm
1. #kutu {
2. padding: 20px;
3. border: 20px solid #000;
4. _width: 480px; /* Bu kisim IE icin */
5. width: 400px; /* gercek deger - modern browserlar icin */
6. }
_ (underscore) ekini takip eden satiri sadece ie gorucektir.
saygilar
merhaba mehmet,
cascading style sheet yani css web layout codunu güzel anlatmissin ama bircak kücük noktaliri senin/sizin dikatine cekmek isterim.
padding:20px tabel -> tr -> td cellpadding yerini almis olan css -> padding codunda sadece passing:20px yazarsaniz olusmus olan kutun her yerinde ice dogru 20px olusturmus olursunuz. ama eyer sadece diyelimki sag tarafta 20 px olusturmak isterseniz bunun icin extra padding-right:20px; deyil padding:0 0 0 20px; yazarsaniz daha iyi olur. bu yöntemin bir iyi yanidi cok yazmadan kutularinizi istediyiniz sekilde ice ve disa (margin:) sekilletebilirsiniz. diyelim margin:20px 0 15px 0;
Birde senin yapdigin w\idht yada h\eight W3C Css valid yani kompatibel degil .
Hepinize selam
merhaba bende internette web standartlarını anlatan bi sitenin haber kısmında gördüm hem hack diyor hemde türk diyince merak etim ve tıkladım direk yazınız cok güzel teşekürler bu yazıyı uye oldugum portalda lıntı olarak yayınlıyorum umarım kızmazsınız eyw
Merhabalar
Uyumsuzluk yüzünden şuanda çıldırmış durumdayım
daha önce bir kaç sitede görmüştüm ama unuttum
Şimdi 2 css çağırma olayı var site mesela ie gördüğünde ie css açıyor ff gördüğünde ff css açıyor bunun bir kodu vardı ama neydi bilen var mı?
çok güzel bir ip ucu bilgisi sunmuşsun , teşekkürler , google sağolsun seni bana getirdi :)
Eğer sadece IE için bir css yüklemek istiyorsanız, önce normal css'inizi (firefox ve diğer modern browserlar için olanı) yükleyin (link tagı ile), sonra onun altına aşağıda açıklamaları olan ksımları girmeniz yeterli olacaktır. (kodlar head bölümüne girilecek, birden fazla yazabilirsiniz, sonuçta if deyimi şeklinde olduğu için kendine ait browserda doğru çalışacaktır.)
IE5 ve ilerisi için (en çok kullanılan bu):
sadece IE 5.0 için:
IE 5.5 ve ilerisi için:
IE 6 'dan gerisi için ( lt = little anlamında):
sadece IE 7.0 için:
#kutu {
border: 20px solid #000;
width: 500px;
} /*buraya kadar ie */
html > body #kutu {width:500px;} /* burası da modern browserler icin*/
arkadaslar yorum yapmıyorum sadece deneyin ve sonucu gorun !...
Bu yazı yorumlara kapatılmıştır.
Kitabımı satın almak ister misiniz?