CSS'te Basit Tek Sütunlu Web Site Düzenleri
Bu derde, basit tek sütunlu web site düzenleri oluşturma alıştırması yapacağız. Örneğin, şöyle bir düzen yapalım:
Uygulamaya geçelim. Her düzen genellikle, sitenin geri kalanını içeren
wrapper adlı genel bir div ile başlar:
<div id="wrapper">
</div>
Bizim durumumuzda, wrapper ekranın ortasına hizalanacak:
#wrapper {
width: 800px;
margin: 50px auto;
}
Ayrıca bir kenarlığı olacak:
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
Şimdi sayfanın ana yapısını yapalım. Bir menü ve ana içerikten oluşacak:
<div id="wrapper">
<div id="menu">
</div>
<div id="content">
</div>
</div>
Bloklarımızın içeriğini ekleyelim:
<div id="wrapper">
<div id="menu">
<a href="#">link text 1</a>
<a href="#" class="active">link text 2</a>
<a href="#">link text 3</a>
<a href="#">link text 4</a>
<a href="#">link text 5</a>
</div>
<div id="content">
<h1>Proin tristique lorem</h1>
<p>
...
</p>
<p>
...
</p>
</div>
</div>
Artık bloklarımıza stiller ekleyebiliriz. Menüye stil ekleyelim:
#menu {
display: flex;
justify-content: center;
margin-bottom: 20px;
background-color: #484848;
}
#menu a {
margin: 0 5px;
padding: 15px 25px;
text-decoration: none;
color: #fff;
font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
color: #484848;
background-color: #fff;
}
Şimdi de içerik öğelerine stiller ekleyelim:
#content {
padding: 0 30px 20px;
}
#content h1 {
text-align: center;
margin-top: 0;
margin-bottom: 10px;
}
#content p {
padding: 0 10px;
margin-bottom: 5px;
font: 18px/1.3 Arial;
text-align: justify;
}
Şimdi tüm kodu bir araya getirebiliriz:
<div id="wrapper">
<div id="menu">
<a href="#">link text 1</a>
<a href="#" class="active">link text 2</a>
<a href="#">link text 3</a>
<a href="#">link text 4</a>
<a href="#">link text 5</a>
</div>
<div id="content">
<h1>Proin tristique lorem</h1>
<p>
...
</p>
<p>
...
</p>
</div>
</div>
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
#menu {
display: flex;
justify-content: center;
margin-bottom: 20px;
background-color: #484848;
}
#menu a {
margin: 0 5px;
padding: 15px 25px;
text-decoration: none;
color: #fff;
font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
color: #484848;
background-color: #fff;
}
#content {
padding: 0 30px 20px;
}
#content h1 {
text-align: center;
margin-top: 0;
margin-bottom: 10px;
}
#content p {
padding: 0 10px;
margin-bottom: 5px;
font: 18px/1.3 Arial;
text-align: justify;
}
İpucu 1
En uygun olanı, yukarıdan aşağıya boşluk vermektir.
Örneğin, bir menümüz ve içeriğimiz var,
ve aralarında boş alan var. Açıkçası,
bu alan menünün alt boşluğu ile,
içeriğin üst boşluğu ile,
veya aynı anda ikisinin etkisi ile yapılabilir. Bu durumda
menüye alt boşluk vermek daha iyidir, ve içeriğin
h1 için varsayılan olan
padding ve margin değerlerini kaldırmak.
İpucu 2
Alt öğeler, üst öğeler arasında boşluk oluşturmamalıdır.
Örneğin, bir menümüz var.
Bu menünün alt boşluğu
ya menü div'inin margin'i ile, ya da bağlantıların
margin'i ile oluşturulabilir.
İlk seçeneği seçmek daha iyidir, çünkü
bağlantılar üst öğenin üzerinden etki etmemelidir.
İpucu 3
İki öğe arasında bir boşluk olduğunu
ve bu durumda görsel olarak,
boşluk için ne seçeceğimizin - margin mi yoksa padding mi -
bir fark olmadığını varsayalım.
Bu durumda margin'i seçin, çünkü
öğeler arasında boşluk oluşturması gereken odur.
