Genişlik ve Yüksekliğin Sınırlarını Belirlemek(min-width, min-height,max-width, max-height)

Bir kapsayıcı kutunun genişlik değerini minimum ve maksimum değerleri ile sınarlandırabilriz. Bu özellikler CSS2 ile birlikte gelmiştir.

min-width, min-height

Yapısı : min-width, min-height: <deger>
Aldığı Değerler : <uzunluk değeri > | <yüzde> | inherit
Başlnagıç değeri: 0
Uygulanabilen elementler: inline nonreplacement elementler ve tablo elementlere
Kalıtsallık: Yok

min-width, min-height kapsayıcı kutunun minimum alacağı değerleri belirtmek için kullanırız.

p.menu {
float:left;
width:200px;
min-width:150px;
}

Web Tarayıcı Uyumu:

Internet Explorer 7+
Netscape 6+
Opera 6+
W3C’s CSS Level 2+
CSS Profile 2.0

Aynı şekilde max-width ve max-height tanımlamalarıda yapılır.

max-width, max-height

Yapısı : max-width, max-height: <deger>
Aldığı Değerler : <uzunluk değeri > | <yüzde> | none | inherit
Başlnagıç değeri: 0
Uygulanabilen elementler: inline nonreplacement elementler ve tablo elementlere
Kalıtsallık: Yok

max-width, max-height kapsayıcı kutunun maksimum alacağı değerleri belirtmek için kullanırız.

p.menu {
float:left;
width:200px;
max-width:400px;
}

Web Tarayıcı Uyumu:

Internet Explorer 7+
Netscape 6+
Opera 5+
W3C’s CSS Level 2+
CSS Profile 2.0

şöyle bir sonumuz vardır ki oda IE’nin 7 versiyonundan sonra bu özellikleri desteklemeye başlamasdır. Bu çok kullanışlı özellikleri bu nedenden dolayı kullanmamazlık yapmayacağız tabi.

IE için bir çözüm vardır. expression() özelliği bu özellik sadece IE tarafından yorumlanır. Bu özellik dinamik özellik olarak tanımlanır. Yani bu kod normalde bir javascript kodudur.

#icerik
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");
}
<body>
<div id="icerik">
....
</div>
</body>

Yukarıdaki tanımlamda css içerisinde javascript komutları kullanılmıştır. Bu tanımlamaları sadece IE anlayacaktır ve uygulayacaktır. Kodda eğer genişlik belirtilen maksimum değerden büyükse atanan değeri alacak değilse auto değeri alacaktır.

Ayrıca min-height için daha kısa bir çözüm vardır

#menu {
min-height:500px;
height:auto !important;
height:500px;
}

41 Yorum (Yorum Ekle)

fatih.hayrioglu diyor ki:

Ocak 21, 2008, 15:45

domain : http://tr.wikipedia.org/wiki/Domain_%28internet%29

hit içinde ikiye aırıp tanım yapalım

çoğul hit: sayfa her yenilendiğinde artıyor.
tekil hit: sayfaya gelen kullanıcı değiştiğinde artıyor.

Cevapla

kanun diyor ki:

Ocak 21, 2008, 10:54

hocam size 2 soru soracağım domain nedir.
birde hit nedir.şimdiden teşekkürler

Cevapla

güzel diyor ki:

Ocak 17, 2008, 05:04

Fatih hocam bir süredir çalışmalarınızı takip ediyorum, ve sizden çok şey öğrendim.. bu değerli bilgiler için teşekkür ederim.

Cevapla

selmant diyor ki:

Ocak 1, 2008, 02:27

Fatih hocam öncelikle verdiğiniz tüm emek için teşekkürler. Beni ihya ettiniz.

bi sorunum var:
şimdi iç içe 2tane ‘div’imiz var. içteki divin boyu’..derken sorunu çözdüm sormaktan vazgeçtim :) hadi iyi geceler.

Cevapla

gokhanweb diyor ki:

Aralık 16, 2007, 00:20

width:expression(document.body.clientWidth > (500/12) * parseInt(document.body.currentStyle.fontSize)?”14em”:”auto”);

ben bu şekilde çözdüm sorunu. 14em değerini isteğinize göre ayarlayın. ben ayarladım ve monitör çözünürlüğünü 800×600 pixelden 1280×1024 pixele kadar değiştirdim. tüm çözünürlüklerde sorunsuz çalışıyor. daha doğrusu dizayn açısından bir terslik yaratmıyor.

Cevapla

Gökhan PUR diyor ki:

Kasım 28, 2007, 17:08

Untitled Document

html, body {height:100%; margin:0; }

xpur

böyle bir yapıda tablo içinde neden div height:100% olmuyor. buna nasıl bir çözüm üretirim. dediğim zaman oluyor mantık olarak ama benim tablom bu yapıya biraz ters yani bu div i td içinde nasıl yüksekliğini 100% yaparım.

şimdiden teşekkürler herkese.

Cevapla