1

Layout dengan css Contoh desain :

background (warna abu-abu) akan kita beri image. Langkah pertama, seperti biasa kita harus membuat bagian-bagian elemen dahulu menggunakan division (div). Berikut ini adalah code dasar untuk setiap elemennya. Index.php <body> <div id="content"> <div id="header"> <h1>welcome to my site</h1> </div> <div id="menu"> <div class="navigasi"> <h3>Menu Navigasi A</h3> <ul> <li><a href="link1.htm">Link 1</a></li> <li><a href="link2.htm">Link 2</a></li> <li><a href="link3.htm">Link 3</a></li> <li><a href="link4.htm">Link 4</a></li> </div> <div class="navigasi"> <h3>Menu Navigasi B</h3> <ul> <li><a href="link1.htm">Link 1</a></li> <li><a href="link2.htm">Link 2</a></li> <li><a href="link3.htm">Link 3</a></li> <li><a href="link4.htm">Link 4</a></li> </ul> </div> </div> <div id="isi"> <img src="sunset.jpg" class="gambar" /> <p>Ini adalah bagian isi. . . . . Ini adalah bagian isi.

2 </p> <p>Ini adalah bagian isi.css body { background: url(colour370_1024. candra & tirta</p> </div> </div> </body> Seperti yang kita lihat pada code di atas. . </p> </div> <div id="footer"> <p>Copyright &copy.JPG). misalnya meletakkan di tengah halaman dan juga mengatur lebar bagian content nya. . . #content { width: 750px. } Apabila Anda merasa space antara text heading dengan tepi blok bawah dan atas terlalu lebar. . /* membuat posisi di tengah */ } Saat nya memodifikasi bagian header. footer dan navigasi) merupakan bagian dari bagian content. dapat menggunakan line-height untuk mengaturnya. #header { border:1px solid #000000. Mengapa dimasukkan ke dalam bagian content? Hal ini dikarenakan kita akan membuat style untuk bagian tersebut. </p> <p>Ini adalah bagian isi. } Selanjutnya kita akan membuat style untuk bagian content dengan mengatur lebarnya adalah 750 pixel dan berada di tengah halaman. 2008 by aris. Ini adalah bagian isi. Kita akan membuat blok untuk headernya dengan menambahkan style berikut. margin: auto. background-color:#000000. h1 { . bahwa semua sel (header. isi. Membuat style untuk body karena kita akan menambahkan efek background image pada seluruh halaman. . . padding: 10px } h1 { color: #FFFFFF. Semakin kecil nilai line-height maka akan semakin kecil spacenya. Ini adalah bagian isi. font-size: 40px. . . maka berikut ini adalah stylenya style.

} Berikutnya. border:1px solid #000000. untuk bagian navigasi.navigasi { border:1px dashed #000. padding: 10px. } Sedangkan untuk setiap class navigasi. margin-right: 10px. kita buat style sebagai berikut : . background: yellow. margin-bottom:10px. #footer { padding:10px. font-weight: bold. margin-bottom: 20px. bisa kita buat stylenya seperti di bawah ini. margin-top: 10px.3 color: #FFFFFF. margin-top: 0px. #isi { width:550px. } Sekarang saatnya membuat style untuk bagian isi. . margin-left: 0px. } #footer p { text-align: justify. line-height: 5px. #menu { float:right. margin-top: 10px. padding:10px. border:1px solid #000. } Berikutnya style untuk image . font-size: 40px. background-color:#CCCCCC. } Selanjutnya kita akan membuat style untuk bagian footer beserta teks pada footernya. background: white.gambar { float: left.

line-height: 18px. } Sedangkan berikut ini adalah style untuk mengatur paragraf dalam bagian isi. #isi p { text-align: justify. margin-top: 0px.4 border: 1px solid #000000. } Contoh hasil : Image bisa diganti dengan keinginan sendiri .

Sign up to vote on this title
UsefulNot useful