membuat layout website dengan css

membuat layout website dengan css.Postingan kali ini lebih ke melanjutkan postingan saya sebelumnya yaitu belajar kode css.Dalam membuat layout dengan css, kita bisa membuat style yang terpisah atau bisa juga di gabungkan dalam satu halaman html atau php.

kali ini kita belajar membuat layout yang cssnya bergabung dengan html dan jika anda mau membuat terpisah cukup copy css dan buat file cssnya.

sekarang lanjut ke topik bahasan kali ini yaitu membuat layout dengan 3 kolom yaitu kiri,tengah (sebagai konten) dan kanan.
Langsung saja ya, berikut kode lengkapnya, silahkan sobat edit sendiri lebar kiri,tengah dan kanannya, atau header dan footernya.
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Belajar layout dengan css</title>
<style type="text/css">

body{
margin:0;
padding:0;
line-height: 1.5em;
}

b{font-size: 110%;}
em{color: red;}

#maincontainer{
width: 840px;
margin: 0 auto;

#topsection{
background: #EAEAEA;
height: 90px;
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin: 0 190px 0 180px;
}

#leftcolumn{
float: left;
width: 180px;
margin-left: -840px;
background: #C8FC98;
}

#rightcolumn{
float: left;
width: 190px;
margin-left: -190px;
background: #FDE95E;
}

#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF80;
}

.innertube{
margin: 10px;
margin-top: 0;
}

</style>


</head>
<body>
<div id="maincontainer">

<div id="topsection"><div class="innertube"><h1>judul yaa</h1></div></div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube">
 ini kontentnya
</div>
</div>
</div>

<div id="leftcolumn">
<div class="innertube">
 ini kolom kiri
</div>
</div>

<div id="rightcolumn">
<div class="innertube">
ini kolom kanan
</div>
</div>

<div id="footer"><a href="http://thizan.blogspot.com/">Top dan Unik</a></div>

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

seperti itulah layout secara kasarnya, anda bisa mengembangkannya menjadi lebih baik. misalkan memberi gambar pada header dan footer di beri efek gradien biar lebih halus dll.