Saya akan mulai proyek praktek kami dengan asumsi bahwa ada tata letak kolom yang khas. Namun, sebelum saya mempresentasikan proyek ini secara langsung dan warna-warni, saya ingin menunjukkan secara konkret bagaimana cara mengimplementasikan tata letak kolom sendiri. Fokus kali ini akan tertuju pada tata letak dua dan tiga kolom, karena sebagian besar situs web masih didasarkan pada tata letak ini.
Yang menjadi klasik dalam desain web tentu saja adalah dua kolom. Pada bagian jendela kiri, biasanya menampilkan navigasi, sedangkan di kolom kanan menampilkan konten sebenarnya. Terkait dengan blog, perilaku ini sebenarnya mengalami beberapa perubahan. Sebenarnya, di banyak blog sekarang menampilkan navigasi atau iklan di sebelah kanan, sementara konten sebenarnya ditampilkan di sebelah kiri.
Jenis aplikasi semacam ini dapat diimplementasikan dengan sangat mudah menggunakan CSS. Faktanya, dua kolom adalah bentuk tata letak yang paling sederhana.
Pada contoh berikutnya, saya akan menunjukkan dua kolom yang menggunakan nilai persentase absolut.
Berikut contoh lengkapnya:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
#nav {
position: absolute;
left: 0;
margin: 0;
width: 20%;
background-color:#66CCCC;
}
#main {
margin: 0;
margin-left: 20%;
width: 80%;
background-color:#6666CC;
}
</style>
</head>
<body>
<div id="header">Layout dengan Posisi Absolut</div>
<div id="nav">Navigasi</div>
<div id="main">Ini adalah area konten</div>
<div id="footer">Di sini terdapat informasi hak cipta.</div>
</body>
</html>Dan inilah tampilannya di browser:
Anda sebenarnya dapat dengan mudah memindahkan kolom kiri ke kanan. Sesuaikan petunjuk berikut:
• Pada #nav, ubah nilai dari left: 0 menjadi right: 0.
• Pada #main, ubah margin-left menjadi margin-right.
Setelah perubahan disimpan, hasil yang diinginkan akan terlihat.
Namun, tata letak yang ditunjukkan berdasarkan posisi absolut memiliki sebuah masalah: saat konten di kolom kiri semakin panjang, akan melampaui area kaki.
Hal ini terjadi karena elemen yang diposisikan secara absolut sebenarnya tidak "mengosongkan tempat". Masalah ini bisa dihindari dengan menambahkan konten yang sesuai di area utama yang lebih panjang daripada di kolom kiri.
Oleh karena itu, anda sebaiknya hanya menggunakan jenis tata letak ini jika anda yakin bahwa area utama benar-benar lebih tinggi dari kolom kiri (atau kanan).
Dua Kolom dengan Float
Problem yang muncul pada contoh sebelumnya dengan tumpang tindih di area kaki dapat diatasi dengan menggunakan sifat float. Berikut adalah sintaks yang telah diubah:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
#nav {
float: left;
margin: 0;
width: 20%;
background-color:#66CCCC;
border: 0;
}
#main {
margin: 0;
float: left;
border: 0;
background-color:#6666CC;
width: 80%;
}
#footer {
clear: both;
}
</style>
</head>
<body>
<div id="header">Layout dengan Posisi Absolut</div>
<div id="nav">Area Navigasi</div>
<div id="main">Ini adalah area konten</div>
<div id="footer">Di sini terdapat informasi hak cipta.</div>
</body>
</html>Di sini kedua kolom diberi sifat float. Sehingga kolom sekarang disusun berdampingan.
Kolom kiri diberi lebar 20 persen. Perhatikan terutama bahwa elemen yang diposisikan menggunakan float selalu membutuhkan spesifikasi lebar.
Area konten sebenarnya diberi lebar 80 persen. Area ini juga diposisikan menggunakan float: left. Dengan begitu, area ini akan ditampilkan di sebelah kolom kiri.
Untuk memastikan bahwa area kaki selalu berada di bagian bawah jendela – di bawah kolom-kolom tersebut – gunakan sintaks berikut:
#footer {
clear: both;
}
Saya telah menunjukkan kemungkinan membuat kelas khusus untuk variasi ini sebelumnya.
Tiga Kolom dengan Float
Tiga kolom juga merupakan pilihan yang populer dalam desain web. Pembagian tipikalnya adalah sebagai berikut:
• Kolom kiri berisi navigasi.
• Kolom tengah berisi konten sebenarnya.
• Di sebelah kanan ditampilkan informasi tambahan atau iklan.
Berikut adalah contoh tiga kolom fleksibel. Sintaksnya - seperti yang akan Anda lihat segera - sangat mirip dengan tata letak dua kolom yang telah ditunjukkan sebelumnya. Namun, sekarang ada area tambahan right yang akhirnya mewakili kolom jendela sebelah kanan.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
#main, #right {
margin: 0;
border: 0;
padding:0;
}
#nav {
float: left;
margin: 0;
width: 20%;
background-color:#66CCCC;
border: 0;
}
#main {
margin: 0;
float: left;
border: 0;
background-color:#6666CC;
width: 60%;
}
#right {
float: right;
width: 20%;
background-color:#6699FF;
}
#footer {
clear: both;
} </style>
</head>
<body>
<div id="header">Layout dengan Pemosisian Absolut</div>
<div id="nav">Area Navigasi</div>
<div id="main">Ini adalah area konten</div>
<div id="right">Ini adalah kolom kanan</div>
<div id="footer">Di sini berisi Informasi Hak Cipta.</div>
</body>
</html>
Ruangan baru diberi lebar 20 persen. Jadi, pembagian menjadi sebagai berikut:
• Kolom kiri dan kanan masing-masing mengambil 20 persen dari area tampilan yang tersedia.
• Kolom tengah memiliki lebar 60 persen.
Dengan sintaks yang ditunjukkan, area right sebenarnya ditampilkan di sebelah kanan.
Sintaks ini fleksibel dalam hal ini. Anda juga bisa menyesuaikan area main sebagai berikut:
#main {
margin: 0;
float: right;
border: 0;
background-color:#6666CC;
width: 60%;
}
Di sini float diatur ke right. Dengan demikian, area right bergerak ke kiri.
Anda telah melihat dalam tutorial ini betapa mudahnya mendefinisikan tata letak dasar berdasarkan float. Pengetahuan ini sekarang menjadi dasar untuk membangun sebuah situs web. Pada tutorial berikutnya, sebuah situs web akan dibangun langkah demi langkah, dimulai dari kerangka dasar.
