Forum Moderators: not2easy
Within the navigation column (#nav) I have inserted a vertical dynamic javascript menu where the submenus appear to the right where the body content is. My problem is when I mouse over a button, the submenu appears farther down the side of the menu than it should. It appears that the header DIV is pushing it down. Is there anyway around this?
I believe this is a CSS question since the menu works great on a page by itself. (i.e. the submenu lines up with the button you are over)
Thanks.
[edited by: Nick_W at 8:19 am (utc) on May 1, 2003]
[edit reason] no urls please [/edit]
Could you post a Short and Concise [webmasterworld.com] snippet of code to demonstrate what you mean by 'header'?
Cheers!
Nick
The submenu that pops out from the main menu in #nav appears to be pushed down by #header. This is the basic layout of the page. It's hard to demonstrate here since you can't see the javascript but I hope you can understand what I'm trying to say.
CSS:
#container {
background : navy;
background-color:navy;
margin : 0px;
padding : 0px;
color : #000;
}
#header {
background: url(../images/banner.gif) white no-repeat center;
border-bottom : 3px solid #D14407;
color : #000;
padding-bottom : 5px;
padding-top : 5px;
padding-left: 10px;
height: 86px;
margin : 0px;
padding : 0px;
}
#nav {
background : navy;
color : #000;
float : left;
margin-left : -1px;
width : 120px;
margin : 0px;
padding : 0px;
background-color:navy;
position : relative;
z-index : 2;
}
#content {
background : url(shield.gif);
border-left : 3px solid #D14407;
margin-left : 120px;
padding : 20px;
padding-top : 1px;
position : relative;
color : #000;
z-index : 1;
}
#footer {
background : navy;
border-top : 3px solid #D14407;
margin : 0px;
padding : 0px;
color : #000;
}
Page HTML:
<html>
<head>
<title>blah</title>
<link rel="stylesheet" href="files/css.css" type="text/css">
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="nav">
<!-- navigation content, javascript goes here -->
</div>
<div id="content">
<!-- body content -->
<div class="spacer"></div>
</div>
<div id="footer">
</div>
</body></html>
[edited by: smackboy at 8:58 am (utc) on May 1, 2003]
What happens if you take the #header out of the html?
Nick
This is why I assumed its #header causing the problem. As well, it appears the submenu appears about the distance down as what the height of #header is.
Nick
Gotta isolate the area, if all else fails, just try having ONLY the nav stuff on the page and nothing else...
Nick
Having just #header and #nav causes #nav to remain below #header, as it should. The submenus, when mousing over the button, have seemed to move twice the distance.
Nick
Nick
Must be an IE bug. Otherwise I'm stumped.
#nav {
/* ... */
margin-left: -1px;
width : 120px;
margin : 0px;
/* ... */
}margin-left will be 0px, because margin: 0px sets all four sides, are you sure you want that?
(Ooh! same thing on #header with padding)
If you load your page up in Mozilla's DOM inspector, (Tools ¦ Web Development) and you can change the applied styles in real time without reloading (you just can't save them). You can find tutorials on Google, including <snip>
[edited by: Nick_W at 5:37 am (utc) on May 8, 2003]
[edit reason] no urls please [/edit]
drbrain: Thanks, fixed that.
Still no solution for my problem that I've found.
I tried this before, but now notice the submenus are actually there (putting the mouse over where the submenu should be shows there is a link there) but do not show up at all. The sebmenus seem to be below the #content div when they pop out (i.e. not visible) but are clickable.
Is there anyway to get it to pop out above the content div in my setup, or am I looking at a javascript problem?
Finally, evertything works correctly. #nav set to z-index:1 and #content set to position:fixed (its always positioning).
Works great, IE and Mozilla.
Party time!
