Hi,
Ever wonder how to make a menu scrollable without javascript. Here is the css solution. But unfortunately, IE is again incompatible. to try it use firefox or mozilla.
| CODE | <html>
<head>
<style type="text/css" media="screen">
body {
margin: 10px; padding: 0px; /* Need to set body margin and padding to get consistency between browsers. */
text-align:center; /* Hack for IE5/Win */
}
.main_border {
margin:0px auto; /* Right and left margin widths set to "auto" */
text-align:left; /* Counteract to IE5/Win Hack */
border: dashed 2px #005EA0;
margin-bottom: 10px;
min-width: 745px;
max-width: 1024px;
padding: 5px;
}
.main_border hr {
clear: both;
visibility: hidden;
}
.menu {
background-color: #FFE4C4;
border: solid 1px #000000;
padding: 10px;
position: absolute;
width: 178px; /* this is a fixed width */
}
html>body .menu { /* equivalent to html body .menu but IE don't recognized it */
position: fixed; /* this make the menu scrollable */
}
.content {
background-color: #FFE4C4;
border: solid 1px #000000;
padding: 1%;
margin-left: 210px; /* need to set margin left to avoid overlapping */
/* i set it to at least width of the menu (178) */
}
</style>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div class="main_border">
<div class="menu">
menu
</div>
<div class="content">
content<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
content<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
content<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
content<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
content<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</div>
</body>
</html> |
what is important:
| CODE | .menu {
position: absolute;
width: 178px; /* this is a fixed width */
}
|
| CODE | html>body .menu { /* equivalent to html body .menu but IE don't recognized it */
position: fixed; /* this make the menu scrollable */
}
|
This, will fixe the menu and make it scrollable. As IE don't interpret this correctly (it would make the menu and content on different line), we need to use a trick.
| CODE | .content {
margin-left: 210px; /* need to set margin left to avoid overlapping */
/* i set it to at least width of the menu (178) */
} |
That's all
any question, ask ?
|
