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.

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

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

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

Sign up to vote on this title
UsefulNot useful