BLOG BINTANG

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

Pesan Sponsor

Mengapa Blog bintang?