Industrial Strength JavaScript and DHTML Menus
About Us
Testimonials
Contact Us
Our Distinguished Clients
Investing in Non-Profits
Where Are We
Privacy Policy
Software Licensing Agreement
DHTML JavaScript Menu
Product Information
Page Integration
Quick Reference Guides
Embedding Into a Table or DIV
Purchase
Back To Start Of Archive
Taken From The Forum: Help & Support for DHTML Menu Version 5+
Forum Topic: Click to view post
Last Updated: Saturday July 14 2012 - 06:07:01
positioning tramline menu over graphic
Poster: swtxgrlnyc
Dated: Monday July 10 2006 - 22:05:33 BST
hi, i read some of the topics on positioning the menus and i understand how to do that using the top= and left= commands, but its always hidden behind my main webpage graphic... i took some screenshots:
this is the one with the menu behind it:
http://72.36.253.186/~midasrea/picture001.jpg
this is after i pasted a picture of the menu to where i want the menu on the webpage:
http://72.36.253.186/~midasrea/picture002.jpg
and for reference, this is the website address:
http://72.36.253.186/~midasrea/index.html
(please ignore the textboxes..i havent repositioned them yet)
please help!!
Poster: Ruth
Dated: Tuesday July 11 2006 - 7:41:30 BST
Hi,
You can position a menu over a graphic, however since you will use absolute positioning to do it, when the resolution changes it won't be there anymore. It will still be at it's absolute position.
Having said that, I have redone your page so that the menu will be where you want it and will stay there. The way to do that is to set up a table. It also requires you to split your image into two, the building top part and then the grey and white bottom part.
To do what you wanted I needed to code the page like this
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Midas Realty, Inc.</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<STYLE>A {
TEXT-DECORATION: none
}
BODY {
margin:0px;
SCROLLBAR-FACE-COLOR: #ffffff;
SCROLLBAR-HIGHLIGHT-COLOR: #003366;
SCROLLBAR-SHADOW-COLOR: #003366;
SCROLLBAR-3DLIGHT-COLOR: #ffffff;
SCROLLBAR-ARROW-COLOR: #003366;
SCROLLBAR-TRACK-COLOR: #ffffff;
SCROLLBAR-DARKSHADOW-COLOR: #ffffff;
background:#003366
}
.bg{background: url(location_lrg.gif) repeat-y top left}
</STYLE>
<SCRIPT language=JavaScript src="milonic_src.js" type=text/javascript></SCRIPT>
<SCRIPT language=JavaScript>
if(ns4)_d.write("<scr"+"ipt language=JavaScript src=mmenuns4.js><\/scr"+"ipt>");
else _d.write("<scr"+"ipt language=JavaScript src=mmenudom.js><\/scr"+"ipt>"); </SCRIPT>
<SCRIPT language=JavaScript src="sub_data.js" type=text/javascript></SCRIPT>
<META http-equiv=imagetoolbar content=no>
<META content="MSHTML 5.50.4807.2300" name=GENERATOR></HEAD>
<BODY oncontextmenu="return false" text=#003366 vLink=#666666 aLink=#666666
link=#666666 bgColor=#003366 leftMargin=0 topMargin=0><CENTER>
<table width="800" cellpadding=0 cellspacing=0 height="1000" align="center" border=0 bordercolor="#FFCC00">
<tr>
<td height="274"></td>
<td><img src="logo_top.jpg" width="800" height="274" border="0"></td>
<td></td>
</tr>
<tr>
<td></td>
<td style="background: url(bg_bottom.jpg) no-repeat top left;padding:0px" valign="top">
<table border=0 cellpadding=0 cellspacing=0 height=26>
<tr>
<td>
<script>
with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
style=menuStyle;
position="relative";
aI("text=home;url=http://www.midasrealtyonline.com/index.html;");
aI("showmenu=aboutus;text=about us;");
aI("showmenu=listings;text=property listings;");
aI("showmenu=calendar;text=open house;");
aI("showmenu=contact;text=contact us;");
}
drawMenus();
</script>
</td>
</tr>
</table>
</td>
<td></td>
</tr>
</table>
</CENTER>
<CENTER>
<DIV id=layer1
style="BORDER-RIGHT: #000000 0px solid; PADDING-RIGHT: 0px; BORDER-TOP: #000000 0px solid; PADDING-LEFT: 0px; Z-INDEX: 1; LEFT: 61px; BACKGROUND-IMAGE: url(background.jpg); PADDING-BOTTOM: 0px; BORDER-LEFT: #000000 0px solid; WIDTH: 750px; PADDING-TOP: 0px; BORDER-BOTTOM: #000000 0px solid; POSITION: absolute; TOP: 1050px; HEIGHT: 25px"><IMG
style="BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none"
alt="" src="" useMap=#bottombar> <MAP id=bottombar name=bottombar><AREA
title=" jnk7 __at__ cornell.edu" shape=RECT target=_new coords=680,5,739,24
href="%20jnk7 __at__ cornell.edu"><AREA noHref=nohref shape=RECT alt=""
coords=0,0,0,0></MAP></DIV></CENTER>
<DIV id=layer1
style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 0px; SCROLLBAR-FACE-COLOR: #ffffff; Z-INDEX: 1; LEFT: 485px; BACKGROUND-IMAGE: url(background.jpg); PADDING-BOTTOM: 0px; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: auto; BORDER-LEFT: #cccccc 1px solid; WIDTH: 300px; SCROLLBAR-SHADOW-COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #cc3366; PADDING-TOP: 0px; SCROLLBAR-TRACK-COLOR: #ffffff; BORDER-BOTTOM: #cccccc 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; POSITION: absolute; TOP: 525px; HEIGHT: 500px">
<P><IMG src="">
<CENTER></CENTER><B><BR><FONT face=verdana color=#cc3366 size=1></B><IMG
src=""><FONT color=#cc3366><B>insert text here</FONT> </DIV>
<DIV id=layer1
style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 0px; SCROLLBAR-FACE-COLOR: #ffffff; Z-INDEX: 1; LEFT: 72px; BACKGROUND-IMAGE: url(background.jpg); PADDING-BOTTOM: 0px; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: auto; BORDER-LEFT: #cccccc 1px solid; WIDTH: 350px; SCROLLBAR-SHADOW-COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #cc3366; PADDING-TOP: 0px; SCROLLBAR-TRACK-COLOR: #ffffff; BORDER-BOTTOM: #cccccc 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; POSITION: absolute; TOP: 775px; HEIGHT: 250px">
<P>
<CENTER><IMG src=""></CENTER><B><BR><FONT face=verdana color=#cc3366
size=1>insert text here1<BR><BR></FONT></FONT></DIV></B></B>
</BODY></HTML>
<HTML><HEAD><TITLE>Midas Realty, Inc.</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<STYLE>A {
TEXT-DECORATION: none
}
BODY {
margin:0px;
SCROLLBAR-FACE-COLOR: #ffffff;
SCROLLBAR-HIGHLIGHT-COLOR: #003366;
SCROLLBAR-SHADOW-COLOR: #003366;
SCROLLBAR-3DLIGHT-COLOR: #ffffff;
SCROLLBAR-ARROW-COLOR: #003366;
SCROLLBAR-TRACK-COLOR: #ffffff;
SCROLLBAR-DARKSHADOW-COLOR: #ffffff;
background:#003366
}
.bg{background: url(location_lrg.gif) repeat-y top left}
</STYLE>
<SCRIPT language=JavaScript src="milonic_src.js" type=text/javascript></SCRIPT>
<SCRIPT language=JavaScript>
if(ns4)_d.write("<scr"+"ipt language=JavaScript src=mmenuns4.js><\/scr"+"ipt>");
else _d.write("<scr"+"ipt language=JavaScript src=mmenudom.js><\/scr"+"ipt>"); </SCRIPT>
<SCRIPT language=JavaScript src="sub_data.js" type=text/javascript></SCRIPT>
<META http-equiv=imagetoolbar content=no>
<META content="MSHTML 5.50.4807.2300" name=GENERATOR></HEAD>
<BODY oncontextmenu="return false" text=#003366 vLink=#666666 aLink=#666666
link=#666666 bgColor=#003366 leftMargin=0 topMargin=0><CENTER>
<table width="800" cellpadding=0 cellspacing=0 height="1000" align="center" border=0 bordercolor="#FFCC00">
<tr>
<td height="274"></td>
<td><img src="logo_top.jpg" width="800" height="274" border="0"></td>
<td></td>
</tr>
<tr>
<td></td>
<td style="background: url(bg_bottom.jpg) no-repeat top left;padding:0px" valign="top">
<table border=0 cellpadding=0 cellspacing=0 height=26>
<tr>
<td>
<script>
with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
style=menuStyle;
position="relative";
aI("text=home;url=http://www.midasrealtyonline.com/index.html;");
aI("showmenu=aboutus;text=about us;");
aI("showmenu=listings;text=property listings;");
aI("showmenu=calendar;text=open house;");
aI("showmenu=contact;text=contact us;");
}
drawMenus();
</script>
</td>
</tr>
</table>
</td>
<td></td>
</tr>
</table>
</CENTER>
<CENTER>
<DIV id=layer1
style="BORDER-RIGHT: #000000 0px solid; PADDING-RIGHT: 0px; BORDER-TOP: #000000 0px solid; PADDING-LEFT: 0px; Z-INDEX: 1; LEFT: 61px; BACKGROUND-IMAGE: url(background.jpg); PADDING-BOTTOM: 0px; BORDER-LEFT: #000000 0px solid; WIDTH: 750px; PADDING-TOP: 0px; BORDER-BOTTOM: #000000 0px solid; POSITION: absolute; TOP: 1050px; HEIGHT: 25px"><IMG
style="BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none"
alt="" src="" useMap=#bottombar> <MAP id=bottombar name=bottombar><AREA
title=" jnk7 __at__ cornell.edu" shape=RECT target=_new coords=680,5,739,24
href="%20jnk7 __at__ cornell.edu"><AREA noHref=nohref shape=RECT alt=""
coords=0,0,0,0></MAP></DIV></CENTER>
<DIV id=layer1
style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 0px; SCROLLBAR-FACE-COLOR: #ffffff; Z-INDEX: 1; LEFT: 485px; BACKGROUND-IMAGE: url(background.jpg); PADDING-BOTTOM: 0px; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: auto; BORDER-LEFT: #cccccc 1px solid; WIDTH: 300px; SCROLLBAR-SHADOW-COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #cc3366; PADDING-TOP: 0px; SCROLLBAR-TRACK-COLOR: #ffffff; BORDER-BOTTOM: #cccccc 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; POSITION: absolute; TOP: 525px; HEIGHT: 500px">
<P><IMG src="">
<CENTER></CENTER><B><BR><FONT face=verdana color=#cc3366 size=1></B><IMG
src=""><FONT color=#cc3366><B>insert text here</FONT> </DIV>
<DIV id=layer1
style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 0px; SCROLLBAR-FACE-COLOR: #ffffff; Z-INDEX: 1; LEFT: 72px; BACKGROUND-IMAGE: url(background.jpg); PADDING-BOTTOM: 0px; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: auto; BORDER-LEFT: #cccccc 1px solid; WIDTH: 350px; SCROLLBAR-SHADOW-COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #cc3366; PADDING-TOP: 0px; SCROLLBAR-TRACK-COLOR: #ffffff; BORDER-BOTTOM: #cccccc 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; POSITION: absolute; TOP: 775px; HEIGHT: 250px">
<P>
<CENTER><IMG src=""></CENTER><B><BR><FONT face=verdana color=#cc3366
size=1>insert text here1<BR><BR></FONT></FONT></DIV></B></B>
</BODY></HTML>
Note in the css I set the margin to 0, that is to make sure that the starting point in all browsers is the same since they have different default margins. If you want a margin around the image set it in css so that all browsers have the same positioning. I also set your background color in the css, using the same that you have set in the body tag. Next I created a class called bg. That class will be used in the menu file, it uses one of the menu images I created to set it up as a background in the main menu which means that if people change font size on their browser the menu will always have that green line down it and won't show blank areas.
Next I created the table of two rows and 3 columns, and I then split your image, using the top part as an image in the top middle table cell and the bottom part as a background in the bottom center table cell. The reason it needs to be a background is so that you can put another table in that cell, align it at the top, by default it's at the left and place the main menu there.
In that small table, I placed the main menu setting position relative, that means it will always be in that place where that table is.
Finally, I used that grey and white background to make new images for the menu, those images have the grey part of the background with the green line right at the right edge of the left side grey, then the white part that was originally there in the original menu images location and location_on. This means the image is 100px wide instead of 24 but that keeps the green line always at that point in that table background. I hope that made sense.
Ruth
