Hey All,
Im making a website that utilises a menu that floats about 3/4 of the way down the page, however on page load my menu always ends up at the top of the screen. But when i mouseover the menu it jumps to where it was originally meant to be... im stumped (im also pretty idiotic with css)
Heres the code involved:
HTML
<div id="welcome">
<div class="blackbox">
<ul class="nav">
<li><a class="nav" href="index.php?module=aboutus">About Me</a></li>
<li><a class="nav" href="index.php?module=portfolio">Portfolio</a></li>
<li><a class="nav" href="index.php?module=contact">Contact</a></li>
</ul>
</div>
</div>
<div id="menu">
<div class="menubox">
test
</div>
</div>
</div>CSS
.box {
margin: 0 auto;
width: 400px;
padding-top: 15px;
padding-right: 50px;
padding-left: 50px;
padding-bottom: 50px;
background: white;
font-size: small;
background: #111111;
line-height:150%
}
#menu {
position: fixed;
bottom:100;left:0;
z-index:71;
overflow:hidden;
width:100%;
position: fixed;
}
.menubox {
position: fixed;
margin: 0 auto;
width: 100%;
padding: 25px;
background: #111111;
color: #ffffff;
padding-bottom:25px;
opacity: 0.5;
filter:alpha(opacity=50);
-moz-opacity:0.5;
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
-khtml-opacity: 0.5;
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;
}
#welcome {
bottom:100;left:0;
z-index:72;
overflow:hidden;
position: fixed;
}
.blackbox {
margin: 0 auto;
width: 200px;
padding: 10px;
background: #111111;
color: #ffffff;
padding-bottom:10px;
position: fixed;
}
/*----------navigation---------------------*/
ul.nav,
.nav ul{
/*Remove all spacings from the list items*/
font-size: small;
text-transform: uppercase;
margin: 0;
padding: 0px 0px 0px 10px;
cursor: default;
list-style-type: none;
text-align: right;
}
ul.nav{
width: 75px;
/*Optional, to make the navigation bar positions on the left of the content*/
float: right;
margin-right: 1em;
}
/*** Menu styles (customizable) ***/
ul.nav,
.nav ul,
.nav ul li a{
background-color: #111111;
color: #ffffff;
}
ul.nav li:hover{
background-color: #111111;
color: #ffffff;
font-weight: bold;
}
ul.nav li:active{
background-color: #ffffff;
color: #111111;
}
ul.nav{
border: 0px solid #369;
}
a.nav:link { color: #ffffff; text-decoration: none; }
a.nav:visited {color: #ffffff; text-decoration: none; }
a.nav:hover {color: #ffffff; text-decoration: none; }
a.nav:active {color: #ffffff; text-decoration: none; }