Kategoriler: Genel

CSS – 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.

  1. p.menu {
  2. float:left;
  3. width:200px;
  4. min-width:150px;
  5. }
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.

  1. p.menu {
  2. float:left;
  3. width:200px;
  4. max-width:400px;
  5. }
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.

  1. #icerik
  2. {
  3. min-width: 600px;
  4. max-width: 1200px;
  5. width:expression(document.body.clientWidth < 600? “600px” : document.body.clientWidth > 1200? “1200px” : “auto”);
    }
  6. <body>
  7. <div id=”icerik”>
  8. …
  9. </div>
  10. </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

sade kodu gösterpanoya kopyalayazdır?
  1. #menu {
  2. min-height:500px;
  3. height:auto ;
  4. height:500px;
  5. }
Bul-Tikla

Yorum Yap
Share
Yazar
Bul-Tikla
15 yıl ago

Son Yazılar

Şu Acayip Hücre Özeti, Konusu ve Karakterleri

Şu Şaşırtıcı ve hayret verici Hücre – Tarık UsluTür:ÇocukYazar:Tarık UsluYayınlanma Zamanı:2012Yayınevi:UğurböceğiISBN: 9786055523558Karakterler6-C Sınıfı Öğrencileri: Meraklı,…

8 saat ago

Sisle Gelen Yolcu Özeti ve Konusu

Sisle Gelen Yolcu – Jean Christophe GrangeMevzusuRoman, hafızasını yitirmiş bir insanın kimliğini ararken kendisini bir…

16 saat ago

SİYASAL ŞİDDET, SAVAŞ VE TERÖRİZM

Prof. Dr. Ali Fuat Gökçe’nin değindiği Siyasal Sertlik, Harp ve Terörizm, günümüz dünyasında sıkça karşılaşılan…

1 gün ago

Karakter, Kişilik, Huy ve Mizaç Nedir?

Karakter, Kişilik, Alışkanlık ve Mizaç Nedir? İnsan ve insanı idrak etmek; tarihin her döneminde hem…

3 gün ago

Zekanı Ölç: 5 Soruda Kitap IQ’n Kaç?

Kitap Diyarı internet sayfasında gezinirken deneyiminizi geliştirmek için çerezleri kullanıyoruz. Bu çerezlerden, gerektiği benzer biçimde…

4 gün ago

Bu Testte Doğru Yok… Sadece Sen Varsın

Seçimlerine nazaran ilerleyen kontrol Bir Kitap Buluyorsun… Okur Ruhun Ortaya Çıkıyor Bu testte doğru ya…

4 gün ago