P. 1
Layout Css

Layout Css

|Views: 22|Likes:
Published by Novita Hirata

More info:

Published by: Novita Hirata on Mar 29, 2012
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

03/29/2012

pdf

text

original

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

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

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

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->