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

Artikel Terkait

  1. Belajar membuat CSS dengan cara mudah
  2. Membuat tanda tangan digital dengan mudah
  3. Membuat Kontak Form dengan PHP
  4. Cara Menghemat Bandwdith HABIS-HABISAN dari sisi website
  5. Design HTML dengan CSS 3
  6. Membuat Film 3d (6 Menit) selama 2 tahun
  7. Puisi Kahlil Gibran Tentang Cinta
  8. Commentluv takluk di tangan feedburner

Ingin artikel seperti di Atas dikirim ke emailmu. Mengapa anda tidak berlangganan RSS kami. Dan Ini Gratis.

Kalau kamu suka BANGET artikel diatas, coba deh share ke teman-temanmu di situs berikut:


Postingan "Membuat 2 Kolom dengan header dan footer" ditempatkan pada kategori Web Design, Dengan menggunakan kata kunci sebagai berikut footer,  header,  html,  Web Design, 

11 Responses to “Membuat 2 Kolom dengan header dan footer”

  1. mashengky says:
    October 6, 2008 at 7:17 pm

    kasih dong contoh yg udah jadi mas.. spy ada gambaran gitu

  2. admin says:
    October 6, 2008 at 11:55 pm

    Lah buat apa ada gambar, kan bisa dipraktekkin sendiri

  3. Belajar membuat CSS dengan cara mudah says:
    August 11, 2009 at 10:33 am

    [...] Cara bintang dulu sama persis seperti diatas juga. Tapi nggak langsung buka web, melainkan melihat kode CSS theme wordpress (self hosting). Bintang pelajari bagaimana membuat CSS kok bisa sampai seperti itu. Jika ingin seperti bintang tentu kamu harus ngerti sedikit kode PHP. Hasilnya lihat di membuat 2 kolom dengan header dan footer [...]

  4. salsabel says:
    September 9, 2009 at 11:57 am

    link ke css nya belon dikasih tuh.. ntar pada bingung lagi..

  5. BUJANG RIAU says:
    January 30, 2010 at 11:51 am

    Permisi, jalan-jalan Nyari Info Gadget, eh ketemu dengan Web ini, hehehe
    Terimakasih info Tentang Gandgetnya Mas, sangat Bermanfaat sekali, salam kenal buat teman2 semua, Jangan lupa, kalau ada waktu Berkunjung ke blog Bujang Riau http://www.darma-saputra.co.cc/, terimakasih …

  6. Blog and SEO Tips For Newbie says:
    March 21, 2010 at 3:06 am

    Wah, mantab Bro…
    Boleh dicoba tuh. Jangan lupa Mampir ya buat sekedar menemani ngeteh.
    From Me : Blog And SEO Tips

  7. syamchico says:
    March 24, 2010 at 11:23 pm

    mohon di perjelas mas karena sering ada kendala..!!! coz msh g terlalu mengerti ngendaliin CSS terima kasih

  8. agus says:
    October 2, 2010 at 10:23 pm

    mantep mantep mantem

  9. zams says:
    December 5, 2010 at 10:50 pm

    Maaf sebelumnya,,Cara menyimpan kode CSS nya bagaiumana?

  10. xbos says:
    January 26, 2011 at 8:59 am

    hhmmm… iya tuh bener.. link css nya blm dikasih n nama file html & css nya blm dikasih tau juga, nanti pada bingung. Oya bos blog nya kebanyakan iklan… hehehhehee

  11. Rafael says:
    February 12, 2011 at 8:07 pm

    Tolong buat copy an css nya donk.