Drop Down panel

[lasa2]

I found this very simple Drop Down Panel at javascript kit.
I've implemented it on this test page:
www.threefooter.com/dropdown

It works perfectly, and is very simple to build the dropdown page with all the elements I need... but I want to limit the width to 965 px.

Any ideas on how to it?

Thanks,

Lasa2

[lasa2]

I got it... the minute I saw the question on the page it made sense..
width: 965px; instead or 100%;

Was looking for something more complicated!

Thanks for all the help you guys have been giving me...

Lasa2

[lasa2]

Is there a way to have the drop down panel "always on top"... it opens below object even if placed on a layer above?
www.threefooter.com/dropdown

[lasa2]

I was able to fix the always on top with a z-index:4

The site is 965 px wide... the page in theory is set up to be centered.
The light blue panel is centered but the Drop Down panel remains left...
I've played with the left:0 ( I've changed it to every % I could think of and px ) no luck

#dropdownpanel{ /*Outermost Panel DIV*/
position: absolute;
width: 965px;
left: 0;
top: 0;
visibility:hidden;
z-index:4;


Lasa2

[azoomer]

Try this instead:

#dropdownpanel {
left:50%;
margin-left:-483px;
position:absolute;
top:0;
visibility:hidden;
width:966px;
z-index:4;
}

I also suggest you change 965px to 966px all the other places because that will be easier to center

[lasa2]

azoomer... that's it! You guys are great!

Could you explain the reasoning behind it?
I'm trying to understand it... let's see.
483px is half of the 966px.
If we set the left margin to -486 then, left 50% ...

I got nothing...lol

Lasa2

[azoomer]

when an element has position relative and has a width you can center it with

margin-left: auto;
margin-right:auto;

If it has position absolute you need to use

left:50%;
margin-left: - (width/2)px;

I can't explain it better but these two ways of doing it will usually work fine.

[lasa2]

Thanks again... I'll save the tip.
Lasa2