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

Metinleri Yapı Unsurları Bakımından Tahlil Edebilme

Metin Tahlili Yaşam Ne Tatlı Temmuz, öğle vakti. Komşuda bir karı sesi… Nereye bağırdığı anlaşılmıyor.…

4 gün ago

Türkiye’de Posta Reformlarının Gelişimi ve Dönemsel Analizi

Türkiye’de posta hizmetlerinin kamu vesilesiyle vatandaşlara sunulma yolculuğu, 1840 senesinde “Posta Nezareti”nin kurulmasıyla başladı. O…

1 hafta ago

Bütünleşik Afet Yönetimi Bağlamında Büyükşehir Belediyelerinin 2025-2029 Stratejik Planlarının AnaliziAkademik Kaynak

Afetlerin küresel ve mahalli ölçekte artan yıkıcı tesirleri, kentlerin bu tür krizlere karşı daha dirençli…

1 hafta ago

2025-2026 10. Sınıf Türk Dili ve Edebiyatı 2.Dönem 2.Ortak Yazılı Sınavı

10-TDE-2.Dönem 2.Ortak Yazılı Ulusal Eğitim Bakanlığı (MEB) tarafınca 2024-2025 eğitim-öğretim senesinde yürürlüğe konulmuş olan Türkiye…

2 hafta ago

2025-2026 11. Sınıf Türk Dili ve Edebiyatı 2.Dönem 2.Ortak Yazılı Sınavı

2025-2026 11-TDE-2.Dönem 2.Yazılı Imtihanı SORULAR SORU – KAZANIM EŞLEŞTİRMESİ – SENARYO 1 Sual Birim Mevzu…

2 hafta ago

2025-2026 12. Sınıf Türk Dili ve Edebiyatı 2.Dönem 2.Yazılı Sınavı

2025-2026 11-TDE-2.Dönem 2.Yazılı Imtihanı SORULAR Izahat:Sorular açık uçlu ve kısa cevaplıdır. Cevaplarınızı yazım ve noktalama…

2 hafta ago