Melayout dengan CSS


Didalam dunia desain web, layout atau mengatur letak aitem-aitem yang ada dalam sebuah web menjadi bagian yang amat penting bahkan bisa jadi yang paling lama dibanding dengan bagain desain web lainnya. Karena jika kita membua layout yang salah, maka web kita juga akan salah diterjemahkan oleh browser. Hal itu juga bisa disebabkan karena setiap browser memilliki dukungan bahasa(CSS) yang berbeda dan tentunya default dari browsernya sendiri yang berbeda-beda. Browser yang paling rewel soal layout css adalah IE karena kurang dukungannya terhadap CSS.

Dalam melayout sebuah web ada dua metode yang sering dipakai untuk membuat sebuah layout halaman web yaitu:

  1. Metode Table
  2. Metode Div

Pada zaman dulu, sebelum XHTML dan CSS berkembang. Banyak orang membuat layout halaman web dengan metode TABLE. Namu pada saat ini banyak yang beralih pada metode DIV. Karena metode DIV mempunyai beberapa keuntungan yaitu:

  • Halaman web lebih cepat di load (karena lebih sedikit tag).
  • Ukuran halam web lebih kecil.
  • Mudah dianalaisa jika ada error.
  • Lebih fleksible dalam peletakan layout/ elemen.
  • Lebih menantang (.red)

Layout pada umumnya dalam sebuah web seperti berikut:

Pada umunya ada empat bagian yang sering ada dalam layout sebuah web yaitu:

  • Header –> berisi tema web/ judul
  • Menu –> menu link web
  • Content –> isi dari web
  • Footer –> identitas/ copyright

Penempatan Elemen dengan CSS

Ada dua cara penempatan elemen dalam web dengan CSS yaitu:

1. Position (Posisi)

Mengunakan properti position terdapat 4 cara:

  • Static –> posisi normal (default).
  • Relative –> posisi elemen tergantung dari elemen yang lain.
  • Absolute –> posisi elemen berpatokan pada jendela browser.
  • Fixed –> posisi elemen tetap walaupun digeser.

2. Float (Nempel)

Menggunakan properti float atau clear:

  • Float:left –> elemen akan menempel pada sebelah kiri elemen induk.
  • Float:right –> elemen akan menempel pada sebelah kanan elemen induk.
  • Clear:left –> elemen akan menempel pada sebelah kiri dan berada di bawah.
  • Clear:right –> elemen akan menempel pada sebelah kanan dan berada dibawah
  • Clear:both –> elemen akan berada pada posisi bawah elemen diatasnya.

NB: Jika elemen menggunakan properti position, maka elemen tersebut akan lepas dari elemen yang lain.

Selain hal diatas juga terdapat beberapa hal yang berpengaruh dalam melayout yaitu padding, border, margin, offset

Ket:

  • Offset –>jarak elemen dari jendela browser

CSS: left, top, right, bottom

  • Margin –> jarak/batas elemen dengan elemen lain

CSS: margin, margin-left, margin-top, margin-right, margin-bottom

  • Border –> border/gari tepi elemen

CSS: border, border-left, border-top, border-right, border-bottom

  • Padding–> jarak elemen dengan isi elemen (elemen anak)

CSS: padding, padding-left, padding-top, padding-right, padding-bottom

dari penjelasan diatas dapat dapat digambarkan sebagai berikut:

format-cssNB: Setiap penambahan tiap aitem baik itu padding, border, margin, offset akan mempengaruhi width dan height dari div tersebut.

Alat untuk mengkoreksi tampilan web adalah firebug dapat didownload disini. Add on Mozilla ini akan membantu anda dalam melihat efek dari setiap css atau script lainnya dalam sebuah web, dan tentunya sangat membantu kita dalam melayout web.

Untuk lebih mempercelas silahkan perhatikan contoh berikut. Selamat Belajar……..!

About these ads

Posted on Mei 5, 2009, in CSS and tagged , , , , , , , . Bookmark the permalink. Tinggalkan komentar.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Logout / Ubah )

Twitter picture

You are commenting using your Twitter account. Logout / Ubah )

Facebook photo

You are commenting using your Facebook account. Logout / Ubah )

Google+ photo

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

Ikuti

Get every new post delivered to your Inbox.

%d bloggers like this: