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.

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

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

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

Sign up to vote on this title
UsefulNot useful