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.

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

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

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

Sign up to vote on this title
UsefulNot useful