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??

Kategori Posting Terkait



Comments :

8 komentar to “Membuat Kode CSS Template 3 Column Layout dalam Website”

fashion clothes online mengatakan... on 

Great post and very useful code! The info is very open and very clear explanation of issues. Your website is very useful. Thanks for sharing this post.

hariansobek mengatakan... on 

mantap tutorialnya

Makara mengatakan... on 

bos.. mau tanya maksudNya "clear : both;"

pada bagian :

#footer {
height: 40px;
border: 1px solid #000;
clear: both;
background: #FF0000;
}

Uka Fahrurosid mengatakan... on 

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

Web Design In Toronto mengatakan... on 

Thnx for the deal with! However yeah Thnkx for spending the time to discuss this, I feel strongly about it and love

studying extra on this topic. If attainable, as you develop into expertise, would you mind updating your blog with

more particulars? It is highly helpful for me. Huge thumb up for this weblog publish!

d-quote mengatakan... on 

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

Anonim mengatakan... on 

siang, saya udah coba mas, tp hasilnya beda
menu yg dikanan ada di bawah menu kiri
>> http://dhodhom.net/

Netpreneur Blog Indonesia mengatakan... on 

Perhatikan width-nya...
Sedikit demi sdikit nanti akan paham.

  • Update Terbaru
  • Info Menarik
  • Networking



Poskan Komentar

 

IP Technorati => RNUGGKZFF7CR

About Me - Administrator

Admin Netpreneur Blog Indonesia - Ukafahrurosid.com
UKA FAHRUROSID
a 25 years old. I've completed college degree from Education University of Indonesia (UPI)-Bandung, West java, Indonesia in 2011.
Learn on this blog since 10th of November 2008. Now, just to innovate to make Netpreneur Blog Indonesia has many visitors, so my main goal in blogging can be achieved is to optimize blogs as a means of promotion, income and relationships. [ Read More ]

PageRank
SEO Stats powered by 

MyPagerank.Net
Google PageRank Checker Powered by  

MyPagerank.Net
free search engine submission
W3 Directory - the World 

Wide Web Directory
Online Marketing Blogarama - The Blog 

Directory
Site Meter
Top Marketing Sites
Uka Fahrurosid - Find me on Bloggers.com PlanetBlog - Komunitas Blog Indonesia
Fav This With Technorati Business Blogs - Blog Rankings
Blog Directory for the Philippines Business blogs
Real Time Web Analytics Clicky Blog Directory & 

Search engine
Globe of 

Blog
Kostenlose Backlinks bei http://www.backlink-clever.de Active 

Search Results
blog-

indonesia.com
what is my ip address?
Business
Business & Finance - Top Blogs Philippines

Free Directory List



Powered by 

Mysiterank






Ping your blog, website, or RSS 

feed for Free
Text Back Link Exchange.com
free search engine submission
RNUGGKZFF7CR