PDA

View Full Version : DropDown tabs not horizontal aligning



sortebb
05-15-2008, 06:26 PM
1) Script Title: droptabmenu.htm

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm

3) Describe problem: I am using this on a page and the dropdown submenu positions itself to the right about 200px off from the parent menu that is supposed to drop down.

it works and looks perfect when it is not in a header or webpage( i.e. alone).

I have the :



<head>
<script type="text/javascript" src="Sample_3col_files/DropDownTabs/dropdowntabs.js"></script>
<link rel="stylesheet" type="text/css" href="Sample_3col_files/DropDownTabs/ddcolortabs.css">
</head>
<body class="layout" id="artigos">
<div id="container">
<div id="header">
<h2><a href="http://www.the.com/"><img src="Sample_3col_files/logo.gif" alt=""></a></h2>
<br /><br /><br /><br /><br /><br /><br />
<div id="colortab" class="ddcolortabs">
<ul>
<li><a href="http://www.dynamicdrive.com/" title="Home"><span>Home</span></a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" title="New"><span>New</span></a></li>
<li><a href="http://www.dynamicdrive.com/style/" title="CSS" rel="dropmenu1_a"><span>CSS</span></a></li>
<li><a href="http://www.dynamicdrive.com/resources/" title="Partners" rel="dropmenu2_a"><span>Partners</span></a></li>
<li><a href="http://tools.dynamicdrive.com/" title="Useful Tools"><span>Tools</span></a></li>
</ul>
</div>

<div class="ddcolortabsline">&nbsp;</div>

<!--1st drop down menu -->
<div style="top: 125px; left: 107px; visibility: hidden;" id="dropmenu1_a" class="dropmenudiv_a">
<a style="border-top-width: 0pt;" href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links and Buttons</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a>
</div>


<!--2nd drop down menu -->
<div id="dropmenu2_a" class="dropmenudiv_a" style="width: 150px; top: 125px; left: 151px; visibility: hidden;">
<a style="border-top-width: 0pt;" href="http://www.cssdrive.com/">CSS Drive</a>
<a href="http://www.javascriptkit.com/">JavaScript Kit</a>
<a href="http://www.codingforums.com/">Coding Forums</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
</div>

<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("colortab")
</script>
<p>&nbsp; </p>
</div>


and your two files..unchanged

ddadmin
05-15-2008, 07:40 PM
Most of the positioning problems with the drop down menus can be solved by making sure the HTML for the drop down DIVs themselves is outside any container tag on the page other than the BODY. So in your case, try moving all the drop down DIVs to the bottom of your page, just above the "</body>" tag:


<!--1st drop down menu -->
<div style="top: 125px; left: 107px; visibility: hidden;" id="dropmenu1_a" class="dropmenudiv_a">
<a style="border-top-width: 0pt;" href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links and Buttons</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a>
</div>


<!--2nd drop down menu -->
<div id="dropmenu2_a" class="dropmenudiv_a" style="width: 150px; top: 125px; left: 151px; visibility: hidden;">
<a style="border-top-width: 0pt;" href="http://www.cssdrive.com/">CSS Drive</a>
<a href="http://www.javascriptkit.com/">JavaScript Kit</a>
<a href="http://www.codingforums.com/">Coding Forums</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
</div>

<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("colortab")
</script>
</body>

sortebb
05-15-2008, 07:45 PM
I guess that why you replied.. you know your stuff...that fixed it ..
I would've never though of that.

thanks so much..:)

kurtd
06-04-2008, 03:52 PM
Thanks, that was my problem too.