Drop down menus not alligned with top menu

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:40

Drop down menus not alligned with top menu

Poster: aspen.olmsted
Dated: Thursday June 30 2005 - 14:40:11 BST

I am trying to see if I can use the menus as a replacement for mm_menu.js. The framework uses css absolute positioning and the menus are in a table. The whole page is wrapped in a <CENTER> and a <DIV>. I do not think I can change this as it comes from the application I am working in.

Here is the code:

Code:

<BODY class="body_css">
<CENTER><DIV style='position:relative;width:780px;height:100%;top:0px;left:0px;margin:0;padding:0'><TABLE id=njpac_menu WIDTH=601 HEIGHT=22 style='position:absolute;top:68px;left:1px;'  BORDER=0 CELLSPACING=0 CELLPADDING=0 ><TR valign=top><TD WIDTH=601 HEIGHT=22 valign=top><html>
<head>
<title>Milonic DHTML/JavaScript Menu Sample Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
BODY{
   FONT-FAMILY:verdana;
   font-size:12px;
   background-color:#FFFFFF;
}

.backG {
   FONT-FAMILY:verdana;
   background-color:#93c39b; 
   color:#ffffff; 
   border-bottom:#538c4d 2px solid;
   font-size:12px;
}   
td.form1
{
   FONT-FAMILY:verdana;
   background:#eaeaea;
   font-size:12px;
}

</style>   
</head>

<body>
      
<!--
    Milonic DHTML Website Navigation Menu Version 5.0+
    Copyright 2005 (c) Milonic Solutions Limited (UK). All Rights Reserved.
    Please visit http://www.milonic.com/ for more information.

    Although this software may have been freely downloaded, you must obtain a license before using it in any production environment.       
    The free use of this menu is only available for Non-Profit, Educational & Personal Web Sites who have obtained a license to use. 
    
    Free, Commercial and Corporate Licenses are available from our website.
    You also need to include a link back to http://www.milonic.com/ if you use the free license.
    
    All Copyright notices MUST remain in place at ALL times. 
    This includes the first three lines of this notice on every page that uses the menu.
    If you cannot comply with all of the above requirements, please contact us to arrange a license waiver.
-->   





<!--   ***** This is the section of code you need to paste into your web page *****-->
<script type="text/javascript" src="milonic_src.js"></script>   
<noscript><a href="http://www.milonic.com/">DHTML JavaScript Pull Down Website Menus by Milonic</a></noscript>
<script   type="text/javascript">
if(ns4)_d.write("<scr"+"ipt type=text/javascript src=mmenuns4.js><\/scr"+"ipt>");      
  else _d.write("<scr"+"ipt type=text/javascript src=mmenudom.js><\/scr"+"ipt>"); 
</script>
<script type="text/javascript" src="menu_data.js"></script>   
</body>
</html>
</TD></TR></TABLE></DIV></CENTER>
</BODY>
</HTML>

Poster: John
Dated: Thursday June 30 2005 - 14:54:10 BST

One problem is having two body tags in your code. Another is the menu does not like being cooped up in a div.

A URL, as requested, would help us more.

Poster: Ruth
Dated: Thursday June 30 2005 - 17:35:25 BST

Hi,

We have many people who use 'pre-created' templates that have tables and divs and there are solutions which we have provided but to do that we need to see the page as John noted.

Ruth

Here is a simple sample

Poster: aspen.olmsted
Dated: Thursday June 30 2005 - 18:14:49 BST

This is just the sample with the <CENTER><DIV> and <TABLE> wrapper.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML DIR="LTR">
<HEAD>
<TITLE>eSRO web site</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta HTTP-EQUIV="Expires" CONTENT="0">
</HEAD>
<BODY class="body_css">
<CENTER><DIV style='position:relative;width:780px;height:100%;top:0px;left:0px;margin:0;padding:0'><TABLE id=njpac_menu WIDTH=601 HEIGHT=22 style='position:absolute;top:68px;left:1px;' BORDER=0 CELLSPACING=0 CELLPADDING=0 ><TR valign=top><TD WIDTH=601 HEIGHT=22 valign=top><html>


