Problems positioning Div Options

[adam]

I am stuck with a problem i cannot fix myself.

I am laying out a new site and have positioned a CSS+Javascript Drop-Down menu on the page. When i add a DIV container for my drop-down menu and add the style "top: 295px;" to obviously place it where i want it the drop-down section also moves down 295px.

Here is the page:

http://www.underoathfans.net/delete

and the css coding for the drop down menu and container is:

CODE

.dropdown{
position:absolute;
visibility: hidden;
border:1px solid black;
border-bottom-width: 0;
font:normal 10px Verdana;
z-index: 100;
background-color: #000000;
width: 150px;
text-align: left;
}

.dropdown a{
width: 100%;
display: block;
text-indent: 2px;
padding: 0px 0;
text-decoration: none;
font-weight: bold;
}

.dropdown a:hover{ /*hover background color*/
background-color: #000000;
color: #FFFFFF;
}

.mainlink {
    font-size: 12px;
}

.navcontainer {
    position: absolute;
    left: 95px;
    width: 710px;
    top: 295px;
    text-align: center;
}

If needed the css for the main page is:

http://www.underoathfans.net/delete/stylesheet.css

It contains the div layers for the other sections if needed.

Anyone help would be great.

Thanks

Adam.

[pandy]

Yeah, the .dropdown DIVs are inside .navcontainer and .navcontainer is positioned. That means it acts as the containing block for .dropdown, i.e. their offset will be calculated relative the edges of .navcontainer.

absolute
The box's position (and possibly size) is specified with the 'left', 'right', 'top', and 'bottom' properties. These properties specify offsets with respect to the box's containing block.

http://www.w3.org/TR/CSS2/visuren.html#propdef-position
http://www.w3.org/TR/CSS2/visudet.html#x0

[adam]

Yeah, the .dropdown DIVs are inside .navcontainer and .navcontainer is positioned. That means it acts as the containing block for .dropdown, i.e. their offset will be calculated relative the edges of .navcontainer.

absolute
The box's position (and possibly size) is specified with the 'left', 'right', 'top', and 'bottom' properties. These properties specify offsets with respect to the box's containing block.

http://www.w3.org/TR/CSS2/visuren.html#propdef-position
http://www.w3.org/TR/CSS2/visudet.html#x0

I have read the pages but i still really don't know what to change. From what i read the documents told me what each element meant which is good. But i don't know what to change!

gah!