berikut dibawah ini ada scriptnya :
HTML
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>A simple Collapsing Header using CSS</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="wrapper">
<div id="header-wrap">
<b>Fix Header and Sidebar</b><br/>
<a href="http://bulandanmatahari.com" target="_blank">Home</a> | <a href="http://bulandanmatahari.com" target="_blank">About Us</a> | <a href="http://bulandanmatahari.com" target="_blank">Contact</a>
</div>
<div id="content">
ATAS<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
Tengah<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
Bawah<br/>
<br/>
</div>
<div id="sidebar">
sidebar !!!<br/>
sidebar !!!<br/>
sidebar !!!<br/>
sidebar !!!<br/>
sidebar !!!<br/>
sidebar !!!<br/>
</div>
<div id="footer">
<center><br/>Create by <a href="http://bulandanmatahari.com" target="_blank">Bulandanmatahari.com</a></center>
</div>
</div>
</body></html>
dan script CSS
CSS
body{
background-color: yellow;
}
#wrapper {
width: 850px;
height: 1100;
margin: 0 auto;
background-color: white;
background-image:url('media/header.png');
background-repeat:repeat-x;
}
#header-wrap {
background: #eeeeff;
position: fixed;
width: 831px;
height: 50px;
top: 0;
z-index: 1;
padding: 10px 10px 10px 10px;
}
#menu {
float: left;
width: 100%;
height: 50px;
background-color: ;
}
#content {
float: right;
width: 618px;
background-color: grey;
padding: 10px 2px 10px 10px;
margin-top: 62px;
}
#sidebar {
float: left;
position: fixed;
width: 200px;
height: 400px;
background-color: blue;
padding: 10px 10px 10px 10px;
top: 150px;
z-index: 1;
}
#footer {
float: left;
width: 838px;
height: 45px;
background-color: red;
padding: 0px 2px 10px 10px;
background-color: white;
background-image:url('media/header.png');
background-repeat:repeat-x;
}
#footer a:link {color:blue;} /* unvisited link */
#footer a:visited {color:#black;} /* visited link */
#footer a:hover {color:white;} /* mouse over link */
#footer a:active {color:#white;} /* selected link */
Maka tampilan websnya kan sebagai berikut :
