Membuat 2 Kolom dengan header dan footer

Ini adalah Posting artikel pertama setelah sebelumnya posting sesuatu yang nggak perlu, Yaitu…

Cara membuat 2 kolom dengan header dan footer. Tentu saja Pakai CSS. Pertama kita tulis dulu kode HTML -nya.

<div id=”container”>
<h1> <!– Pakai h1 biar SEO bagus–>
Cara membuat 2 Kolom
</h1>
<div id=”menu”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Tentang</a></li>
<li><a href=”#”>Kerjasma</a></li>
<li><a href=”#”>Apalah</a></li>
<li><a href=”#”>Kontak</a></li>
</ul>
</div>
<div id=”content”>
<h2> <!– Pakai h2 biar SEO bagus–>
Membuat web dengan CSS
</h2>
<p>
Dan bla..bla..bla
</p>
<p>
Ayo donk
</p>
</div>
<div id=”footer”>
Copyright &copy; BlogBintang.com
</div></div>

Selesai HTML kita tulis kode CSS-nya.

/* pakai center supaya setiap element ke tengah */
body{text-align: center;background: #B0BFC2; color: #444;}

/*pakai margin: 0 auto supaya ikut ke tangah */
#container{text-align: left;margin: 0 auto; width: 700px;background: #c00}

a:link{color: #175B7D;}
a:visited{color: #600;}
a:hover, a:active{color: #fff;background: #175B7D;}

/* pakai margin:0 supaya h1 merapat*/
h1{background: #D36832; color: #FFF; padding: 20px; margin: 0; border-bottom: 5px solid #387A9B;}

#menu{float: left; width: 130px; display: inline; margin-left: 20px; padding: 15px 0;}

#menu ul{margin: 0;padding: 0;list-style-type: none;text-align: right;}

#menu li{background: url(header-bullet.gif) no-repeat 100% .4em;padding: 0 10px 5px 0;}

#content {float: left;width: 475px;margin-left: 45px;padding: 15px 0;}

#footer{clear: both;background: #387A9B;color: #fff;padding: 5px 10px; text-align: right; font-size: 80%;}

h2{margin-top: 0;color: #B23B00; font-weight: normal;}

Ingin melihat hasilnya? Buat aja sendiri

Silahkan komen bagi yang ingin mengkritik

Catatan ini ditulis pada BAB Web Design saat berlayar di samudra internet. Jika mau anda dapat meninggalkan komentar, Atau trackback pada halaman ini.

Dan Sebelum Saya tertangkap oleh MARINE sebaiknya anda bookmark dahulu artikel ini

Saya juga memberi kesempatan bagi anda yang ingin menjadi anggota KRU BAJAK LAUT "Blog ini". Bisa bergabung (subscribe) dengan mengklik gambar kecil ini

Atau jika anda lebih suka email...

Klik disini untuk menjadi anggota bajak laut

Sumpah Sebelum anda menjadi Kru: Sekali mengibarkan bendera Bajak Laut maka tidak ada Hal yang tidak mungkin