Setelah beberapa bulan saya mempelajari tengtang CSS, kini saya berani menshare apa yang saya bisa dan sudah saya praktekkan dalam membuat tampilan layout 3 kolom. Kebetulan saya sedang mengelola situs web berbasis e-commerce.
Untuk lebih jelasnya, silahkan aja langsung tengok tampilannya di disini
Ini merupakan contoh kode html standar sebagai gambaran:
<html>
<head>
<title>Three Column CSS Layout</title>
<link rel="stylesheet" href="layout.css" type="text/css" media="screen" />
</head>
<body>
<div id="container">
<div id="header">
<h2>Ini Bagian Atas (Header)</h2>
</div>
<div id="sidebar_left">
<h3>Sidebar Sebelah Kiri</h3>
<ul>
<li><a href="#" title="Menu">Menu 1</a></li>
<li><a href="#" title="Menu">Menu 2</a></li>
<li><a href="#" title="Menu">Menu 3</a></li>
<li><a href="#" title="Menu">Menu 4</a></li>
</ul>
</div>
<div id="center">
<h1>Judul Posting</h1>
<p>Isi paragraf dari judul</p>
<h2>Judul Posting 2</h2>
<p>Isi paragraf dari judul 2</p>
<h2>Judul Posting 3</h2>
<p>Isi paragraf dari judul 3</p>
</div>
<div id="sidebar_right">
<h3>Judul Sidebar Sebelah Kanan</h3>
<ul>
<li><a href="#" title="Menu">Menu 1</a></li>
<li><a href="#" title="Menu">Menu 2</a></li>
<li><a href="#" title="Menu">Menu 3</a></li>
<li><a href="#" title="Menu">Menu 4</a></li>
</ul>
</div>
<div id="footer">
<h4>Bagian Bawah (footer)</h4>
</div>
</div>
</body>
</html>
Coba pada file html diatas, terdapat 6 buah id, yaitu container, header, sidebar_left, center, sidebar_right dan footer. Setelah itu kita buat kode CSS-nya, sebagai berikut:
body {
font-family: Verdana;
margin: 0;
padding: 0;
}
#container {
width: 900px;
margin: auto;
border: 1px solid #000;
background: #000000;
}
#header {
height: 100px;
border: 1px solid #000;
background: #FF0000;
}
#sidebar_left {
float: left;
width: 170px;
margin: 10px 0;
padding: 10px;
border: 1px solid #000;
background: #00FF00;
}
#center {
float: left;
width: 500px;
margin: 10px;
padding: 10px;
border: 1px solid #000;
background: #3300FF;
}
#sidebar_right {
float: left;
width: 170px;
margin: 10px 0;
padding: 10px;
border: 1px solid #000;
background: #00FF00;
}
#footer {
height: 40px;
border: 1px solid #000;
clear: both;
background: #FF0000;
}
Sampai disini dulu, tunggu tutorial berikutnya. Contoh hasil seperti ini:
Baimana?? anda sudah mencobanya??
8 Comments
mantap tutorialnya
ReplyDeleteFungsi umum untuk mengantisipasi padding di IE yang dihitung kelipatannya, jadi fungsi 'clear both' adalah untuk menghapus padding yang tidak berfungsi kembali.
ReplyDeleteIni yang saya cari kang.. makasih ya... tutorialnya sangat membantu
ReplyDeleteini klo untuk tumblr bisa juga mas???
ReplyDeleteterima kasih banyak gan ..,
ReplyDeletetutorialnya sangat membantu
jangan lupa kunjungi balik ya.
Bingung ya law pemula
ReplyDeletegan mau nanya,
ReplyDeleteitu setelah saya kasih link di bagian sidebar trus saya klik, yg saya mau hanya berubah di bagian kontent saja, itu kasih target di link nya gmna ya?
tolong di contohin dong....tq
masih sedikit bingung tapi mencoba terus ni om
ReplyDeleteterima kasih tutornya