Using an image before the menu

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

Using an image before the menu

Poster: douginme
Dated: Sunday August 20 2006 - 23:44:51 BST

I wanted to use an image above the horizontal menu I created for my webpage. By modifying the starting position of the menu, I got this to work using Internet Explorer, but when I tested this with Netscape and with FireFox, the menu did not line up with the image; in fact it somewhat overlaid the image. You may see what I am talking about by viewing http://www.portlandlandmarks.org/test.htm

Poster: Ruth
Dated: Monday August 21 2006 - 8:57:03 BST

Hi,

The best way to do that to make sure it is correct in all browsers at all resolutions is to place the menu in a table. What you need to do is create a table of two rows, 1 column that is in that table cell where you have the image now. You'd have to remake the image and get rid of the bottom part. Then put the image in the top row and put the main menu only in the bottom row.

1. Cut out the main menu from the menu_data.js file, paste it into its own file, remove the top and left positions, put in position="relative"; in their place, and put a drawMenus(); at the end of the file, just like is present in the menu_data.js file and save it - call it main_data.js or something.

2. Leave the calls you have now just as they are, and add a call for the main_data.js file into that table cell.

Code:

<td><SCRIPT language=JavaScript src="main_data.js" 
type=text/javascript> </SCRIPT></td>

Done this way, no matter where that image ends up, since it is the top row of the table and the menu is the bottom, the menu will always be below it.

The other option, but I don't know what happens with the absolute position when resolution changes, will that image always be at the same top position and left position if the resolution is 800x600, or 1028x768, or higher? If it will, if it will not move and having the menu set at top=105 and left=22 will be correctly positioning it with relation to the image then go into your css and add margin:0px; into your Body tag. Different browsers have different default margin settings and that is probably what is causing the problem. You will have to fiddle with the menu position once you set that margin to 0, I think it's something like left=12; top=90;

If you are putting it in a table, because I'll be gone for some days, I'll put the full coding below.

The top table you have now, including the call for the main_data.js file will be

Code:

<TABLE style="BORDER-COLLAPSE: collapse" cellSpacing=2 cellPadding=5 
  width=625><TBODY>
  <TR vAlign=top align=left>
    <TD colSpan=3><!--               HEADING NAVIGATION    .................................................... -->
      <table cellSpacing=0 cellpadding=0>
<tr>
       <td><P align="center"><IMG height=116 alt="Greater Portland Landmarks" 
      src="topheader_wide1.gif" width=600 border=0></p></td>
</tr>
<tr>
       <td><SCRIPT language=JavaScript src="main_data.js" 
type=text/javascript>
</SCRIPT></td>
</tr>
</table></TD></TR><!--               END OF HEADING NAVIGATION    .............................................. --><!--               SIDE LINKS TO ITEMS OF SPECIAL INTEREST ................................... -->
  

Your main_data.js file will be

Code:

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
orientation="horizontal";
style=menuStyle;
position="relative";
aI("showmenu=Home;text=Home;");
aI("showmenu=Help_you;text=How Can Landmarks <br> Help You?;");
aI("showmenu=Get_involved;text=Getting <br> Involved;");
aI("showmenu=Education;text=Education;");
aI("showmenu=Library;text=Library;");
aI("showmenu=Kidstuff;text=Kidstuff;");
aI("showmenu=Going_on;text=What's <br> Going On?;");
}

drawMenus();

You will have to cut out the bottom white part of the image since you no longer need that space. Also, if you want that image to be centered you'll need to center the table. That should move the menu with it since it is positioned inside the cell.

Hope this helps.

Ruth

Thanks for the solution!

Poster: douginme
Dated: Monday August 21 2006 - 15:41:02 BST

After a bit of trial and error, I followed your suggestion that involved putting the script into a table with the header image. It now works well.

Thanks a lot for the quick and very helpful response.

I just need to do something similar but with Collapse Menu

Poster: sgmuser
Dated: Tuesday August 22 2006 - 2:36:50 BST

I have collapse menu configured in my page. I am trying to put a simple table with 2 rows 2 columns on top of the menu. As this is a layered setup, i couldn't get it working. The table goes below the menu always.

Pls check the following url for some idea...

http://pg.photos.yahoo.com/ph/rajvbs/de ... pg&.src=ph

Any help would be appreciated.

Thanks.
Sgmuser

Poster: Ruth
Dated: Friday August 25 2006 - 5:20:57 BST

Hi sgmuser,

Thanks for the shots, that makes it easy to understand, however, we need to see the menu on the page in order to check your coding and give you aa solution as to how to do it.

Thanks,

Ruth

Industrial Strength JavaScript and DHTML Menus

Using an image before the menu

Thanks for the solution!

I just need to do something similar but with Collapse Menu