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)

Yunus Yurttürk diyor ki:

Kasım 22, 2008, 12:30

Fatih Bey, sorunmu çözdüm. Şu şekilde

width:expression(this.width > 530? “540px”: “auto” );

Genişliklerin 530 ve 540 olması, IE6′da donma yaşanmaması için. Yabancı bir sitede okumuştum, kendime göre uyarladım.

İyi çalışmalar .

Cevapla

Yunus Yurttğrk diyor ki:

Kasım 21, 2008, 23:39

Bu yazılan örneği img nesnesinin belli bir class’ına uygulayabilir miyiz?
clientWidth kısmı yerine img.resimclass’a uygulayacağız yani.
Böyle birşey mümkün mü ?

Cevapla

ebru diyor ki:

Kasım 4, 2008, 16:21

benim istediğim böle değil yhaaaaaaaa
bu neee?

Cevapla

Sabit Konumlandırma (Position:fixed) diyor ki:

Eylül 10, 2008, 11:06

[...] ileposition:fixed

Cevapla

Kuntay Alkın diyor ki:

Haziran 10, 2008, 23:05

Çok yararlı bilgiler.. Teşekkürler..

Cevapla

fatih.hayrioglu diyor ki:

Haziran 9, 2008, 09:53

@Sinan

min-width tanımlama yaptığımız kutunun içeriği eğer atanan değerden az ise genişliği bu değere eşitler

örneğin

min-width:150px olarak atadığımızda katmanın içeriği 100px ise katman 150px genişlikte görünecektir.

GEnel olarak min-height daha fazla kullanılan bir özelliktir. Mesela sol menümüz dinamik olarak oluştuğu için bazı yerlerde yüksekliği kısalıp kötü görünüyorsa menü alanına min-height değeri ile düzelte biliriz.

max-width değerinde atandığı nesnenin değerinin azami genişliğini belirler.

Cevapla