PDA

Click to See Complete Forum and Search --> : Dropdown menu positioning/width help?

bandeyelinsang
04-29-2005, 10:46 PM
Hiya,
I'm having some trouble with a CSS dropdown menu I've been messing with for a while. It's for a client so its gotta be PERFECT! :D

Anyway- link here:
http://www.dragonflydays.net/Website_Work/WeddingShop/Website/menu.html


What's wrong is that the dropdown menus only appear as wide as the original link (in my case, I've substituted images). Therefore, they are all bunched up. Also, I want to control to the T where each dropdown menu appears-- not just at the lower lefthand corner of the original link. If I attempt to modify the code for this, then ALL the dropdown menus appear in that one controlled location. I want to be able to force 4 separate dropdown locations; one for each link. BTW the 4th link is not supposed to have a dropdown menu.

Also, if I put a WIDTH: #px; in the DD thing, it pushes all the buttons to the right, or all over the place. :-P Geez. I don't want them to move around.

Ok so.. Here's the code inside this test menu:


<HEAD><TITLE>Test menu</TITLE>
<SCRIPT type=text/javascript>
<!--
window.onload=wdg;
function wdg(id)
{
var d = document.getElementById(id);

for (var i = 1; i<=10; i++) {

if (document.getElementById('smenu'+i))
{document.getElementById('smenu'+i).style.display='none';}
}

if (d) {d.style.display='block';}
}
//-->
</SCRIPT>

<STYLE type=text/css>BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: white; PADDING-BOTTOM: 0px; MARGIN: 0px; FONT: 80% verdana, arial, sans-serif; PADDING-TOP: 0px
}
DL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}

DD {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
LI {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
#menu {
Z-INDEX: 100; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px
}
#menu DL {
FLOAT: left; MARGIN: 0px 0px; WIDTH: 76px
}

#menu DD {
Z-INDEX: 1; LEFT: 0px; PADDING-BOTTOM: 0px; BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; BORDER-LEFT: gray 1px solid; BORDER-BOTTOM: gray 1px solid
}
#menu LI {
BACKGROUND: #fff; TEXT-ALIGN: left
}
#menu LI A {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; DISPLAY: block; BORDER-LEFT: 0px; COLOR: #000; BORDER-BOTTOM: 0px; HEIGHT: 100%; TEXT-DECORATION: none
}


#menu DT A:hover {
BACKGROUND: #eee
}
#menu LI A:hover {
BACKGROUND: #eee
}
A {
COLOR: #222; TEXT-DECORATION: none
}
</STYLE>


</HEAD>
<BODY>


<DIV id=menu>

<DL>
<img onmouseover="javascript:wdg('smenu1');" src="Images/link6.jpg">
<DD id=smenu1 onmouseover="javascript:wdg('smenu1');"
onmouseout="javascript:wdg('');">
<UL>
<LI><A
href="">Education - 4 C's</A>
<LI><A
href="">Rounds
1.2</A>
<LI><A
href="">Princess
1.3</A>
<LI><A
href="">Fancy Cuts
1.4</A>
<LI><A
href="">Colored Diamonds
1.5</A>
</LI></UL>
</DD>
</DL>



<DL>
<img onmouseover="javascript:wdg('smenu2');" src="Images/link7.jpg">
<DD id=smenu2 onmouseover="javascript:wdg('smenu2');"
onmouseout="javascript:wdg('');">
<UL>
<LI><A
href="">Bridal Sets</A>
<LI><A
href="">3 Stone Bridal </A>
<LI><A
href="">Solitaire </A>
<LI><A
href="">Enhancer Sets</A>
<LI><A
href="">Wrap Sets</A> </LI></UL>
</DD>
</DL>



<DL>
<img onmouseover="javascript:wdg('smenu3');" src="Images/link8.jpg">
<DD id=smenu3 onmouseover="javascript:wdg('smenu3');"
onmouseout="javascript:wdg('');">
<UL>
<LI><A
href="">Mens Wedding Bands</A>
<LI><A
href="">Ladies Wedding Bands</A>
</LI></UL>
</DD>
</DL>



<DL>
<img onmouseover="javascript:wdg('');" src="Images/link9.jpg">
</DL>



<DL>
<img onmouseover="javascript:wdg('smenu5');" src="Images/link10.jpg">
<DD id=smenu5 onmouseover="javascript:wdg('smenu5');"
onmouseout="javascript:wdg('');">
<UL>
<LI><A
href="">Gifts for Matron of Honor</A>
<LI><A
href="">Gifts for Bridesmaids</A>
<LI><A
href="">Gifts for Groomsmen</A>
<LI><A
href="">Gifts for Ringbearer & Flower Girl</A>
<LI><A
href="">Wedding Favors</A>
</LI></UL>
</DD>
</DL>


</DIV>



</BODY></HTML>



Any and all help would be greatly appreciated! Thank you in advance.
-Sarah*
Fang
04-30-2005, 02:28 AM
Change these:#menu DL {position:relative;
FLOAT: left; MARGIN: 0px 0px; WIDTH: 76px
}

