0

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; }
3
Contributors
4
Replies
5
Views
7 Years
Discussion Span
Last Post by josephmcnelis
0

Before you do anything else, replace those “angled quotes” in the css with "straight'ns".

Airshow

0

Just a quick question: why are you dividing up the attributes between an id and a class? I'm wondering if the double "fixed" is part of your problem.

0

Before you do anything else, replace those “angled quotes” in the css with "straight'ns".

Airshow

Never noticed those to be honest, just copied that piece of the css for some website

0

Just a quick question: why are you dividing up the attributes between an id and a class? I'm wondering if the double "fixed" is part of your problem.

To be perfectly honest i dont know, im quite new to css.
I thought that aslong as they were called correctly it wouldn't matter whether they where a class or an id.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.