Membuat Layout 3 kolom dengan CSS3

Oke guys ane mau share buat yangPengumuman Calon Asisten Praktikum Basisdata. Read more ... » butuh caraMenjalankan Aplikasi Android di Windows. Read more ... » Membuat Layout 3 Kolom denganTUGAS STRUKTUR DATA KELAS SAMI. Read more ... » CSS3, monggo dicek guys :

Pertama buka text editor apapun, lalu copy paste aja source berikut gan :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Layout 3 Kolom</title>
<style type="text/css">
body{
width:900px;
margin:auto;
}
#header{
width:auto;
margin-top:5px;
height:100px;
padding:5px;
-moz-border-radius:15px;
background:#9999FF;
border:#9966CC solid 1px;
}
#leftbar{
padding:5px;
height:100px;
width:200px;
margin-right:5px;
float:left;
-moz-border-radius:15px;
background:#9933FF;
}
#content{
padding:5px;
height:100px;
float:left;
width:460px;
-moz-border-radius:15px;
background:#999999;
}
#rightbar{
padding:5px;
float:right;
height:100px;
width:200px;
-moz-border-radius:15px;
background:#9933FF;
}
#footer{
padding:5px;
height:50px;
text-align:center;
background:#CCFFFF;
clear:both;
-moz-border-radius:15px;
}
#kosong{
height:5px;
clear:both;
}
</style>
</head>

<body>
<div id="header"><h1>Ini Header </div>
<div id="kosong"></div>
<div id="leftbar">Panel kiri</div>
<div id="content">Konten</div>
<div id="rightbar">Panel kanan</div>
<div id="kosong"></div>
<div id="footer">&copy; 2011 <a href="http://burhanudin.web.id">burhanudin</a></div>
</body>
</html>

Kalo berhasil hasilnya gini ya gan :

layout 3 kolom css3

layout 3 kolom css3

NB:

Css3 tersebut hanya bisa dijalankan di Mozilla Firefox, karena menggunakan prefik (-moz), misal pengen ditambahkan agar support Chrome / opera coba tambahin ini gan :

-webkit-border-radius:15px;
-o-border-radius:15px;

Selamat Mencoba by burhanudin

Posted in Html, Programing and tagged , , , , .