
Untitled
By: a guest on
May 1st, 2012 | syntax:
None | size: 1.67 KB | hits: 17 | expires: Never
Menu goes out of the screen but page stays unable to scroll
...
<body>
<div id="container">
<div class="menu" >
<ul>
<li><a href="http://newfutureuniversity.org/">New Future</a></li>
<li><a href="http://newfutureuniversity.org/learn/degree/">Learn</a>
<ul class="bottom">
...
</ul>
</li>
...
body /* Changes the style for the whole body */
{
position:absolute;
margin:0px; /* Avoids margin in the whole page */
padding:0px;
border:0px;
background-color: #EEEEEE; /* Default background color, light grey */
height:100%; /* Vertically complete */
width:100%;
min-width:400px;
min-height: 100%;
color: #333; /* Letters color */
}
#container /* The container has the header, main and footer inside */
{
position:relative;
margin:0px;
padding:0px;
min-height: 100%; /* Avoids the footer to go up */
height: auto !important;
height: 100%;
margin: 0px auto -51px;
}
.menu
{
position: fixed;
top:0px;
left:0px;
opacity:0.3;
filter:alpha(opacity=30); /* For IE8 and earlier */
width:100%;
min-width:400px;
border:none;
border-bottom:1px solid gray;
margin:0px;
padding:0px;
font-size:18px;
z-index:3;
}
.menu ul
{
background:#DDD;
height:26px;
list-style:none;
margin:0px;
padding:0px;
z-index:3;
}
.menu li{
width:24.5%;
min-width:93px;
float:left;
padding:0px;
margin: 2px 0px 2px 0.5%;
}
...