CSS3 ve HTML Dersleri | Genişlik ve Yükseklik

CSS Genişlik ve Yükseklik Stil Özellikleri

CSS’de Genişlik ve Yükseklik

CSS’de en çok kullanılan özellikler arasındadır genişlik ve yükseklik özellikleri. Web tasarımları genellikle bir tasarımcı tarafından photoshop gibi programlarda tasarlanır ve buna bağlı olarak html ve css kullanılarak büyük oranda aynısı elde edilir. Bu noktada bir web sayfasının genişlik değerine göre ölçme, biçme ve hesaplama gerekir. Bu noktada etiketlerin konumuna göre genişlik, yükseklik, eğer responsive bir web sayfası ise %’sel değerler, auto ve min-max height width değerleri sıkça kullanılmaktadır.

<!DOCTYPE html>
<html>
<head>
<title>Height (Yükseklik) ve Width (Genişlik) Özellikleri</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="box1">
BOX1: Bu div etiketinin yüksekliği 100px genişliği sayfanın %50 si kadar gözükür.
</div>
<hr>
<div class="box2">
BOX2: Bu div etiketinin yüksekliği 150px genişliği 600px olarak sabit verilmiştir.
</div>
<hr>
<h2>Max-width değeri ile widht değeri arasındaki fark</h2>
<div class="box3">
Bu div etiketinin genişliği 500px verilmiştir. Sayfayı küçülterek durumu gözlemleyin
</div>
<div class="box4">
Bu div etiketinin maximum genişliği 500px verilmiştir. Sayfayı küçülterek max-width ile width özelliklerini karşılaştırın
</div>
<hr>
<h2>Max-height / Min-height</h2>
<div class="box5">
<b>Bu paragrafa max-height değeri 100px verildi. </b>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi imperdiet erat at finibus elementum. Donec eu augue lobortis, aliquam massa vitae, volutpat lectus. Vivamus non lacus eget velit tempus gravida. Pellentesque non sem purus. Donec in arcu in mauris elementum euismod ac vitae nisi. Nam eget molestie nunc. In quis egestas odio. Vestibulum hendrerit nunc vel cursus suscipit. Donec convallis vel metus ut vehicula. Integer ultricies lacus et congue finibus.
Quisque ultrices convallis justo ut tempor. Mauris lacinia, massa sit amet volutpat fermentum, orci nisi tincidunt neque, eu imperdiet mi erat a ligula. Pellentesque nec sem non tortor porta pretium eget ac nisi. Nullam ut lacinia urna. In hac habitasse platea dictumst. Vestibulum eu est quis felis auctor tempus ut sed nunc. Aliquam eros ex, molestie et consequat ut, fringilla nec ante. Morbi purus magna, dictum mollis arcu non, imperdiet volutpat tellus. Nam volutpat et dolor vitae imperdiet.
</div>
<hr>
<div class="box6">
<b>Bu paragrafa min-height değeri 200px verildi.</b> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi imperdiet erat at finibus elementum. Donec eu augue lobortis, aliquam massa vitae, volutpat lectus. Vivamus non lacus eget velit tempus gravida. Pellentesque non sem purus. Donec in arcu in mauris elementum euismod ac vitae nisi. Nam eget molestie nunc. In quis egestas odio. Vestibulum hendrerit nunc vel cursus suscipit. Donec convallis vel metus ut vehicula. Integer ultricies lacus et congue finibus.
Quisque ultrices convallis justo ut tempor. Mauris lacinia, massa sit amet volutpat fermentum, orci nisi tincidunt neque, eu imperdiet mi erat a ligula. Pellentesque nec sem non tortor porta pretium eget ac nisi. Nullam ut lacinia urna. In hac habitasse platea dictumst. Vestibulum eu est quis felis auctor tempus ut sed nunc. Aliquam eros ex, molestie et consequat ut, fringilla nec ante. Morbi purus magna, dictum mollis arcu non, imperdiet volutpat tellus. Nam volutpat et dolor vitae imperdiet.
</div>
</body>
</html>

