Drop-down menu centered on page using CSS-P

[superslurpee]

Hi,

I'm creating a nifty little navigation bar across the top of my page that produces drop-down menus. The navbar is centered so I'm finding positioning of the menus difficult. My coordinator would like less of pixels and more of ems, %, etc. Basically, the problem is that since the navbar is centered (width:90%), I can never really be sure where it is (like you could with pixels and position:absolute).

How can I get the drop down menus to line up with their 'selector' if viewed at various screen resolutions? How can I tell the drop-down menu where it should be (or where its 'selector' is) so that it always appears in the correct spot?

Any ideas would be appreciated as everything seems to be pixels, pixels, pixels, and left-aligned!

THANKS!

 

[theocraticmind]

hmm... i'm not 100% (heh) sure what your talking about. do you want the "drop-down menus" witch i'm going to assume are select boxes to be able to disapere, and reapere? or change them? if you just want them there all of the time why not just put them in the main menu div (asuming your using a div for postioning). kinda like this:

<div class=&quot;main_menu&quot;>
select 1 |
select 2 |
select 3 |
</div>

and if you need to get at those, for altering things dymaicly, try this:

<div class=&quot;main_menu&quot;>
<div id=&quot;sel1&quot;>select 1</div> |
<div id=&quot;sel2&quot;>select 2</div> |
<div id=&quot;sel3&quot;>select 3</div> |
</div>

it's posible that i am way off base. to tell you the truth i need a little sleep right now. but hopefully this helped...

 

[superslurpee]

Hi again,

Just to further explain, when I say 'drop-down menus', I don't mean select boxes but rather div layers (DHTML, hiding and showing the div layer on mouseover of the selector (an image)). Each drop-down layer is already made but invisible until the 'selector' is moused over. With the top navbar of 'selectors' centered, how can I place the div layers below it in the correct spots?

Hope this clarifies things!

Thanks again.

 

[superslurpee]

I figured out a solution for drop-down menu layers that is centered...

<div align=&quot;center&quot;> <!--center the navbar-->
<div style=&quot;position:relative; whatever:whatever&quot;> <!--position the entire navbar relative to center div-->

<img src=&quot;navs.gif&quot;> <!--images for the 'selectors'-->

<div id=&quot;1stDropDown&quot; style=&quot;position:absolute; left:size_of_the_gif_above; top:easy_to_get&quot;></div>
</div></div>

All that was needed was a parent div (the relative one) so that the menu divs (absolute) are relative to their parent, rather than the screen walls (confusing eh?!). This is needed because as you may or may not know, relatively positioned layers take up space and move everything else around unlike absolutely positioned ones which can overlap. Simply, on all resolutions, the navbar will be centered, and the drop down menus will be placed relative to the first image of the navbar, rather than the wall.

Hope this helps others!