Friday, August 26, 2011

membuat 2 kolom dengan header dan footer


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

No comments:

Post a Comment

Cara Install Windows ke Dalam USB FlashDisk atau Harddisk Eksterna

Cara Install Windows ke Dalam USB FlashDisk atau Harddisk Eksterna Email This   BlogThis!   Share to Twitter   Share to Facebook ...