Mohon tunggu...
KOMENTAR
Nature

Membuat Layout Website Sederhana dengan CSS

19 Agustus 2011   07:49 Diperbarui: 26 Juni 2015   02:38 895 0
CSS dapat dimanfaatkan untuk membuat layout sederhana. Pendekatan yang digunakan adalah linked-CSS dengan memanfaatkan "div" untuk mengatur posisi areanya. Pada text editor, kita buat file CSS bernama mystyle.css. Hal pertama yang harus dibuat adalah wrapper untuk memuat semua area lain di dalam website (lapisan pertama).  Kode CSS untuk wrapper adalah sebagai berikut: #wrapper{margin: auto;width: 750px;border: 1px solid black;}
Kemudian di atas wrapper kita letakkan empat sub-area (lapisan dua), yaitu header, inner, sidebar, dan footer. Pada inner nantinya akan diletakkan sub-area (lapisan ketiga), yaitu top, content, dan right. Kode CSS untuk header, inner, sidebar, dan footer adalah sebagai berikut: header{height: 80px;border: 1px solid black;
Padda suub-area inner, kita letakkan top, content, dan right. Berikut kode CSSnya: #content{float: left;width: 380px;height: 230px;border: 1px solid black;}#top {
Selanjutnya, buat kode HTML untuk mengatur posisi area-area tersebut dengan memanfaatkan div. Konsepnya, semua area berada dalam wrapper. TOP, content, dan right berada dalam inner. Berikut kode HTMLnya: gt;

KEMBALI KE ARTIKEL


LAPORKAN KONTEN
Alasan
Laporkan Konten
Laporkan Akun