Membuat layout header - menu kiri - menu kanan - footer dengan css
Layout template sederhana yang sering kita gunakan adalah layout yang memiliki header - menu kiri - menu kanan - footer.
Tetapi terkadang kita kesulitan jika menu kiri atau kanannya ada yang lebih panjang. Terkadang warna background menu yang lebih pendek tidak mengikuti, sehingga tampilannya kurang sempurna.
Berikut adalah cara agar tampilannya tetap terlihat sempurna :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
}
#wrapper {
width: 800px;
position: relative;
}
#header {
background-color: #FF0000;
height: 150px;
width: 800px;
position: relative;
}
#tengah {
position: relative;
width: 800px;
background-image: url(images/bg_tengah.gif);
}
#kiri {
float: left;
width: 230px;
background-color: #0000FF;
}
#kanan {
position: relative;
width: 570px;
background-color: #FFFF00;
float: left;
}
.clear {
clear: both;
}
#bawah {
background-color: #00FF00;
height: 30px;
width: 800px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="header">Content for id "header" Goes Here</div><!--end of header-->
<div id="tengah">
<div id="kiri">Content for id "kiri" Goes Here</div><!--end of kiri-->
<div id="kanan">Content for id "kanan" Goes Here</div><!--end of kanan-->
<div class="clear"></div><!--end of clear-->
<div id="bawah">Content for id "bawah" Goes Here</div><!--end of bawah-->
</div>
<!--end of tengah-->
</div>
<!--end of wrapper-->
</body>
</html>
Penjelasan :
Kita berikan background image pada #tengah agar jika menu kiri maupun kanan ada yang lebih pendek, background-nya tetap mengikuti yang lebih panjang.
#tengah {
position: relative;
width: 800px;
background-image: url(images/bg_tengah.gif);
}
didalam #tengah, kita masukkan #kiri dan #kanan yang keduanya kita buat float: left;
Kemudian ditutup dengan .clear yang isi css-nya adalah :
.clear {
clear: both;
}
untuk menghapus float yang ada pada #kiri dan #kanan.
Untuk contohnya dapat dilihat di
http://www.prowebpro.com/pic/erna/Membuat_layout_header_menu_kiri_menu_kanan_footer_dengan_css.php
Portfolio
Livechat
-
-
Aris G
-
Agus
-
Fazri
-
Rudi S
-
Bincar H
Address
PT. Proweb Indonesia
Perkantoran Duta Merlin No F4
Jl. Gadjah Mada 3-5
Jakarta Pusat
| Phone | : | 021 - 2636 3170 |
| Mobile | : | 0856 - 922 622 03 |
| 0812 - 806 2772 | ||
| 0816 - 180 8005 | ||
| Fax | : | 021 - 633 5765 |
| Web | : | www.proweb.co.id |