Home » Tutorial, Web Design & CSS

Contoh Web Design Dua Kolom Layout Dengan CSS

7 August 2009 4 Comments

Setelah kita mempelajari tentang HTML dan Juga dasar CSS maka kita melangkah ke studi kasus. Jika anda belum membaca tutorial sebelumnya ada baiknya anda membaca artikel HTML untuk Web Design dan CSS dan Web Design agar lebih memahami tutorial ini. Dalam pembuatan design web dua kolom ini kita akan menggunakan konsep tableless design (design tanpa menggunakan tag <table> akan tetapi menggunakan <div>). Kelebihan tableless design adalah waktu loading yang diperlukan halaman web akan lebih cepat.

Tujuan akhir tutorial ini bisa anda lihat pada demo web. Untuk memulainya kita mendefinisikan terlebih dahulu struktur dari design 2 layout ini yang akan ditempatkan setelah tag <body>. Sebagai pengingat gunakan kata yang mudah dalam definisi struktur ini.

1
2
3
4
5
6
7
8
9
10
11

<div id="wrapper">
    <div id="header"></div>
    <div id="container">
       <div id="left">
           <div id="nav"></div>
       </div>
       <div id="right"></div>
       <div class="clearer"></div>
   </div>
   <div id="footer"></div>
</div>

Perhatikan baik-baik susunan kode HTML tersebut. Kode tersebut menyusun tiga bagian yaitu header (id header), content (id container dan dalamnya), footer (id footer). id wrapper digunakan untuk mendefinisikan keseluruhan halaman yang mencakup ke tiganya. Pada tutorial ini kita ingin mendefinisikan bahwa lebar design adalah 800px (lihat demo) dan kita akan mengatur font secara umum dibagian body maka CSS nya adalah sebagai berikut :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

html, body {
    margin: 0px;
    padding: 0px;
}
 
body {
    font-family: Verdana, Arial, sans-serif;
    font-size: 11px;
    color: #3F4554;
    text-align: center;
    line-height: 1.8em;
}
 
#wrapper {
   width: 800px;
   margin: 15px auto 15px auto;
   padding: 0px;
   text-align: left;
   border: solid 1px #dadaaa;
}

Jika anda kesulitan memahami kode-kode tersebut alangkah baiknya anda membaca terlebih dahulu Kode-Kode yang Biasa Digunakan Dalam CSS. Ada beberapa kode tambahan dalam CSS ini yaitu : “text-align” yang digunakan untuk mengatur arah teks apakah rata kiri, rata kanan, rata tengah dan seterusnya. Kode ini merupakan pengganti dari attribut align pada HTML. “line-height” digunakan untuk mengatur spasi ke arah vertical. Secara default jaraknya adalah 1em. Semakin besar nilai semakin jauh jarak antar text secara vetical.”border” digunakan untuk mendefinisikan warna pada border suatu elemen. formatnya sama dengan padding dan juga margin.

Jika anda sudah memahami kode diatas kita akan meneruskan ke bagian header. Bagian header pada contoh demo diberi warna background tertentu dan dengan tinggi tertentu. Kode header adalah sebagai berikut :

1
2
3
4
5
6

#header {
   width: 100%;
   height: 70px;
   background-color: #F3F9FF;
   border-bottom: solid 1px #dadaaa;
}

width 100% menandakan bahwa element header luasnya akan mengikuti element diatasnya (dalam hal ini wrapper) dengan lebar 800px. Untuk bagian content dibagi menjadi dua bagian yaitu bagian kiri untuk navigasi menu dan bagian kanan untuk bagian content. Misal kita isi bagian menu (nav) sebagai berikut (kita ganti <div id=”nav”>..</div>) ke bentuk ul untuk definisi link (lihat tutorial List Dalam HTML):

1
2
3
4
5
6
7

        <ul id="nav">
            <li><a href="#">Link Pertama</a></li>
            <li><a href="#">Link Kedua</a></li>
            <li><a href="#">Link Ketiga</a></li>
            <li><a href="#">Link Keempat</a></li>
            <li><a href="#">Link Kelima</a></li>
        </ul>

Dan kita isi bagian content sebagai berikut :

1
2
3

    <div id="right">
        <p>Ini adalah halaman body yang bisa diisi content. </p>
    </div>

Dengan begini maka content sudah sama dengan apa yang ditampilkan pada demo. Sekarang kita desain website dengan mendefinisikan CSS. Yang pertama adalah id “container” yang merupakan definisi umum dari id “left” dan “right”.

Mendefinisikan height dengan auto bearti tingginya akan menyesesuaikan dengan content. Kemudian kita definisikan bagian "left" dan "right".



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

#left {
    width: 159px;
    height: auto;
    float: left;
    padding: 20px;
    margin: 0px;
    border-right: solid 1px #dadaaa;
}
 
#right {
   width: 530px;
   height: auto;
   float: left;
   padding: 20px 50px 20px 20px;
   margin: 0px;
}



