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.

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

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

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

Master your semester with Scribd & The New York Times

Special offer for students: Only $4.99/month.

Master your semester with Scribd & The New York Times

Cancel anytime.