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 Komentar
mantap tutorialnya
BalasHapusFungsi umum untuk mengantisipasi padding di IE yang dihitung kelipatannya, jadi fungsi 'clear both' adalah untuk menghapus padding yang tidak berfungsi kembali.
BalasHapusIni yang saya cari kang.. makasih ya... tutorialnya sangat membantu
BalasHapusini klo untuk tumblr bisa juga mas???
BalasHapusterima kasih banyak gan ..,
BalasHapustutorialnya sangat membantu
jangan lupa kunjungi balik ya.
Bingung ya law pemula
BalasHapusgan mau nanya,
BalasHapusitu 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
BalasHapusterima kasih tutornya