<script type="text/javascript" src="milonic_src.js"></script>
<noscript><a href="http://www.milonic.com/">DHTML JavaScript Pull Down Website Menus by Milonic</a></noscript>
<script type="text/javascript">
if(ns4)_d.write("<scr"+"ipt type=text/javascript src=mmenuns4.js><\/scr"+"ipt>");
else _d.write("<scr"+"ipt type=text/javascript src=mmenudom.js><\/scr"+"ipt>");
</script>
<script type="text/javascript" src="menu_data.js"></script>

</TD></TR></TABLE></DIV></CENTER>
</BODY>
</HTML>

Poster: Ruth
Dated: Thursday June 30 2005 - 20:00:45 BST

Hi,

1. You can't put the menu in a div.
2. Your div won't center, you have center tags around it but you have the top and left set, so how will it center if the left is set to 1px?
3. You have not placed the menu in the table correctly. You cannot just put all the files there and call them.

Not having your page I don't know what is in the 68px area that you have set above the menu, I'm going to assume some kind of header and I suggest the following setup. I put borders and bordercolor on everything so I could see things on the page. You'd have to remove the color and reset the borders to 0. I also put a style in the head to get rid of the margins on the page since I don't have any of your style sheet. You'd have to do that yourself also. If you want the div to center you'll have to remove the top and left settings, as far as I know.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> 
<HTML DIR="LTR"> 
<HEAD> 
<TITLE>eSRO web site</TITLE> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> 
<meta HTTP-EQUIV="Expires" CONTENT="0"> 
<style type="text/css">
body{margin:0px}
</style>
</HEAD> 
<BODY class="body_css"> <!-- ***** This is the section of code you need to paste into your web page *****--> 
<script type="text/javascript" src="milonic_src.js"></script> 
<noscript><a href="http://www.milonic.com/">DHTML JavaScript Pull Down Website Menus by Milonic</a></noscript> 
<script type="text/javascript"> 
if(ns4)_d.write("<scr"+"ipt type=text/javascript src=mmenuns4.js><\/scr"+"ipt>"); 
else _d.write("<scr"+"ipt type=text/javascript src=mmenudom.js><\/scr"+"ipt>"); 
</script> 
<script type="text/javascript" src="menu_data.js"></script> 
<center><table width="100%" height=90px cellpadding=0 cellspacing=0 border=1 bordercolor="#FFCC00">
<tr>
       <td>whatever the header is that's supposed to be in the 68px above where you have the menu set goes here</td>
</tr>
<tr>
       <td height="22px"><center><TABLE id=njpac_menu WIDTH=601 HEIGHT=22 style='top:0px' CELLSPACING=0 CELLPADDING=0 BORDER=1 BORDERCOLOR="#66FFFF">
<TR valign=top><TD WIDTH=601 HEIGHT=22 valign=top>

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

</TD></TR></TABLE></center></td>
</tr>
</table></center>
<CENTER><DIV style='position:relative;border:2px solid #ff0000;width:780px;height:100%;top:0px;left:0px;margin:0;padding:0'>
</DIV></CENTER> 
</BODY> 
</HTML>

This is the main embedded menu file

Code:

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
orientation="horizontal";
style=menuStyle;
position="relative";
menuwidth=601;
menuheight=22;
aI("status=Back To Home Page;text=Home;url=http://www.milonic.com/;");
aI("showmenu=Samples;text=Menu Samples;");
aI("showmenu=Milonic;text=Milonic;");
aI("showmenu=Partners;text=Partners;");
aI("showmenu=Links;text=Links;");
aI("showmenu=MyMilonic;text=My Milonic;");
}
drawMenus();

As you can see the menu file calls are right after the body tag. The call for the main_embedded.js file is a separate file that is just the main menu and a drawmenus(); at the end of it, as the table directions specify. I used the download sample for the menu since I didn't have yours. There's a link below my name to the tablemenu directions.

Of course all this is mute if I made assumptions about the header section and such which are incorrect as to what you are doing.

Ruth

Industrial Strength JavaScript and DHTML Menus

Drop down menus not alligned with top menu

Here is a simple sample