CSS ile Kutu modeli, sorunları ve çözümleri
CSS’e geçişte en çok düşündüren konu niye CSS geçelim ve CSS’in avantajları nelerdir? CSS’in avantajı bize web sayfasındaki elemanlara daha fazla müdahele etme imkanı vermesidir. Burada bunun en güzel örneklerinden birini göreceğiz.
CSS tüm HTML elementlerini bir dikdörtgen kutu içine konmuş varsayarak ona göre pozisyonları ve boyutlarını konrol eder. Bu elementler her zaman bir padding, margin, border ve içerik alanını içerir. Aşağıdaki şekle bir bakınız:
Margin’ler her zaman transparandır. Border’lar üç şekilde( solid, dashed ve dotted) olabilir. Background sadece border içerisine uygulanabilir, yani padding ve içerik alanı kısmını içerir.
Bir elementin toplam genişliği; sol+sağ marginleri, sol+sağ padding’leri, sol+sağ border’ları ve elementin içeriğini kapsar. Margin’ler, padding’ler ve border’lar opsiyonel elementlerdir fakat başlangıçta bunların değerleri ‘0′ olarak belirlenmiştir. Yükseklik içinde durum aynıdır. üst-alt margin değerleri, üst-alt padding değerleri, üst-alt border değerleri ve içerik alanı yükseliği toplamı yükseklik değerini oluşturur.
Box modeli iki elementi bulunur. Blok-level elementler ve inline-level elementler.
Blok-level elementler : Blok-level elementin görünüş formatı bir kutu gibidir. Blok-level elementler inline elementleri ve diğer blok-level elementleri içerebilir. Tipik özellikleri yeni bir satır başlangıcı yapmalarıdır. Örnek: h6, p, li vd.
Inline-level Elementler : Inline elementler bir içerik gibi görünür, diğer bir inline elelementi veye bir metni içere bilir. Genelde yeni satır veya boşluk oluşturmazlar. Örnek: a, strong, span vd.
Tüm kutu modelleri aşağıdaki bölümleri içerir:
İçerik Alanı: Elementin asıl içeriğini oluşturan kısmıdır. Metin ve nesneler içerir.
Padding : Elementin kenarındaki dolgu alanıdır.
Border : Elementin kenarlıklarıdır.
Margin: Elementin kenar boşluklarıdır.
Box Model Sorunu ve Çözümü
W3C’ye göre genişlik(ve yükseklik) değeri içerik alanı değeridir. padding ve border değerleri buna ek olarak toplam kutu genişliğine eklenir. Eğer toplam kutu değeri eklenecekse içerik alanı ve etrafındaki padding ve border değerleri toplamıdır.
Buraya kadar çok güzel ancak tüm web tarayıcıları bu durumu aynı şekilde yorumlamaz. IE’un IE6/strict’den önceki versiyonları yukarıda anlattığımız standart yorumun dışına çıkar, genişlik veya yükseklik değeri tüm kutu model element değerini ifade eder. Yani tüm padding ve border değerlerini içerir kalan kısmıda içerik alanı değeri olarak belirlenir.
#icerik{
width:200px;
padding:10px;
border:5px solid #000;
}
Standart web tarayıcıları bu durumu şöyle yorumlayacaklardır.
200px + 10px sol kenar iç boşluğu + 5px sol kenar çizgisi + 10px sağ kenar iç boşluğu + 5px sağ kenar çizgisi = 230px toplam genişlik
kutu elemetinin genişliği 230px olacaktır.
Ancak IE‘un IE6/strict’den önceki versiyonlar için kutu elementinin genişlik değeri 200px’dir.
Margin(Kenar dış boşluğu) değeri width değerini direk etkilemese de dolaylı olarak etkiler. Kutular arasındaki genişliği hesaplarken margin değerlerinide dikkate almalıyız. CSS ile sayfa yapıların oluştururken kenar dış boğluklarını(margin) da dikkate elmalıyız.
Bu sorunun çözümü için üretilmiş bir çok yöntem vardır. Ancak bence en sağlamı tantek‘in ürettiği koddur ve burada bundan bahsedeceğim.
#icerik{
width:230px;
padding:10px;
border:5px solid #000; /* Bundan sonraki kısmı ie5win sakla */
voice-family: "\"}\"";
voice-family:inherit;
width:200px;
}
Burdaki ilk genişilk değeri(2. satırdaki) IE’un IE6/strict’den önceki versiyonların yorumlayacağı genişlik değeri, ikinci genişlik değeri(7. satırdaki) ise standart yorumu destekleyen web tarayıcılarının kullanacağı değerdir.
Bu kodlamada son olarak Opera 5 için bir kod ekleyeceğiz.
#icerik{
width:230px;
padding:10px;
border:5px solid #000; /* Bundan sonraki kısmı ie5win sakla */
voice-family: "\"}\"";
voice-family:inherit;
width:200px;
}
html>body #icerik {
width:200px;
}
Not: Aynı şeyler yükseklik(height) içinde geçerlidir.
ben bir türlü oturtamadım bu konuyu. Şöyle anlıyorum:
bir tane div katmanı yaptım, adı kutu olsun. içine bir adet resim koyucam. resmim 100 X 100. şimdi kutuya da 2 piksel border veriyorum. resimle arasında 10 piksel mesafe olsun istiyorum sağ sol yukarı ve aşağıda.
#kutu {
width:122px;
height:122px;
padding:10px;
}
bu mu yoksa
img {
margin:11px;
}
bu mu
bende firefoxta da istediiğim gibi olmuyor bu.
kutu içinde kutu yaparken margini padingi nasıl kullanacağız içiçe 2 elemente de margin ve padding uygulanabiliyor oysa mantıken birine padding diğerine de margin uygulanabilmesi lazım yalnızca o zaman birbirinden ne farkı vaar bu 2 terimin. ya da benim kafam almıyor bu css’ i.
gözünü sevdiğimin tabloları bilemedik değerini
Cevap için teşekkürler.
Burda bu özelliklerin ne manaya geldiğinden ziyade ie5x ve altı bu kodu ve sonrasını yorumlamaması önemlidir.
Bu özellikleri ie5x ve altın görünmemesi için yazıyoruz
voice-family: “\”}\”";
voice-family:inherit;
Bu satırların manası nedir? Sorunu düzeltmek için ezbere yazıyoruz ama
voice-family: “\”}\”";
ne işe yarar?
voice-family:inherit;
ne işe yarar?
güzel yazı
tahir Nisan 16, 2007
merhaba,
onceki sorumu yanlis yere yanlis formatta yazmistim. simdi buraya kodlar gorunecek sekilde yazacagim.
sorunum su : float elementi ile yanyana dizilmis bir ikiliyi, dinamik bir sistemde duplicate ettigimde arkaplan icerik yuksekligine gore acilmiyor.
sizce hata nerde?
yani :
.deneme {
background-color:#999900;
width:300px}
.denemeic {
float:left;
}
[div class=”deneme”]
[div]
[div class=”denemeic”]buraya resim[br /][br /][br /] gelecek[/div]
[div class=”denemeic”]buraya yazi gelecek[/div]
[/div]
[/div]
—————————————
#deneme {
background-color:#999900;
width:300px}
#denemeic {
float:left;
}
[div class=”deneme”]
[div]
[div class=”denemeic”]buraya resim[br /][br /][br /] gelecek[/div]
[div class=”denemeic”]buraya yazi gelecek[/div]
[/div]
boyle olcak
[/div]
merhaba,
onceki sorumu yanlis yere yanlis formatta yazmistim. simdi buraya kodlar gorunecek sekilde yazacagim.
sorunum su : float elementi ile yanyana dizilmis bir ikiliyi, dinamik bir sistemde duplicate ettigimde arkaplan icerik yuksekligine gore acilmiyor.
sizce hata nerde?
yani :
.deneme {
background-color:#999900;
width:300px}
.denemeic {
float:left;
}
[div class="deneme"]
[div]
[div class="denemeic"]buraya resim[br /][br /][br /] gelecek[/div]
[div class="denemeic"]buraya yazi gelecek[/div]
[/div]
[/div]
Bu konuya CSS editörleri kısmında değinmiştim.
http://www.fatihhayrioglu.com/?p=178
benim merak ettiğim. css anlatılıyor, bir cok da kaynak var internet üzerinde, peki yukarıda verdiğiniz örenkleri, kodları hangi proğramda kullanacağız en basidi hangisi. ben yeni yeni öğreniyorum wep tasarımı bu aradada dv öğrenmeye calışıyorum. bu kodları css de nasıl uygulayabilirz.
Bu hata ayıklması sadece genişlik tanımı ile birlikte margin,padding ve border tanımlarını yaptığımız durumlar için geçerlidir. Diğer durumlarda bu koda gerekyoktur.
Eğer ie6′da aşağısı siizn için önemli değilse de bu kodu kullanmanıza gerek yok .
Ama şunu söyleyeyim ki tüm web tarayıcılarına uygun kod üretmek için bu kodu kullanmalısınız. Evet kodu şişiriyor ama yapacak bişey yok.
Koda ekelme konusunda şöyle bir şey yapıyorum işimi bayağı kolaylaştıruyor. Dreamweaver da Snippets(Windows-Snippets) kısmına çok kullandığım hata ayıklama kodlarını tanımlıyorum ve her eklemem gerektiği zamanda buradan tek tıkla koda ekliyorum.
Ama kodu şişirmemesi konusunda yapacak bişey yok