BBM : D55 CB 98A
WA : 0853 2023 77xx
info@frosid.com

Membuat Kode CSS Template 3 Column Layout dalam Website



CSS Logo 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:
3 column css layout


Baimana?? anda sudah mencobanya??

Baca Juga Artikel Terkait







Tinggalkan Komentar



8 Respones to "Membuat Kode CSS Template 3 Column Layout dalam Website"

hariansobek said...

mantap tutorialnya


8:49 PM
Fahro said...

Fungsi umum untuk mengantisipasi padding di IE yang dihitung kelipatannya, jadi fungsi 'clear both' adalah untuk menghapus padding yang tidak berfungsi kembali.

d-quote said...

Ini yang saya cari kang.. makasih ya... tutorialnya sangat membantu


11:00 PM
Gagagoez said...

ini klo untuk tumblr bisa juga mas???


9:04 PM
4gamers said...

terima kasih banyak gan ..,
tutorialnya sangat membantu
jangan lupa kunjungi balik ya.


6:29 PM
nens said...

Bingung ya law pemula


10:42 PM
Anonymous said...

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
paket karimunjawa said...

masih sedikit bingung tapi mencoba terus ni om
terima kasih tutornya


4:43 PM

Post a Comment

Previous Article Next Article
Home