Membuat Kode CSS Template 3 Column Layout dalam Website
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??
Tags: CSS
Subscribe to:
Post Comments (Atom)
Tinggalkan Komentar
8 Respones to "Membuat Kode CSS Template 3 Column Layout dalam Website"
mantap tutorialnya
8:49 PM
Fungsi umum untuk mengantisipasi padding di IE yang dihitung kelipatannya, jadi fungsi 'clear both' adalah untuk menghapus padding yang tidak berfungsi kembali.
Ini yang saya cari kang.. makasih ya... tutorialnya sangat membantu
11:00 PM
ini klo untuk tumblr bisa juga mas???
9:04 PM
terima kasih banyak gan ..,
tutorialnya sangat membantu
jangan lupa kunjungi balik ya.
6:29 PM
Bingung ya law pemula
10:42 PM
gan mau nanya,
itu 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
10:08 AM
masih sedikit bingung tapi mencoba terus ni om
terima kasih tutornya
4:43 PM
Post a Comment