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.
 |
| WWW.RHM-FILES.TK |
Berikut adalah cara agar tampilannya tetap terlihat sempurna :
Baca Juga : Cara membuat kotak komentar blog di bawah postingan
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Penjelasan :
<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>
Kita berikan background image pada #tengah agar jika menu kiri maupun kanan ada yang lebih pendek, background-nya tetap mengikuti yang lebih panjang.
#tengah {didalam #tengah, kita masukkan #kiri dan #kanan yang keduanya kita buat float: left;
position: relative;
width: 800px;
background-image: url(images/bg_tengah.gif);
}
Kemudian ditutup dengan .clear yang isi css-nya adalah :
.clear {untuk menghapus float yang ada pada #kiri dan #kanan.
clear: both;
}
Untuk contohnya dapat dilihat di
http://www.prowebpro.com/pic/erna/Membuat_layout_header_menu_kiri_menu_kanan_footer_dengan_css.php
0 Komentar untuk "Membuat layout header - menu kiri - menu kanan - footer dengan css"
Don't forget leave some comment