#menu DD {position:absolute;top:36px;left:0;width:17em;white-space:nowrap;
PADDING-BOTTOM: 0px; BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; BORDER-LEFT: gray 1px solid; BORDER-BOTTOM: gray 1px solid
}
bandeyelinsang
04-30-2005, 10:21 AM
Thank you! That solved just about everything!

I have one last question though...

The last menu on the right-hand side, I would like to make the dropdown menu not fall directly under it, but under and to the left. Here is the updated test menu and script:

http://www.dragonflydays.net/Website_Work/WeddingShop/Website/menu.html



and script:



<HEAD><TITLE>Test menu</TITLE>
<SCRIPT type=text/javascript>
<!--
window.onload=wdg;
function wdg(id)
{
var d = document.getElementById(id);

for (var i = 1; i<=10; i++) {

if (document.getElementById('smenu'+i))
{document.getElementById('smenu'+i).style.display='none';}
}

if (d) {d.style.display='block';}
}
//-->
</SCRIPT>

<STYLE type=text/css>BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: white; PADDING-BOTTOM: 0px; MARGIN: 0px; FONT: 80% verdana, arial, sans-serif; PADDING-TOP: 0px
}
DL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}

DD {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}


UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
LI {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
#menu {
Z-INDEX: 100; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px
}

#menu DL {position:relative;
FLOAT: left; MARGIN: 0px 0px; WIDTH: 76px
}

#menu DD {position: absolute; top: 39px; left: 10; width: 13em; white-space:nowrap;
PADDING-BOTTOM: 0px; BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; BORDER-LEFT: gray 1px solid; BORDER-BOTTOM: gray 1px solid
}


#menu LI {
BACKGROUND: #fff; TEXT-ALIGN: left
}

#menu LI A {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; DISPLAY: block; BORDER-LEFT: 0px; COLOR: #000; BORDER-BOTTOM: 0px; HEIGHT: 100%; TEXT-DECORATION: none
}


#menu DT A:hover {
BACKGROUND: #eee
}
#menu LI A:hover {
BACKGROUND: #eee
}
A {
COLOR: #222; TEXT-DECORATION: none
}
</STYLE>


</HEAD>
<BODY>


<DIV id=menu>

<DL>
<img onmouseover="javascript:wdg('smenu1');" src="Images/link6.jpg">
<DD id=smenu1 onmouseover="javascript:wdg('smenu1');"
onmouseout="javascript:wdg('');">
<UL>
<LI><A
href="">Education - 4 C's</A>
<LI><A
href="">Rounds
1.2</A>
<LI><A
href="">Princess
1.3</A>
<LI><A
href="">Fancy Cuts
1.4</A>
<LI><A
href="">Colored Diamonds
1.5</A>
</LI></UL>
</DD>
</DL>



<DL>
<img onmouseover="javascript:wdg('smenu2');" src="Images/link7.jpg">
<DD id=smenu2 onmouseover="javascript:wdg('smenu2');"
onmouseout="javascript:wdg('');">
<UL>
<LI><A
href="">Bridal Sets</A>
<LI><A
href="">3 Stone Bridal </A>
<LI><A
href="">Solitaire </A>
<LI><A
href="">Enhancer Sets</A>
<LI><A
href="">Wrap Sets</A> </LI></UL>
</DD>
</DL>



<DL>
<img onmouseover="javascript:wdg('smenu3');" src="Images/link8.jpg">
<DD id=smenu3 onmouseover="javascript:wdg('smenu3');"
onmouseout="javascript:wdg('');">
<UL>
<LI><A
href="">Mens Wedding Bands</A>
<LI><A
href="">Ladies Wedding Bands</A>
</LI></UL>
</DD>
</DL>



<DL>
<img onmouseover="javascript:wdg('');" src="Images/link9.jpg">
</DL>



<DL>
<img onmouseover="javascript:wdg('smenu5');" src="Images/link10.jpg">
<DD id=smenu5 onmouseover="javascript:wdg('smenu5');"
onmouseout="javascript:wdg('');">
<UL>
<LI><A
href="">Matron of Honor</A>
<LI><A
href="">Bridesmaids</A>
<LI><A
href="">Groomsmen</A>
<LI><A
href="">Ringbearer & Flower Girl</A>
<LI><A
href="">Wedding Favors</A>
</LI></UL>
</DD>
</DL>


</DIV>



</BODY></HTML>





Thanks again, SOOO much! Any ideas on this one last thing?

-Sarah*
Fang
04-30-2005, 12:04 PM
To the last dd add style="left:-7em;"
bandeyelinsang
04-30-2005, 05:44 PM
Thanks so much for all your help! Here's the result:

http://www.dragonflydays.net/Website_Work/WeddingShop/Website/

All I have left is to modify the font type. Also, reading over the forums, I've decided to layout the site completely in CSS instead of tables. I never knew they were so evil :-P

Thanks SOOO much for all your help!
-Sarah*