mungkin anda bingung bagaimana angka-angka tersebut bisa didapatkan. Untkuk angka pada padding saya rasa anda harus sedikit trial and error menyesuaikan dengan kebutuhan (kalau sudah pengalaman biasanya sudah bisa memperkirakan) sedangka width diatur sesuai dengan keperluan dengan memperhitungkan lebar total dan faktor lain (padding, border). Misal lebar total (wrapper) adalah 800px, padding "left" 20px kanan kiri total 40px ditambah border 1 px total menjadi 41px. Padding "right" total adalah 40px untuk batas kanan dan kiri (20px 20px) sehingga total faktor lain adalah 81px artinya masih ada sisa 800-81 = 719px. Dengan kata lain total lebar yang masih bisa digunakan 719px. Dalam left dan right digunakan 159+530 = 689px jika kita kurangi maka 719-689 = 30px. Akan tetapi jangan lupa bahwa "wrapper" memilki margin kanan kiri sebanyak total 30 px (15px 15px) jadi untuk total lebar "left" dan "right" maksimal adalah 689px

Sekarang kita definisikan CSS untuk navigasi (ul nav) sebagai berikut :



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

#nav {
    margin: 0px;
    padding: 0px;
    list-style: none;
    list-style-image: none;
}
 
#nav li {
  margin: 0px;
  padding: 0px;
  display: inline;
}
 
#nav li a:link, #nav li a:visited, #nav li a:active {
  color:#3F4554;
  text-decoration: none;
  display: block;
  margin: 0px;
  padding: 0px;
  width: 160px;
}
 
#nav li a:hover {
  color: #ccc;
  text-decoration: none;
}




waduh makin tambah banyak saja kayaknya kode-kode yang baru. Seperti saya kemukakan diatas kodekode CSS memang banyak jenisnya. dan sekali lagi anda tidak perlu menghafalnya cukup sering2 berlatih maka anda akan memahami kapan menggunakan kode-kode tersebut.



Kode diatas kalau disederhanakan digunakan untuk dua hal yaitu list (ul dan li) dan link (anchor). Agar lebih memahami maka kita pisahkan dulu dua element ini. Seperti saya sebutkan sebelumnya bahwa id "nav" sekarang merupakan element "ul" bukan "div" dengan kata lain id "nav" memiliki sifat "ul". Oleh karena itu disatana dituliskan :



1
2

    list-style: none;
    list-style-image: none;




kode diatas merupakan kode spesifik untuk "ul". list-style digunakan untuk mendefinisikan bentuk dari "ul". CSS ini serupa dengan definisis type pada "ul" pada tutorial List Dalam HTML. dengan kalau lain kalau kita definisi biasa adalah ul li kini bisa menjadi #nav li. List-style-image merupakan definisi gambar penanda untuk ul tersebut (menggantikan yang default menjadi gambar). 


Sekarang masalah terakhir adalah tag "a". Anchor yang digunakan untuk link memeiliki skema CSS sebagai berikut :



1
2
3
4

   a:link --> yang merupakan default CSS saat link tampil
   a:active --> link sedang terpilih
   a:visited --> link sudah dikunjungi
   a:hover --> on mouse over



Nah sudah agar terurai khan kode yang ruwet tadi. Sekarang tinggal perbaikan CSS sedikit yaitu karena ada tag "<p>" maka akan ada tambahan style untuk ini dan juga pada bagian footer.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

#right p {
  margin: 0px;
}
 
#footer {
  padding: 0px;
  margin: 0px;
  border-top: solid 1px #dadaaa;
  text-align: center;
}
#footer p {
  margin: 0px auto 0px auto;
  padding: 10px 0px 10px 0px;
  color: #aaa;
}
 
#footer a:link, #footer a:visited, #footer a:active { 
  color: #aaa;
  text-decoration: none;
}
#footer a:hover {
  color: #ccc;
  text-decoration: none;
}



tidak perlu saja jelaskan lagi kode ini khan ?. Beberapa kode mungkin tidak saya jelaskan akan tetapi itu saya anggap karena anda pasti mengerti. Untuk file contohnya bisa di download di Download Contoh 2 Kolom dengan CSS

4 Comments »

  • nanxz said:

    wah tengkiuw bos imfonya bagus….
    mw nanya niw,, didalam div wrapper itu kan salah satunya ada div header, di dreamweaver cs3 mencreate css nya menjadi #wrapper #header, sama nggak ya dengan kl misalkan ditulis #header saja tanpa di depannya ada #wrapper….thks

    # 14 November 2009 at 12:20 am
  • achmatim said:

    tutorial yang menarik. terima kasih

    # 21 November 2009 at 12:06 pm
  • andika said:

    kenapa untuk #left dan #right harus ada width
    rasanya agak sulit, karena kita harus memperhitungkan dengan seksama sebelumnya, misal div terluar width-nya 800, lalu ada lagi div didalamnya, #left dan #right

    # 20 August 2010 at 7:24 pm
  • admin (author) said:

    kalau width pastinya ada tetapi tidak harus dengan angka pasti, misal menggunakan persen. Sebenarnya untuk memperhitungkan dengan seksama tidaklah sulit terutama jika kita punya desainnya semisal dari photoshop tinggal di slice2 sebagai gambar nanti khan otomatis keluar lebar dan tinggi gambar. dari situ bisa diperkirankan lebarnya

    # 21 August 2010 at 10:00 am

Leave your response!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.