Membuat layout header - menu kiri - menu kanan - footer dengan css
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.
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.
Web Design Packages
Komentar
Posting Komentar