Tata Letak Situs Satu Kolom Sederhana dalam CSS
Dalam pelajaran ini, kita akan berlatih membuat tata letak situs satu kolom sederhana. Mari, sebagai contoh, buat tata letak seperti ini:
Mari kita mulai implementasinya. Setiap tata letak
biasanya dimulai dengan div umum bernama
wrapper, yang berisi seluruh situs lainnya:
<div id="wrapper">
</div>
Dalam kasus kita, wrapper akan disejajarkan di tengah layar:
#wrapper {
width: 800px;
margin: 50px auto;
}
Itu juga akan memiliki border:
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
Sekarang mari kita buat struktur utama halaman. Itu akan terdiri dari menu dan konten utama - isi:
<div id="wrapper">
<div id="menu">
</div>
<div id="content">
</div>
</div>
Mari tambahkan konten blok kita:
<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>
Sekarang kita bisa menambahkan gaya ke blok kita. Mari tambahkan gaya ke menu:
#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;
}
Dan sekarang tambahkan gaya ke elemen konten:
#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;
}
Sekarang kita bisa menyatukan semua kodenya:
<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;
}
Saran 1
Paling mudah untuk memberikan jarak dari atas ke bawah.
Misalnya, kita memiliki menu dan konten,
dan di antara mereka - ruang kosong. Jelas,
bahwa ruang ini dapat dibuat dengan jarak bawah
dari menu, jarak atas dari konten,
atau pengaruh simultan mereka. Dalam hal ini
lebih baik untuk mengatur jarak bawah ke menu, dan menghilangkan jarak atas
padding dan margin default
untuk h1.
Saran 2
Anak elemen tidak boleh membentuk jarak antara
elemen induk. Misalnya, kita memiliki menu.
Jarak bawah menu ini dapat dibentuk
baik dengan margin div dengan menu, atau margin
tautan. Lebih baik memilih opsi pertama, karena
tautan tidak boleh bertindak melewati kepala
induk.
Saran 3
Misalkan antara dua elemen ada jarak
dan dalam hal ini secara visual tidak ada perbedaan,
apa yang harus dipilih untuk jarak - margin atau padding.
Dalam hal ini pilih margin, karena
justru itulah yang seharusnya membuat jarak antara
elemen.