Örneklerde genel olarak kullanılan stil atamaları aşağıdaki gibidir.


div{
border: 1px solid red;
background-color: lightblue;
}

Örneklerde kullanılan <div> etiketlerin hepsine belirgin olması açısından 1px kalınlığında kırmızı renkli kenarlık ve arka plan rengi açık mavi olarak belirlenmiştir.

Width (Genişlik) Özelliği

Width özelliği genellikle pixel (px) olarak kullanılsa da bu değerler cm, etc olabilir. Blok seviyesindeki etiket ve elementlerde %’sel cinsinden de genişlik belirtilebilir.


.box1{
width: 50%;
}

Örnekte gözüktüğü gibi kutucuğumuzun genişliği %50 belirtildiği için soldan sağa doğru sayfanın yarısına kadar genişliği bulunmaktadır. Ayrıca tarayıcı penceresi küçültülmesi durumunda genişliği, her zaman küçültülen tarayıcı penceresinin yarısı kadar bir genişliğe sahip olacaktır.

Height (Yükseklik) Özelliği

Height özelliği ile HTML etiketlerin yüksekliklerini belirleyebiliriz. Genelde px cinsinden değerler kullanılır. Eğer belirtilmiş yüksekliğin aldığından daha fazla etiket ve içeriğinin olması sebebiyle yükseklik değeri yetmez ve sınırların altına taşabilir. Bu durumda daha sonraki derslerde daha detaylı anlatacağımız taşıntılar (overflow) özelliği kullanılabilir.


.box2{
height: 150px;
width: 600px;
}

Maksimum ve Minimum Genişlik (max-width, min-width)

Maksimum ve minimum genişlik özellikleri genellikle responsive web sayfalarında sıklıkla kullanılırlar. Örneği incelerken tarayıcınızın boyutlarını değiştirirseniz normal width ve max-width özelliklerinin farkını daha rahat anlayabilirsiniz.


.box3{
width: 500px;
}
.box4{
max-width: 500px;
}

Maksimum ve Minimum Yükseklik (max-height, min-height)

Genişlik özelliğinde olduğu gibi minimum ve maksimum yükseklik değerleri resposive bir web tasarımında kullanılabilir. Responsive mantığında genişlik daha önemli olmasına rağmen maksimum ve minimum yükseklik değerleri de bu mantık içinde kullanılabilir. Ancak bir içerik yoğunluğu bulunmuyorsa yüksekliğe minimum bir değer bağlamak biraz anlamsız gibi gözükmekte. Maksimum yükseklik özelliği değeri ise eğer fazlaca içeriğe sahipse bu sefer sığmayıp aşağıya doğru taşıntılar oluşturacaktır. Örneklerde verilmemiş olmasına rağmen eğer bir etiketinizden dışarıya saçıntılar (sığmamış veri) mevcut ise overflow: hidden; deklarasyonu ile çözüme kavuşturulabilir. Bu konu ayrıca anlatılacaktır.


.box5{
max-height: 100px;
}
.box6{
min-height: 200px;
}

Yukarıdaki örnekte .box5 için içindeki paragraf etiketi oldukça uzundur. Stil atamasında ise max-height:100px deklarasyonu ile kısıtlanmış olmasından dolayı paragraf etiketinin sığmayan kısımlar açık mavi ve kırmızı renkli kenarlıkların dışına taşmıştır. .box6 için ise içeriğe göre haddinden fazla yükseklik tanımlanmış olması görüntüyü kötü yönde etkileyecektir. Genel olarak max ve min-heigth özelliklerin kullanımı yukarıdaki örnekte gibidir.

Bir önceki CSS3 ve HTML Dersleri | Padding (Dolgu) Özellikleri konulu yazıma ulaşmak için tıklayınız…

Konu anlatımı;