21 Jun 2009 
yudiacro 
528 views 
Di bawah ini akan di uraikan bagaimana cara membuat layout 2 kolom. Silahkan ubah paramater-parameter nilai pada CSS-nya sesuai kebutuhan anda.
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="content"></div>
<div id="sidebar"></div>
<div id="footer"></div>
</div>
Dan di bawah ini adalah struktur layout kita dalam CSS:
body { }
#container { }
#header { }
#content { }
#sidebar { }
#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 2 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">
<h1>This is Header</h1>
</div>
<div id="content">
<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="sidebar">
<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;
}#content {
float: left;
width: 544px; /* Set the value to fit your needs. */
margin: 10px 0;
padding: 10px;
border: 1px solid #000;
}#sidebar {
float: right;
width: 300px; /* 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:
Lho kok cuma ini? Haha.. sesuai judulnya, ini adalah pondasi layout 2 kolom yang bisa anda jadikan basis untuk membangun layout yang lebih kompleks. Selamat coding!
tambah ilmu lagi neh… maen disini kayaknya lebih ada manfaatnya, daripada ke….??????
[Reply]
yudiacro Reply:
20 Nov 2009 at 14:30
@trieand, thanks :D
keren web nya… artikel x juga bagus
[Reply]
yudiacro Reply:
20 Nov 2009 at 14:33
@bank-je, terima kasih atas kunjungannya Mas.