Contoh ke dua layout menggunakan CSS Masih tentang bagaimana membuat layout dengan CSS, kita lanjutkan untuk membuat layout yang lain. Berikut ini adalah desain layout yang akan kita buat HEADER

NAVIGASI 1 ISI

NAVIGASI 2

FOOTER

Bagian background (warna abu abu) akan kita beri gambar. Langkah pertama, seperti biasa kita harus membuat bagian-bagian elemen dahulu menggunakan division (div). berikut ini adalah code dasar untuk setiap elemennya.

Pada contoh kedua layout web kali ini, bahwa semua sel (header, isi, footer dan navigasi) merupakan bagian dari bagian content. Mengapa dimasukkan ke dalam bagian content? Hal ini dikarenakan akan dibuat style untuk tersebut, misalnya meletakkan ditengah halaman dan juga mengatur lebar bagian content nya.

Terlebih dahulu membuat style untuk body nya. Dikarenakan ada penembahan efek background gambar pada seluruh halaman, maka berikut ini adalah style nya. Body

{ background:url(background.jpg); }

Hasilnya sebagai berikut

Selanjutnya adalah membuat style untuk bagian content dengan mengatur lebarnya yaitu 750 pixel dan berada ditengah halaman. #content { width:750px; margin:auto; /* membuat posisi ditengah*/ }

Hasilnya adalah

Kalau sudah seperti diatas, tahap berikut nya adalah membuat style pada bagian header terlebih dahulu supaya lebih rapi. Berikut kode membuat header dibawah ini #header { border:1px solid #000000; background-color:#000000; padding:10px; } h1 { color:#ffffff; font-size:40px; line-height:4px; }

Header akan tampak sebagai berikut

Header selesai dibuat, dilanjutkan membuat style untuk footer dan teks paragraph nya, berikut kode css untuk footer.

#footer { padding:10px; border:1px solid #000000; background-color:#cccccc; } #footer p { text-align:justify; font-weight:bold; }

Selanjutnya bagian navigasi, karena ingin diletakkan di kanan, maka kode style nya sebagai berikut #menu

{ float:right; }

Dibawah ini adalah kode untuk setiap class navigasinya .navigasi { border:1px dashed #000; margin-top:10px; background:yellow; }

Jika sudah dibuat, efek dari style diatas sesuai dengan gambar dibawah ini

Tahap demi tahap selesai, selanjutnya pada bagian isi, buat style nya agar lebih rapi, berikut ini kode nya. #isi { width:550px; margin-top:10px; margin-bottom:10px; padding:10px; border:1px solid #000; background:white; }

Lihat hasil gambar ini, lebih bagus bukan !

Tampak nya semakin semangat untuk melanjutkan koding CSS nya, dari gambar diatas yang perlu disentuh lagi adalah bagian gambar, supaya lebih baik lagi maka kode nya di bawah ini. .gambar { float:left; margin-top:0px; margin-right:10px; margin-bottom:20px; margin-left:0px; border:1px solid #000000; }

Kira kira hasil gambarnya seperti ini, gambar pada bagian isi sudah tertata dengan baik.

Sentuhan terakhir adalah pada paragrafnya supaya rata justify serta bagian atas sejajar dengan gambar, oleh karena itu style nya dibawah ini #isi p { text-align:justify; line-height:18px; margin-top:0px; }

Gambar dibawah ini adalah hasil sentuhan CSS, dan berhasil lebih baik setelah bagian teks paragraph diberikan sentuhan terakhirnya. Ini adalah layout menggunakan CSS tanpa menggunakan table di html. CSS

lebih

konsiten dan

lebih

mudah

dalam

pengkodean

dan

tampilannya

Jikalau anda menyimpulkan hasil style pada CSS, pastinya membuat layout itu mudah, tinggal anda melanjutkan kreatifitas nya. Tentunya tidak lupa menggunakan CSS