Contoh ke dua layout menggunakan CSS
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 gambar.
Langkah pertama, seperti biasa kita harus membuat bagian-bagian elemen dahulu
menggunakan division (div). berikut ini adalah code dasar untuk setiap elemennya.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Layout 2 CSS</title>
<link rel="stylesheet" type="text/css" href="style2.css">
</head>
<body>
<div id="content">
<div id="header">
<h1>selamat datang</h1>
</div>
<div id="menu">
<div class="navigasi">
<h3>Menu Navigasi A</h3>
<ul>
<li><a href="link1.html">Link 1</a></li>
<li><a href="link2.html">Link 2</a></li>
<li><a href="link3.html">Link 3</a></li>
<li><a href="link4.html">Link 4</a></li>
</ul>
</div>
HEADER
ISI
NAVIGASI 1
FOOTER
NAVIGASI 2
<div class="navigasi">
<h3>Menu Navigasi B</h3>
<ul>
<li><a href="link1.html">Link 1</a></li>
<li><a href="link2.html">Link 2</a></li>
<li><a href="link3.html">Link 3</a></li>
<li><a href="link4.html">Link 4</a></li>
</ul>
</div>
</div>
<div id="isi">
<img src="css.jpg" width="100" height="150" 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. 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. 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. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian
isi.
</p>
</div>
<div id="footer">
<p>Copyright © 2011 by masrur</p>
</div>
</div>
</body>
</html>
Pada contoh kedua layout web kali ini, bahwa semua sel (header, isi, footer dan navigasi)
merupakan bagian dari bagian content. Mengapa dimasukkan ke dalam bagian content?
Hal ini dikarenakan akan dibuat style untuk tersebut, misalnya meletakkan ditengah
halaman dan juga mengatur lebar bagian content nya.
Terlebih dahulu membuat style untuk body nya. Dikarenakan ada penembahan efek
background gambar pada seluruh halaman, maka berikut ini adalah style nya.
Body {
background:url(background.jpg);
}
Hasilnya sebagai berikut
Selanjutnya adalah membuat style untuk bagian content dengan mengatur lebarnya yaitu
750 pixel dan berada ditengah halaman.
#content {
width:750px;
margin:auto; /* membuat posisi ditengah*/
}
Hasilnya adalah
Kalau sudah seperti diatas, tahap berikut nya adalah membuat style pada bagian header
terlebih dahulu supaya lebih rapi. Berikut kode membuat header dibawah ini
#header {
border:1px solid #000000;
background-color:#000000;
padding:10px;
}
h1 {
color:#ffffff;
font-size:40px;
line-height:4px;
}
Header akan tampak sebagai berikut
Header selesai dibuat, dilanjutkan membuat style untuk footer dan teks paragraph nya,
berikut kode css untuk footer.
#footer {
padding:10px;
border:1px solid #000000;
background-color:#cccccc;
}
#footer p {
text-align:justify;
font-weight:bold;
}
Selanjutnya bagian navigasi, karena ingin diletakkan di kanan, maka kode style nya
sebagai berikut
#menu {
float:right;
}
Dibawah ini adalah kode untuk setiap class navigasinya
.navigasi {
border:1px dashed #000;
margin-top:10px;
background:yellow;
}
Jika sudah dibuat, efek dari style diatas sesuai dengan gambar dibawah ini
Tahap demi tahap selesai, selanjutnya pada bagian isi, buat style nya agar lebih rapi,
berikut ini kode nya.
#isi {
width:550px;
margin-top:10px;
margin-bottom:10px;
padding:10px;
border:1px solid #000;
background:white;
}
Lihat hasil gambar ini, lebih bagus bukan !
Tampak nya semakin semangat untuk melanjutkan koding CSS nya, dari gambar diatas
yang perlu disentuh lagi adalah bagian gambar, supaya lebih baik lagi maka kode nya di
bawah ini.
.gambar {
float:left;
margin-top:0px;
margin-right:10px;
margin-bottom:20px;
margin-left:0px;
border:1px solid #000000;
}
Kira kira hasil gambarnya seperti ini, gambar pada bagian isi sudah tertata dengan baik.
Sentuhan terakhir adalah pada paragrafnya supaya rata justify serta bagian atas sejajar
dengan gambar, oleh karena itu style nya dibawah ini
#isi p {
text-align:justify;
line-height:18px;
margin-top:0px;
}
Gambar dibawah ini adalah hasil sentuhan CSS, dan berhasil lebih baik setelah bagian
teks paragraph diberikan sentuhan terakhirnya. Ini adalah layout menggunakan CSS
tanpa menggunakan table di html.
CSS lebih konsiten dan lebih mudah dalam pengkodean dan tampilannya
Jikalau anda menyimpulkan hasil style pada CSS, pastinya membuat layout itu mudah,
tinggal anda melanjutkan kreatifitas nya. Tentunya tidak lupa menggunakan CSS
Top Related