PDA

View Full Version : Resolved Drop Down panel



lasa2
08-30-2010, 01:15 PM
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
08-30-2010, 01:20 PM
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
08-30-2010, 02:16 PM
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
08-30-2010, 08:12 PM
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
08-30-2010, 08:49 PM
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
08-30-2010, 09:11 PM
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
08-30-2010, 09:28 PM
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
08-30-2010, 09:50 PM
Thanks again... I'll save the tip.
Lasa2