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 :

Code:

<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:

Code:

<!--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.

Thread: DropDown tabs not horizontal aligning

Thread Tools

Search Thread

DropDown tabs not horizontal aligning

thanks

Bookmarks

Bookmarks

Posting Permissions