Unsecured debt consolidation loan


Monday, 8 March 2010

Membuat Layout Web 3 Kolom dengan CSS

Udah lama neh gak buat artikel di blog ini. Abis lagi sibuk ama ulangan tengah semester dan produk ebookku. Tapi akhirnya sempet juga untuk buat neh artikel.

Artikel kali ini berhubungan ama CSS, yaitu membuat layout web 3 kolom. Mungkin dah banyak para blogger yang udah tau caranya, tapi gpplah saya post aja, daripada gak ada update untuk ini blog. Awalnya saya dapet pertanyaan ini dari salah satu pengunjung blog ini di artikel ini. Tapi saya belum tau jawabannya jadi harus melakukan "eksperimen" dulu deh dengan kode-kode.

Setelah selesai bereksperimen, akhirnya saya dapet kode-kode berikut ini.


Pertama adalah kode untuk file index.html, berikut adalah source kodenya.

<html>
<head>
<title>Coba Buat LayOut Web 3 Kolom</title>
<link rel="stylesheet" href="layout.css" type="text/css" media="screen" />
</head>
<body>
<div id="container">
<div id="header">
<h2>Ini Bagian Header</h2>
</div>

<div id="kiri">
<h3>Menu 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="tengah">
<h1>Judulnya bro 1</h1>
<p>Paragrafnya monggo diisi</p>
<h2>Judulnya bro 2</h2>
<p>Paragrafnya monggo diisi</p>
<h2>Judulnya bro 3</h2>
<p>Paragrafnya monggo diisi</p>
</div>

<div id="kanan">
<h3>Menu 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>Ini Footernya</h4>
</div>

</div>
</body>
</html>

Pada file di atas kita mempunyai 6 buah id, yaitu container, header, kiri, tengah, kanan dan footer. Berikutnya kita akan membuat file yang berisi properti dari tiap-tiap id. Berikut adalah source kode untuk propertinya.

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;
}

#kiri {
float: left;
width: 170px;
margin: 10px 0;
padding: 10px;
border: 1px solid #000;
background: #00FF00;
}

#tengah {
float: left;
width: 500px;
margin: 10px;
padding: 10px;
border: 1px solid #000;
background: #3300FF;
}

#kanan {
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;
}

Simpan dengan nama layout.css di dalam folder yang sama dengan file layout.html. Coba lihat hasilnya dari browser maka akan sama nampak seperti gambar berikut.


PENJELASAN SCRIPT
Karena kita menginginkan 3 buah kolom berurut menjadi satu, maka kita bisa mengisikan floatnya dengan left. Jadi secara otomatis kolom akan terbuat secara berurutan dengan ukuran yang sudah anda tentukan.

Anda bisa mengedit nilai/lebar dari kolomnya sesuai dengan keinginan anda, namun ingat jika seluruh lebar kolom dijumlahkan dengan margin dan padding maka jumlahnya harus 900px atau kurang. Jangan melebihi 900px karena kita menset nilai id containernya dengan 900px, kalau melebihi maka kolom akan pindah atau turun ke bagian bawah kolom lainnya.

Oke selamat mencoba... Jangan lupa komentarnya yah...

9 comments:

untuk membuat templet seperti milik mas ini gimana ya?

wah kren ne sob tapi biasanya saya cari cara yg simpel aja
pake aplikasi yg lebih gampang tigal atur sana sini jadi dech hehe....over all kren saya tertarik untuk mencobanya
sukses sobat!

thanks broderr infonya, nambah ilmu gw nih..mau share info juga nih broo...
belajar cari uang di internet dan dapat e-book gratis
gampang kok caranya dan nggak pake biaya,hanya koneksi internet tentunya.
inilah bisnis yang bisa di kerjakan dengan sambilan,sambil chatting,facebookan,dan juga twetteran,bisnisnya adalah ptc,dan yang blm tahu apa itu ptc silahkan di download e-booknya.

makasi infonya om. . .
sangat membantu sekali. .
http://stwidyanas.co.cc
http://cacig.com

Mantaaaaaap!!!
Tapi aku masih binung!!!!

Post a Comment

Enter your email address:

Delivered by FeedBurner