27 Jun 2009
yudiacro
2,774 views
Banyak sekali tutorial cara membuat layout 3 kolom, namun kebanyakan darinya malah membingungkan kita. Ke-tidakkonsisten-an sering terjadi apabila layout tersebut dibuka di berbagai jenis browser maupun di berbagai resolusi layar. Kalau anda belum menemukan cara yang baik untuk membuat layout 3 kolom, anda bisa menggunakan teknik-teknik di bawah ini.
The Blueprint
Pertama kita harus tahu dan mengerti pondasi dari layout yang akan kita buat. Hal ini menjaga agar tidak ‘tersesat’ di kode-kode kita sendiri dan memudahkan kita untuk debugging nantinya. Berikut ini adalah struktur layout kita dalam XHTML:
<div id="container">
<div id="header"></div>
<div id="sideleft"></div>
<div id="middle"></div>
<div id="sideright"></div>
<div id="footer"></div>
</div>
Dan di bawah ini adalah struktur layout kita dalam CSS:
body { }
#container { }
#header { }
#sideleft { }
#middle { }
#sideright { }
#footer { }
Ok kita sudah punya cetak birunya, sederhana bukan? Strukturnya mudah dipahami begitu kita melihatnya. Selanjutnya kita akan bangun arsitektur layout kita berdasarkan cetak biru diatas.
The Architecture
Buka text editor anda, lalu buatlah file baru. Copy dan paste kode-kode berikut ke dalamnya, lalu save dengan nama layout.html (nama terserah).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>How to Build 3 Column Layout in A Good Way</title>
<link rel="stylesheet" href="layout.css" type="text/css" media="screen" />
</head>
<body>
<div id="container">
<div id="header">
<h2>This is Header</h2>
</div>
<div id="sideleft">
<h3>Title Menu</h3>
<ul>
<li><a href="#" title="Menu">Menu</a></li>
<li><a href="#" title="Menu">Menu</a></li>
<li><a href="#" title="Menu">Menu</a></li>
<li><a href="#" title="Menu">Menu</a></li>
</ul>
</div>
<div id="middle">
<h1>This is Title</h1>
<p>Paragraph goes here..</p>
<h2>This is Sub Title</h2>
<p>Paragraph goes here..</p>
<h2>This is Sub Title</h2>
<p>Paragraph goes here..</p>
</div>
<div id="sideright">
<h3>Title Menu</h3>
<ul>
<li><a href="#" title="Menu">Menu</a></li>
<li><a href="#" title="Menu">Menu</a></li>
<li><a href="#" title="Menu">Menu</a></li>
<li><a href="#" title="Menu">Menu</a></li>
</ul>
</div>
<div id="footer">
<h4>This is Footer</h4>
</div>
</div>
</body>
</html>
Dengan text editor anda, buatlah 1 file baru lagi. Copy dan paste kode-kode berikut ke dalamnya, lalu save dengan nama layout.css. Letakkan kedua file pada folder yang sama.
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}#container {
width: 900px; /* Set the value to fit your needs. */
margin: auto;
}#header {
height: 100px; /* Set the value to fit your needs. */
border: 1px solid #000;
clear: both;
}#sideleft {
float: left;
width: 170px; /* Set the value to fit your needs. */
margin: 10px 0;
padding: 10px;
border: 1px solid #000;
}#middle {
float: left;
width: 474px; /* Set the value to fit your needs. */
margin: 10px;
padding: 10px;
border: 1px solid #000;
}#sideright {
float: right;
width: 170px; /* Set the value to fit your needs. */
margin: 10px 0;
padding: 10px;
border: 1px solid #000;
}#footer {
height: 40px; /* Set the value to fit your needs. */
border: 1px solid #000;
clear: both;
}
Lalu buka file layout.html dengan menggunakan browser.
Kita akan mendapatkan hasil mirip gambar berikut:
Yap, hasil sederhana ini adalah pondasi layout 3 kolom yang bisa anda jadikan basis untuk membangun layout yang lebih kompleks. Selamat coding!
