Aslında bu duruma ne kadar sorun denir tartışılır, ama konunun özü şu. Diyelim ki bir web sayfası hazırlıyorsunuz ve oluşturduğunuz tasarımda, body arka plana bir resim atamayı düşünüyorsunuz. Bu işi gerçekleştirebilmek için CSS background özelliğini kullanıyoruz.
Bilmiyorum hiç karşılaştınız mı, eğer tasarım gereği body’ye uygulamayı düşündüğünüz arka planın, tarayıcı pencerenin dikey ekseninde, alt kısımda olması gerekirse, Firefox ve Opera’da ilginç bir durumla karşılaşıyorsunuz. IE, Safari ve Chrome kodu farklı yorumluyor.
body {
background:url(oztecnic.jpg) no-repeat left bottom;
}
Firefox ve Opera, burada body etiketinin etki alanını, içeriğin yüksekliğiyle ilişkilendiriyor. Eğer body’ye bir arka plan rengi verecek olursak, bütün alana etki ettiğini görüyoruz.
Sorunu çözmek için <html> etiketine height:100% vermek kısmen işe yarıyor.
html {
height:100%;
}
body {
background:url(oztecnic.jpg) no-repeat left bottom;
}
Buradan bakabilirsiniz. Bu durumda ise eğer içerik, tarayıcı penceresinin yüksekliğini aşıyorsa, body’ye verdiğimiz arka plan olduğu yerde kalmaya devam ediyor.
html {
height:100%;
}
body {
background:url(oztecnic.jpg) no-repeat left bottom;
}
div {
height:1000px;
}
Bu durumu şuradan görebilirsiniz. Konunun Firefox açısından nihai çözümü şu şekilde gerçekleşiyor…
html {
min-height:100%;
}
body {
background:url(oztecnic.jpg) no-repeat left bottom;
}
div {
height:1000px;
}
Sayfanın son halini buradan görebilirsiniz.
Fırından yeni çıkmış yazılardan haberdar olmak için RSS yayınıma abone olabilir ya da beni Twitter'dan takip edebilirsiniz.
Yorumla BakalımBu Makale için toplam 0 adet yorum bulunmaktadır...
Bu Makale 1 April, 2009 ve saat 22:47 itibariyle CSS kategorisi altına kaydedilmiştir. Bu makale ile ilgili yorumları RSS 2.0 beslemesinden takip edebilirsiniz.. Bu makale için yorum yapabilir, veya kendi web sitenize trackback sağlayabilirsiniz...