Masih tentang bagaimana membuat layout dengan CSS, kita lanjutkan untuk membuat
layout yang lain. Berikut ini adalah desain layout yang akan kita buat
Bagian 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.
<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>
</ul>
</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. Ini adalah bagian isi. Ini adalah bagian isi. Ini
adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian
isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah
bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini
adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian
isi. Ini adalah bagian isi.
</p>
<p>Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah
bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini
adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian
isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah
bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini
adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian
isi. Ini adalah bagian isi.
</p>
<p>Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah
bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini
adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian
isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah
bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini
adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian
isi. Ini adalah bagian isi.
</p>
</div>
<div id="footer">
<p>Copyright © 2007 by rosihanari</p>
</div>
</div>
</body>
Seperti yang kita lihat pada code di atas, bahwa semua sel (header, isi, footer dan
navigasi) merupakan bagian dari bagian content. Mengapa dimasukkan ke dalam bagian
content? Hal ini dikarenakan kita akan membuat style untuk bagian tersebut, misalnya
meletakkan di tengah halaman dan juga mengatur lebar bagian content nya.
OK… let’s get to the point…
Kita akan membuat style untuk body nya terlebih dahulu. Karena kita akan
menambahkan efek background image pada seluruh halaman, maka berikut ini adalah
stylenya
body {
background: url(background.jpg);
}
Selanjutnya kita akan membuat style untuk bagian content dengan mengatur lebarnya
adalah 750 pixel dan berada di tengah halaman.
#content {
width: 750px;
margin: auto; /* membuat posisi di tengah */
}
Saat nya memodifikasi bagian header. Kita akan membuat blok untuk headernya dengan
menambahkan style berikut.
#header {
border:1px solid #000000;
background-color:#000000;
padding: 10px
}
h1 {
color: #FFFFFF;
font-size: 40px;
}
Apabila Anda merasa space antara text heading dengan tepi blok bawah dan atas terlalu
lebar, dapat menggunakan line-height untuk mengaturnya. Semakin kecil nilai line-height
maka akan semakin kecil spacenya.
h1 {
color: #FFFFFF;
font-size: 40px;
line-height: 5px;
}
Selanjutnya kita akan membuat style untuk bagian footer beserta teks pada footernya.
#footer {
padding:10px;
border:1px solid #000000;
background-color:#CCCCCC;
}
#footer p {
text-align: justify;
font-weight: bold;
}
0 comments:
Post a Comment