Menu going screwy!

**winndknot** · 02-10-2009, 01:14 PM

1) Script Title: Drop down tab menu

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

3) Describe problem: ok, I have a dynamic drive coder helping me with the new drop down menu. I have uploaded the .js and the .css files to my site via the file manger import feature, and also via ftp. Then I make the page with the html code, I use Homestead as my server and publish it from there.

When published the submenu drop down boxes are off the page or not in the correct position. If you can take a look at the code for this http://oxygentrina.homestead.com/index.html and maybe let me know where it's going wrong I would really appreciate it.

It is suppose to look like the example #1 http://www.dynamicdrive.com/dynamici...roptabmenu.htm

I am not changing anything with the exception of the color in the .css file to make it more of my own, and I really don't understand what is changing.

Any comments or help would be sincerely appreciated. You have help tremendously in the past, and I would love to get over this last hurdle.

Thank you in advance to all who respond.

I called for tech support and they were helpless, and couldn't even tell me the phone number for the corporate office. I think it is Homestead's code that is fouling this up.

HELP PLEASE ANYBODY

thanks
__________________

**ddadmin** · 02-10-2009, 07:41 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 id="dropmenu1_a" class="dropmenudiv_a">
<a href="http://www.dreamsonthefly.com/granderonde.html">Grande Ronde</a>
<a href="http://www.dreamsonthefly.com/Owyhee.html">Owyhee</a>
</div>

<!--2nd drop down menu -->                                                
<div id="dropmenu2_a" class="dropmenudiv_a" style="width: 150px;">
<a href="http://www.dreamsonthefly.com/dtguide.html">Dave Tucker</a>

<a href="http://www.dreamsonthefly.com/rkpguide.html">Rhonda Price</a>
<a href="http://www.dreamsonthefly.com/guidesbios.html">Our Guides</a>
</div>

<!--3rd drop down menu -->  
<div id="dropmenu3_a" class="dropmenudiv_a" style="width: 150px;">
<a href="http://www.dreamsonthefly.com/steelheadflies.html">Steelhead Flies</a>
<a href="http://www.dreamsonthefly.com/troutflies.html">Trout Flies</a>
<a href="http://www.dreamsonthefly.com/atlanticsalmonflies.html">Atlantic Salmon Flies</a>
</div>

<!--4th drop down menu -->                                                   

<div id="dropmenu4_a" class="dropmenudiv_a">
<a href="http://www.dreamsonthefly.com/education.html">Education</a>
<a href="http://www.dreamsonthefly.com/resources.html">Resources</a>
</div>

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

**winndknot** · 02-10-2009, 08:59 PM

This is how the code looks at the preview before Homestead publishes it

HTML Code:

<script type="text/javascript" src="dropdowntabs.js">

