Web tasarımında, sayfalarımızın düzenini belirlemek ve öğeleri yerleştirmek için genellikle CSS kullanırız. Bu yazıda, özellikle Height, Width ve Max-width özelliklerini kullanarak sayfalarımızın tasarımını nasıl şekillendirebileceğimizi inceleyeceğiz.
1. Height ve Width Özellikleri:
Bu özellikler, bir HTML öğesinin yüksekliğini (Height) ve genişliğini (Width) belirlememizi sağlar. Örneğin, bir kutu oluşturmak ve bu kutuya belirli bir yükseklik ve genişlik atamak için şu şekilde kullanabiliriz:
.box {
height: 200px;
width: 300px;
background-color: #f0f0f0;
border: 1px solid #ccc;
}
Bu kod, bir sınıfa sahip bir kutu oluşturur ve bu kutuya 200 piksel yükseklik, 300 piksel genişlik, gri bir arka plan rengi ve gri bir kenarlık ekler.
2. Max-width Özelliği:
Max-width özelliği, bir öğenin maksimum genişliğini belirlememize olanak tanır. Örneğin, bir resmin genişliğini belirli bir değerden fazla genişlemesini önlemek için şu şekilde kullanabiliriz:
.img-container {
max-width: 100%;
height: auto;
}
Bu kod, bir resmin içinde bulunduğu bir konteynerin genişliğini, ekranın genişliği kadar genişlemesine izin verir, ancak bu değeri aşmasını önler.
3. Örnek Kullanım: Bir Adaptive (Uyumlu) Kutu:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adaptive Kutu</title>
<style>
.adaptive-box {
max-width: 600px;
width: 100%;
margin: 0 auto;
background-color: #3498db;
color: #fff;
padding: 20px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="adaptive-box">
<h1>CSS Height, Width ve Max-width</h1>
<p>Bu kutu, 600 pikselden fazla genişlemeyecek şekilde tasarlandı. Tarayıcı genişliği küçüldükçe içeriğini adapte edecek.</p>
</div>
</body>
</html>
Bu örnek, bir adaptif kutu oluşturur. Tarayıcı genişliği 600 pikselden fazla olduğunda, kutu maksimum genişliğe ulaşır ve bu noktadan sonra genişlemez.
CSS’de Height, Width ve Max-width özelliklerini kullanarak sayfalarımızı daha iyi kontrol edebilir ve tasarımımızı daha esnek ve kullanıcı dostu hale getirebiliriz.