Berikut ini adalah tutorial tentang cara menggunakan CSS untuk membuat layout dua kolom sederhana, layout ini terdiri dari sebuah header, sebuah navigasi horizontal, kolom konten utama, sidebar, dan footer.
Struktur dasar
<div id="wrapper">
<div id="header"></div>
<div id="navigation"></div>
<div id="main"></div>
<div id="sidebar"></div>
<div id="footer"></div>
</div>
Setelah itu, coba isi beberapa konten pada tiap bagian
<div id="wrapper">
<div id="header"><h1>Heading</h1></div>
<div id="navigation">
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
...
</ul>
</div>
<div id="main">
<h2>Column 1</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
</div>
<div id="sidebar">
<h2>Column 2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
...
</ul>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
Sekarang kita telah menyelesaikan dokumen htmlnya, selanjutnya gunakan CSS untuk mengatur tata letaknya
Mengatur elemen body dan html
Untuk membuat konten mencapai tepi jendela browser, kita harus menetapkan margin dan padding dari elemen body dan html ke nol.
body,
html {
margin:0;
padding:0;
color:#000;
background:#dadada;
}
Membuat halaman page di tengah
Selanjutnya, kita perlu menspesifikasikan lebar dan margin dari #wrapper, metode untuk membuat konten di tengah yaitu dengan mengatur margin kiri dan margin kanan menjadi auto.
#wrapper {
width:760px;
margin:0 auto;
background:#FAFAD2;
}
2 Kolom
Untuk membuat 2 kolom (#main dan #sidebar), kita gunakan float untuk mengatur tata letaknya, dan tentukan lebar kolom dari elemen-elemennya
#main {
float:left;
width:490px;
background:#90EE90;
padding:10px;
}
#sidebar {
float:right;
width:230px;
background:#FAFAD2;
padding:10px;
}
Membuat navigasi horizontal
navigation terbentuk dengan unordered list, agar tidak terlihat seperti daftar list, kita harus sedikit merombaknya
#navigation ul {
margin:0;
padding:0;
list-style:none;
}
#navigation li {
display:inline;
margin:0;
padding:0;
}
Hasil akhir
hasil akhir dari css nya akan terlihat seperti ini :
body,
html {
margin:0;
padding:0;
color:#000;
background:#dadada;
}
#header {
padding:5px 10px;
background:#20B2AA;
}
#wrapper {
width:760px;
margin:0 auto;
background:#FAFAD2;
}
#main {
float:left;
width:490px;
background:#90EE90;
padding:10px;
}
#sidebar {
float:right;
width:230px;
background:#FAFAD2;
padding:10px;
}
#footer {
clear:both;
background:#D8BFD8;
padding:5px 10px;
}
#navigation {
padding:5px 10px;
background:#40E0D0;
}
#navigation ul {
margin:0;
padding:0;
list-style:none;
}
#navigation li {
display:inline;
margin:0;
padding:0;
}
Contoh diatas merupakan contoh sederhana untuk membuat layout dengan 2 kolom, selanjutnya bisa dikembangkan lagi untuk layout yang lebih baik
No Comments
Leave a comment Cancel