DD Tab Menu Spacing

**Genie** · 02-17-2007, 02:02 PM

1) Script Title: DD Tab Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...roptabmenu.htm

3) Describe problem:

I have installed the script just fine, but I find that there is a blank line directly beneath the menu bar. I don't know anything about coding and am just learning CSS.

Is there a place in the code or css that can be altered to delete this blank line.

Here's my test page: http://myspacecoast.com/testmenu.htm

Thanks for any help. I need to get past this in order to keep the menu.

**mburt** · 02-17-2007, 02:11 PM

Try this:

Code:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Home</title>
<link href="http://myspacecoast.com/menu/dropdowntab.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://myspacecoast.com/menu/dropdowntab.js"></script>
</head>

<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
<div id="shademenu" class="shadetabs" style="margin:0px">
<ul>
<li><a href="http://www.myspacecoast.com">Home</a></li>
<li><a href="http://myspacecoast.com/forums/index.php#1">Forums</a></li>

<li><a href="#" rel="dropmenu2">Events</a></li>
<li><a href="#" rel="dropmenu3">Community</a></li>
<li><a href="#" rel="dropmenu4">Entertainment</a></li>
<li><a href="#" rel="dropmenu5">Weather</a></li>
<li><a href="#" rel="dropmenu6">Site Extras</a></li>
<li><a href="#" rel="dropmenu7">Contact</a></li>
</ul>
</div>

<!--1st drop down menu -->                                                   
<div id="dropmenu1" class="dropmenudiv">

<a  href="http://myspacecoast.com/Contact/contact.htm">Contact</a>
<a 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>


<!--2nd drop down menu -->                                                
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a target="_blank" href="http://www.myspacecoast.com/calendar/mainevent.php">
Events Page</a>

<a href="http://myspacecoast.com/Contact/eventform.htm">Add an event</a>
</div>

<!--3rd drop down menu -->                                                   
<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
<a  href="http://myspacecoast.com/Community/Brevard_Community.htm">County 
Resources</a>
<a  href="http://myspacecoast.com/Community/Brevard_Community.htm#City_Home_Pages">
Community Sites</a>
<a  href="http://myspacecoast.com/Community/attractions.htm">Attractions in 
Brevard</a>
<a  target="_blank" href="http://www.brevardsheriff.com/dar/dat.txt">Daily 
Arrests</a>
<a  href="http://myspacecoast.com/Community/Brevard_Community.htm#Brevard_Beaches">
Beach Information</a>
<a  href="http://myspacecoast.com/Community/Brevard_Community.htm#Brevard_County_Portal_Websites">
News Portal Sites</a>

<a  href="http://myspacecoast.com/Community/Brevard_Community.htm#Magazines">
Publications</a>
<a  href="http://myspacecoast.com/Community/Brevard_Community.htm#Schooling">
Schooling</a>
<a  href="http://myspacecoast.com/Community/Launch_Links.htm">Launch Info</a>
<a  href="http://myspacecoast.com/Community/Real_Estate.htm">Realtors</a>
<a  href="http://myspacecoast.com/Community/clubs.htm">Clubs and Orgs</a>
<a  href="http://myspacecoast.com/Misc/Weekly_Ads.htm">Weekly Store Ads</a>
<a  target="_blank" href="http://72.3.241.243/?AgencyID=54028">Sex Offenders </a>
<a  target="_blank" href="http://www.sclmagazine.com/CharityGuide.html">Charity 
Guide</a></div>

<!--4th drop down menu -->                                                
<div id="dropmenu4" class="dropmenudiv" style="width: 150px;">
<a target="_blank" href="http://movies.yahoo.com/showtimes/showtimes.html?z=32935&r=sim">
Movie Listings</a>
<a target="_blank" href="http://tv.yahoo.com/grid/?lineup=us_FL09403d&genres=&all=1&dur=&starttime=&starthour=&startdate=&.intl=us">
TV Guide</a> 
<a href="http://myspacecoast.com/entertainment/Performing_Arts.htm">The Arts</a>
<a href="http://myspacecoast.com/Florida_Humor/Florida_Humor_Index.htm">Florida 
Humor</a> 
<a href="http://myspacecoast.com/entertainment/Entertainment.htm">Local Radio &amp; 
TV</a>
</div>

<!--5th drop down menu -->                                                
<div id="dropmenu5" class="dropmenudiv" style="width: 150px;">
<a href="http://myspacecoast.com/weather/weather.htm">Current Weather</a>
<a href="http://myspacecoast.com/Hurricane/Brevard_Hurricane_Season.htm">
Hurricane Info</a>
<a href="http://myspacecoast.com/Florida_Humor/Florida_Humor_Index.htm">
Hurricane Humor</a>
</div>

<!--6th drop down menu -->                                                
<div id="dropmenu6" class="dropmenudiv" style="width: 150px;">
<a href="http://myspacecoast.com/Misc/Horoscope.htm">Daily Horoscope</a>
<a href="http://myspacecoast.com/Misc/On_This_Day.htm">On this Day</a>
<a target="_blank" href="http://edit.travel.yahoo.com/config/ytravel_checkflight">
Check Flight status</a>

</div>

<!--7th drop down menu -->                                                
<div id="dropmenu7" class="dropmenudiv" style="width: 150px">
<a href="http://myspacecoast.com/Contact/contact.htm">Contact Us</a>
<a href="http://myspacecoast.com/Contact/eventform.htm">Add an event</a>
</div>
hello
<script type="text/javascript">
//tabdropdown.initializetabmenu("tab_menu_id", optional_selected_tab_number)
//ie: tabdropdown.initializetabmenu("tab_menu_id", 2)
tabdropdown.initializetabmenu("shademenu")
</script>
</body>
</html>

**Genie** · 02-17-2007, 03:21 PM

Thank you, Mburt
Apparently you changed something in the html that I couldn't see.

Since your code works perfectly, can you tell me what you did?

**mburt** · 02-17-2007, 03:27 PM

Code:

<div id="shademenu" class="shadetabs" style="margin:0px">

Sets the outer-margin of the div to zero, causing no spacing.

**Genie** · 02-17-2007, 03:31 PM

Originally Posted by mburt

Code:

<div id="shademenu" class="shadetabs" style="margin:0px">

Sets the outer-margin of the div to zero, causing no spacing.

Very much appreciated.
Thank you again.

**AustinSIT** · 07-11-2008, 04:09 PM

I have a similar problem when i put the code into a header <div> the drop down menu moves its position and appears to the right but when not in a <div> it behaves? same files etc

Code:

<body>

	<div id="header_inner">
    <div id="bluemenu" class="bluetabs">
<ul>
<li><a href="about.html">About us</a></li>
<li><a href="courses.html" rel="dropmenu1_b">Courses</a></li>
<li><a href="why.html" >Why us?</a></li>
<li><a href="clients.html">Clients</a></li>
<li><a href="contact.html">Contact us</a></li>
</ul>
</div>

<!--1st drop down menu -->                                                   
<div id="dropmenu1_b" class="dropmenudiv_b">
<a href="photoshop.html">Photoshop</a>
<a href="illustrator.html">Illustrator</a>
<a href="webintro.html">Web intro</a>
<a href="webdesign.html">Web design</a>
<a href="taylor.html">Taylor made</a>

</div>

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

    </div>

**AustinSIT** · 07-11-2008, 04:51 PM

worked it out it was a css problem in the div

Code:

position: relative;

Thread: DD Tab Menu Spacing

Thread Tools

Search Thread

DD Tab Menu Spacing

Bookmarks

Bookmarks

Posting Permissions