/***********************************************
* Drop Down Tabs Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

<!-- CSS for Drop Down Tabs Menu #1 -->
<link rel="stylesheet" type="text/css" href="ddcolortabs.css" />




<div id="colortab" class="ddcolortabs">
<ul>

<li><a href="http://www.dreamsonthefly.com/index.html" title="Home"><span>Home</span></a></li>
<li><a href="http://www.dreamsonthefly.com/thefish.html" title="The Fish"><span>The Fish</span></a></li>
<li><a title="Destinations" rel="dropmenu1_a"><span>Destinations</span></a></li>
<li><a title="Guides" rel="dropmenu2_a"><span>Guides</span></a></li>	
<li><a href="http://www.dreamsonthefly.com/newlodging.html" title="Rates"><span>Rates</span></a></li>	
<li><a title="Flies" rel="dropmenu3_a"><span>Flies</span></a></li>
<li><a href="http://www.dreamsonthefly.com/photogallery.html" title="Gallery"><span>Photos</span></a></li>
<li><a href="http://www.dreamsonthefly.com/Contact.html" title="Contact Us"><span>Contact Us</span></a></li>
<li><a title="Links" rel="dropmenu4_a"><span>Links</span></a></li></ul>

</div>

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







<!--1st drop down menu -->                                                   
<div id="dropmenu1_a" class="dropmenudiv_a">
<a href="http://www.dreamsonthefly.com/granderonde.html">Grande Ronde</a>
<a href="http://www.dreamsonthefly.com/Owyhee.html">Owyhee</a>
</div>

<!--2nd drop down menu -->                                                
<div id="dropmenu2_a" class="dropmenudiv_a" style="width: 150px;">
<a href="http://www.dreamsonthefly.com/dtguide.html">Dave Tucker</a>

<a href="http://www.dreamsonthefly.com/rkpguide.html">Rhonda Price</a>
<a href="http://www.dreamsonthefly.com/guidesbios.html">Our Guides</a>
</div>

<!--3rd drop down menu -->  
<div id="dropmenu3_a" class="dropmenudiv_a" style="width: 150px;">
<a href="http://www.dreamsonthefly.com/steelheadflies.html">Steelhead Flies</a>
<a href="http://www.dreamsonthefly.com/troutflies.html">Trout Flies</a>
<a href="http://www.dreamsonthefly.com/atlanticsalmonflies.html">Atlantic Salmon Flies</a>
</div>

<!--4th drop down menu -->                                                   

<div id="dropmenu4_a" class="dropmenudiv_a">
<a href="http://www.dreamsonthefly.com/education.html">Education</a>
<a href="http://www.dreamsonthefly.com/resources.html">Resources</a>
</div>

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

And this is how the code looks when I publish it.

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<!-- <hs:metatags> -->
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
		<meta name="generator" content="Homestead SiteBuilder">
		<meta http-equiv="imagetoolbar" content="no">
		<meta http-equiv="imagetoolbar" content="false">
		<!-- </hs:metatags> -->
		
		<!-- <hs:title> -->

		<title>index</title>
		<!-- </hs:title> -->
		<script type="text/javascript">
			<!--
						function reDo() {
						        top.location.reload();
						}
						if (navigator.appName == 'Netscape' && parseInt(navigator.appVersion) < 5) {
						        top.onresize = reDo;
						}
						dom=document.getElementById
					//-->
		</script>
		<link type="text/css" href="http://www.homestead.com/~media/elements/Text/font_styles_ns4.css" rel="stylesheet">
		<style type="text/css">
			@import url(http://www.homestead.com/~media/elements/Text/font_styles.css);
			div.lpxcenterpageouter { text-align: center; position: absolute; top: 0px; left: 0px; width: 100% }
			div.lpxcenterpageinner { position: relative; margin: 0 auto; text-align: left; width: 697px; }
		</style>
		
	</head>
	<body onunload="" onload="" id="element1" link="#3333CC" bgcolor="#FFFFFF" scroll="auto" vlink="#6633CC">

		<noscript>
			<img alt="" src="http://www.homestead.com/~media/elements/shared/javascript_disabled.gif" height="40" border="0" width="373">
		</noscript>
		<div class="lpxcenterpageouter"><div class="lpxcenterpageinner"><!-- <hs:element3> --><div style="position: absolute; top: 107px; left: 21px; width: 676px; height: 46px; z-index: 0;" id="element3"><script type="text/javascript" src="dropdowntabs.js">

/***********************************************
* Drop Down Tabs Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

<!-- CSS for Drop Down Tabs Menu #1 -->
<link rel="stylesheet" type="text/css" href="ddcolortabs.css" />




<div id="colortab" class="ddcolortabs">
<ul>

<li><a href="http://www.dreamsonthefly.com/index.html" title="Home"><span>Home</span></a></li>

<li><a href="http://www.dreamsonthefly.com/thefish.html" title="The Fish"><span>The Fish</span></a></li>
<li><a title="Destinations" rel="dropmenu1_a"><span>Destinations</span></a></li>
<li><a title="Guides" rel="dropmenu2_a"><span>Guides</span></a></li>	
<li><a href="http://www.dreamsonthefly.com/newlodging.html" title="Rates"><span>Rates</span></a></li>	
<li><a title="Flies" rel="dropmenu3_a"><span>Flies</span></a></li>
<li><a href="http://www.dreamsonthefly.com/photogallery.html" title="Gallery"><span>Photos</span></a></li>
<li><a href="http://www.dreamsonthefly.com/Contact.html" title="Contact Us"><span>Contact Us</span></a></li>
<li><a title="Links" rel="dropmenu4_a"><span>Links</span></a></li></ul>

</div>

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







<!--1st drop down menu -->                                                   
<div id="dropmenu1_a" class="dropmenudiv_a">
<a href="http://www.dreamsonthefly.com/granderonde.html">Grande Ronde</a>
<a href="http://www.dreamsonthefly.com/Owyhee.html">Owyhee</a>
</div>

<!--2nd drop down menu -->                                                
<div id="dropmenu2_a" class="dropmenudiv_a" style="width: 150px;">
<a href="http://www.dreamsonthefly.com/dtguide.html">Dave Tucker</a>

<a href="http://www.dreamsonthefly.com/rkpguide.html">Rhonda Price</a>
<a href="http://www.dreamsonthefly.com/guidesbios.html">Our Guides</a>
</div>

<!--3rd drop down menu -->  
<div id="dropmenu3_a" class="dropmenudiv_a" style="width: 150px;">
<a href="http://www.dreamsonthefly.com/steelheadflies.html">Steelhead Flies</a>
<a href="http://www.dreamsonthefly.com/troutflies.html">Trout Flies</a>

<a href="http://www.dreamsonthefly.com/atlanticsalmonflies.html">Atlantic Salmon Flies</a>
</div>

<!--4th drop down menu -->                                                   

<div id="dropmenu4_a" class="dropmenudiv_a">
<a href="http://www.dreamsonthefly.com/education.html">Education</a>
<a href="http://www.dreamsonthefly.com/resources.html">Resources</a>
</div>

<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("colortab", 0)
</script>
</body></div><!-- </hs:element3> --></div></div>
		<!-- <hs:realtracker> -->

		<script type="text/javascript">
			<!--
					var id='';var res='';var partnerid=90006;
					var user='1753052834';
					var pp='index';
					function f(s){f2(s)};
					function f2(s){document.write('<img alt="" src="'+s+'" height="1" width="1" border="0"/>')};
				//-->
		</script>
		<script src="/~site/Scripts_ExternalRedirect/ExternalRedirect.dll?CMD=CMDGetJavaScript&amp;H_SITEID=RTK1&amp;H_AltURL=%2F%7Esite%2Frealtracker%2Frt_s90022.js&amp;HSGOTOURL=http%3A%2F%2Flayout1.realtracker.com%2Fincludes%2Frt_s90022a.js" type="text/javascript">
		</script>
		<script type="text/javascript">
			<!--
					
					
					f('/~site/Scripts_ExternalRedirect/ExternalRedirect.dll?CMD=CMDGotoURL&H_SITEID=RTK1&H_AltURL=%2f%7esite%2ftp.gif&H_HSGOTOURL=http%3a%2f%2fweb4.realtracker.com%2fnetpoll%2fimulti.asp&user='+escape(user)+'&pn='+escape(partnerid)+'&pp='+escape(pp)+'&js=1&to=-360&userurl='+escape(location.href)+res);
				//-->
		</script>
		<noscript>
			<img alt="" src="/~site/Scripts_ExternalRedirect/ExternalRedirect.dll?CMD=CMDGetGif&amp;H_SITEID=RTK2&amp;H_AltURL=%2F%7Esite%2Ftp.gif&amp;H_HSGOTOURL=http%3A%2F%2Fweb4.realtracker.com%2Fnetpoll%2Fimulti.asp%3Fuser%3D1753052834%26pn%3D90006%26pp%3Dindex%26js%3D0%26b%3D0%26to%3D-360" height="1" border="0" width="1">
		</noscript>
		<!-- </hs:realtracker> -->
	</body>
</html>

I honestly think this code is changed by Homestead somehow. Any thoughts?

**ddadmin** · 02-11-2009, 12:33 AM

Yep, that won't work, as when your page is actually published, the HTML for the drop down DIVs themselves are contained in other elements beside just the BODY tag itself (namely, <div class="lpxcenterpageouter"><div class="lpxcenterpageinner">). Can you insert the code for the menu in two stages? The first stage would be just the HTML for the top level tabs themselves:

Code:

<div id="colortab" class="ddcolortabs">
<ul>

<li><a href="http://www.dreamsonthefly.com/index.html" title="Home"><span>Home</span></a></li>
<li><a href="http://www.dreamsonthefly.com/thefish.html" title="The Fish"><span>The Fish</span></a></li>
<li><a title="Destinations" rel="dropmenu1_a"><span>Destinations</span></a></li>
<li><a title="Guides" rel="dropmenu2_a"><span>Guides</span></a></li>	
<li><a href="http://www.dreamsonthefly.com/newlodging.html" title="Rates"><span>Rates</span></a></li>	
<li><a title="Flies" rel="dropmenu3_a"><span>Flies</span></a></li>
<li><a href="http://www.dreamsonthefly.com/photogallery.html" title="Gallery"><span>Photos</span></a></li>
<li><a href="http://www.dreamsonthefly.com/Contact.html" title="Contact Us"><span>Contact Us</span></a></li>
<li><a title="Links" rel="dropmenu4_a"><span>Links</span></a></li></ul>

</div>

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

The second stage would be the HTML for the drop down DIVs plus the initialization script at the very end. Add that to the very end of your document.

**winndknot** · 02-11-2009, 02:53 PM

I tried the above it is still screwy! Homestead's help sent me this:

Thank you for contacting us.

The purpose of our web site service is to allow individuals without HTML knowledge the ability to create their own webpages. As such, we do not troubleshoot member's HTML difficulties.

Here are a few troubleshooting tips for using the Insert HTML Element.

1. Make sure you typed in the code correctly. If you are copying code from another source, you can highlight the original and press CTRL-C to copy, and then paste it into the dialog box by pressing CTRL-V. This helps eliminate errors!

2. When possible, place your Insert HTML Element at the bottom of the page. This, too, minimizes any displacement of the other Elements on your page.

3. As much as possible, eliminate overlap on the page that contains the Insert HTML Element. Unfortunately, it is often hard to determine if Elements are overlapping by simply viewing the page in your browser. If any part of the green selection boxes are overlapping, then those Elements are overlapping. You can use the 'Select All' function in the 'Edit' menu to see if you have any overlapping Elements.

4. Be sure to import to your account any images/graphics that are referred to in the HTML code. Any image that is referenced in your HTML code needs to include a "files/" path suffix. EXAMPLE:

If you would like to try to debug your own HTML code, I recommend that you use an HTML validator program. One program that I can recommend is CSE HTML Validator Lite. You can download this program free at www.download.com. For accurate results, please remember to use the checker only the imported HTML code, and not on your entire web page; our pages are coded in a special dialect which HTML checkers often see as errors.

So I checked and sure enough that seems to be the problem. He Homestad code is screwing everything up.

I did make some changes and you can see them here. The only issue now is that the sub menus are too far to the right. http://oxygentrina.homestead.com/index.html

thank you so much for your help, I really appreciate it.

**ddadmin** · 02-11-2009, 10:38 PM

The root of your problem remains; that is, the HTML for your Drop Down DIVs themselves are still contained inside additional DIVs, instead of just the BODY element itself.

Have you tried All Levels Menu instead, specifically, the 3rd theme that resembles tabs on its Menu Generator Page? This script supports a feature that will dynamically move your Drop Down DIVs to the end of the page automatically, and should resolve the issue you're having.

**winndknot** · 02-12-2009, 05:29 PM

DD~Thank you so much for all of your help with this issue, after much contemplation, I think I am going to put this part of my project on hold for a while. Sometimes its easier for me to walk away, ponder it, and then go back to it.

I have been working on these scripts for over 3 weeks now,

and will be okay with the one I have http://www.dreamsonthefly.com

Thank you again, you've been a great help!

Rhonda

BTW If you care to review what I have up on the site now, see above url addy. and make any comments, I'd love it.

Thread: Menu going screwy!

Thread Tools

Search Thread

Menu going screwy!

Still screwy

Tried it still screwy!

I give up!

Bookmarks

Bookmarks

Posting Permissions