...

View Full Version : rollover menu with drop down doesnt line up



mxpimp47
06-08-2007, 02:49 AM
ok it is my first time to make a rollover menu with a drop down list... im a small wanna be web designer on the side for some very plain sites for my family business. the problem im seeing is in different screen resolutions the drop downs dont line up under the button you rolled over. on some screens resolutions its perfect. then some its way off. and how can i take off the option to close the menu and make it just close on its own when the mouse rolls off? can you please help me control this menu so its correct no matter what you view it through? thanks ahead of time. and there might be more stuff that is incorrect in the code. please tell me what is incorrect and what doesnt need to be there! i appreciate all your help in advance.

heres a link to the menu (http://www.freestonemx.com/rollovermenu.inc)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<!-- menu design by clayton -->
<style>
<!--
.menufont { font-size: 10pt; font-family: arial,helvetica,san-serif; color: #000080; text-decoration: none; cursor: none }
.menufont:hover { font-size: 10pt; font-family: arial,helvetica,san-serif; color: #FF2200; text-decoration: none; cursor: hand }
-->
</style>
</head>

<body>
<!-- menu section -->
<TABLE cellSpacing=0 cellPadding=0 align="center" height="30" width="800" border=0>
<TBODY>
<TR>
<TD width="800">
<!-- home -->
<DIV id=home
style="Z-INDEX: 1; LEFT: 95px; VISIBILITY: hidden; WIDTH: 150px; HEIGHT: 0px; POSITION: absolute; TOP: 100px; BACKGROUND-COLOR: #8c8c8c; layer-background-color: #8C8C8C">
</DIV>

<!-- tickets -->
<DIV id=tickets
style="Z-INDEX: 2; LEFT: 549px; VISIBILITY: hidden; WIDTH: 160px; HEIGHT: 124px; POSITION: absolute; TOP: 78px; BACKGROUND-COLOR: #8c8c8c; layer-background-color: #8C8C8C">
<TABLE cellSpacing=0 cellPadding=0 width=158 bgColor=#E8E8FF border=0 bordercolorlight="#EAF8FD" bordercolordark="#006FA4">
<TBODY>
<TR>
<TD class=menufont><IMG src="menu_files/red.gif" border=0 width="9" height="11"> <A class=menufont
href="http://www.freestonemx.com/">Link 1</A></TD></TR>
<TR>
<TD class=menufont><IMG src="menu_files/red.gif" border=0 width="9" height="11"> <A class=menufont
href="http://www.freestonemx.com/">Link 2</A></TD></TR>
<TR>
<TD class=menufont><IMG src="menu_files/red.gif" border=0 width="9" height="11"> <A class=menufont
href="http://www.freestonemx.com/">Link 3</A></TD></TR>
<TR>
<TD class=menufont><IMG src="menu_files/red.gif" border=0 width="9" height="11"> <A class=menufont
href="http://www.freestonemx.com/">Link 4</A></TD></TR>
<TR>
<TD class=menufont><IMG src="menu_files/red.gif" border=0 width="9" height="11"> <A class=menufont
href="http://www.freestonemx.com/">Link 5</A></TD></TR>
<TR>
<TD class=menufont><IMG src="menu_files/red.gif" border=0 width="9" height="11"> <A class=menufont
href="http://www.freestonemx.com/">Link 6</A></TD></TR>
<TR>
<TD class=menufont align=middle>
<p align="right"><A
href="javascript:changeImages('image1','image1off');showHideLayers('tickets','','hide')"><IMG
height=26 src="menu_files/close.gif" width=63
border=0></A></p>
</TD></TR></TBODY></TABLE></DIV>

<!-- visitorsguide -->
<DIV id=visitorsguide
style="Z-INDEX: 3; LEFT: 709px; VISIBILITY: hidden; WIDTH: 160px; HEIGHT: 204px; POSITION: absolute; TOP: 78px; BACKGROUND-COLOR: #8c8c8c; layer-background-color: #8C8C8C">
<TABLE cellSpacing=0 cellPadding=0 width=158 bgColor=#E8E8FF border=0 bordercolorlight="#EAF8FD" bordercolordark="#006FA4">
<TBODY>
<TR>
<TD class=menufont><IMG src="menu_files/red.gif" border=0 width="9" height="11"> <A class=menufont
href="http://www.freestonemx.com/">Link 1</A></TD></TR>
<TR>
<TD class=menufont><IMG src="menu_files/red.gif" border=0 width="9" height="11"> <A class=menufont
href="http://www.freestonemx.com/">Link 2</A></TD></TR>
<TR>
<TD class=menufont><IMG src="menu_files/red.gif" border=0 width="9" height="11"> <A class=menufont
href="http://www.freestonemx.com/">Link 3</A></TD></TR>
<TR>
<TD class=menufont><IMG src="menu_files/red.gif" border=0 width="9" height="11"> <A class=menufont
href="http://www.freestonemx.com/">Link 4</A></TD></TR>
<TR>
<TD class=menufont><IMG src="menu_files/red.gif" border=0 width="9" height="11"> <A class=menufont
href="http://www.freestonemx.com/">Link 5</A></TD></TR>
<TR>
<TD class=menufont><IMG src="menu_files/red.gif" border=0 width="9" height="11"> <A class=menufont
href="http://www.freestonemx.com/">Link 6</A></TD></TR>
<TR>
<TD class=menufont><IMG src="menu_files/red.gif" border=0 width="9" height="11"> <A class=menufont
href="http://www.freestonemx.com/">Link 7</A></TD></TR>
<TR>
<TD class=menufont><IMG src="menu_files/red.gif" border=0 width="9" height="11"> <A class=menufont
href="http://www.freestonemx.com/">Link 8</A></TD></TR>
<TR>
<TD class=menufont><IMG src="menu_files/red.gif" border=0 width="9" height="11"> <A class=menufont
href="http://www.freestonemx.com/">Link 9</A></TD></TR>
<TR>
<TD class=menufont><IMG src="menu_files/red.gif" border=0 width="9" height="11"> <A class=menufont
href="http://www.freestonemx.com/">Link 10</A></TD></TR>
<TR>
<TD class=menufont><IMG src="menu_files/red.gif" border=0 width="9" height="11"> <A class=menufont
href="http://www.freestonemx.com/">Link 11</A></TD></TR>
<TR>
<TD class=menufont align=middle>
<p align="right"><A
href="javascript:changeImages('image2','image2off');showHideLayers('visitorsguide','','hide')"><IMG
height=26 src="menu_files/close.gif" width=63
border=0></A></p>
</TD></TR></TBODY></TABLE></DIV>

<!-- contact -->
<DIV id=contact
style="Z-INDEX: 4; LEFT: 870px; VISIBILITY: hidden; WIDTH: 160px; HEIGHT: 60px; POSITION: absolute; TOP: 78px; BACKGROUND-COLOR: #8c8c8c; layer-background-color: #8C8C8C">
<TABLE cellSpacing=0 cellPadding=0 width=158 bgColor=#E8E8FF border=0 bordercolorlight="#EAF8FD" bordercolordark="#006FA4">
<TBODY>
<TR>
<TD class=menufont><IMG src="menu_files/red.gif" border=0 width="9" height="11"> <A class=menufont
href="http://www.freestonemx.com/">Phone</A></TD></TR>
<TR>
<TD class=menufont><IMG src="menu_files/red.gif" border=0 width="9" height="11"> <A class=menufont
href="http://www.freestonemx.com/">Email</A></TD></TR>
<TR>
<TD class=menufont align=middle>
<p align="right"><A
href="javascript:changeImages('image4','image4off');showHideLayers('freestonemx','','hide')"><IMG
height=26 src="menu_files/close.gif" width=63
border=0></A></p>
</TD></TR></TBODY></TABLE></DIV>

<!-- freestonemx -->
<DIV id=freestonemx
style="Z-INDEX: 5; LEFT: 668px; VISIBILITY: hidden; WIDTH: 160px; HEIGHT: 0px; POSITION: absolute; TOP: 52px; BACKGROUND-COLOR: #8c8c8c; layer-background-color: #8C8C8C">
</DIV>


</TR></TBODY></TABLE>
<DIV></DIV>
<!-- menu section end -->
<!-- start rollover buttons -->
<TABLE cellSpacing=0 width="800" height="30" align="center" bgcolor="#000000" border=0 cellpading="0">
<TBODY>
<TR>
<TD>
<TABLE width="800" height="30" border=0 cellPadding=0 cellSpacing=0>
<TBODY>
<TR>
<TD vAlign=top width=10> </TD>
<TD vAlign=top noWrap>

<A onmouseover="changeImages('image0','image0on');changeImages('image1','image1off');changeImages('image2','image2of f');changeImages('image3','image3off');changeImages('image4','image4off');showHideLayers('home','',' show','tickets','','hide','visitorsguide','','hide','contact','','hide','freestonemx','','hide')"
href="http://www.freestonemx.com/national.asp"><IMG
height=30 src="menu_files/home_off.gif" width=160 border=0
name=image0></A><A
onmouseover="changeImages('image0','image0off');changeImages('image1','image1on');changeImages('image2','image2of f');changeImages('image3','image3off');changeImages('image4','image4off');showHideLayers('home','',' hide','tickets','','show','visitorsguide','','hide','contact','','hide','freestonemx','','hide')"
href="http://www.freestonemx.com"><IMG
height=30 src="menu_files/tickets_off.gif" width=160 border=0
name=image1></A><A
onmouseover="changeImages('image0','image0off');changeImages('image1','image1off');changeImages('image2','image2o n');changeImages('image3','image3off');changeImages('image4','image4off');showHideLayers('home','',' hide','tickets','','hide','visitorsguide','','show','contact','','hide','freestonemx','','hide')"
href="http://www.freestonemx.com"><IMG
height=30 src="menu_files/visitorsguide_off.gif" width=160 border=0
name=image2></A><A
onmouseover="changeImages('image0','image0off');changeImages('image1','image1off');changeImages('image2','image2o ff');changeImages('image3','image3on');changeImages('image4','image4off');showHideLayers('home','',' hide','tickets','','hide','visitorsguide','','hide','contact','','show','freestonemx','','hide')"
href="http://www.freestonemx.com"><IMG
height=30 src="menu_files/contact_off.gif" width=160 border=0
name=image3></A><A
onmouseover="changeImages('image0','image0off');changeImages('image1','image1off');changeImages('image2','image2o ff');changeImages('image3','image3off');changeImages('image4','image4on');showHideLayers('home','',' hide','tickets','','hide','visitorsguide','','hide','contact','','hide','freestonemx','','show','sea rchbox','','hide')"
href="http://www.freestonemx.com"><IMG height=30
src="menu_files/freestonemx_off.gif" width=160 border=0
name=image4></A> </TD>
</TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
<!-- end rollover buttons-->
</body>

<script language="JavaScript"><!--
if (document.images) {

function findObj(n, d) {
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=findObj(n,d.layers[i].document); return x;
}

function showHideLayers() {
var i,p,v,obj,args=showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
obj.visibility=v; }
}

if (document.images) {

image0on = new Image();
image0on.src = "http://www.freestonemx.com/menu_files/home_on.gif";

image0off = new Image();
image0off.src = "http://www.freestonemx.com/menu_files/home_off.gif";

image1on = new Image();
image1on.src = "http://www.freestonemx.com/menu_files/tickets_on.gif";

image1off = new Image();
image1off.src = "http://www.freestonemx.com/menu_files/tickets_off.gif";

image2on = new Image();
image2on.src = "http://www.freestonemx.com/menu_files/visitorsguide_on.gif";

image2off = new Image();
image2off.src = "http://www.freestonemx.com/menu_files/visitorsguide_off.gif";

image3on = new Image();
image3on.src = "http://www.freestonemx.com/menu_files/contact_on.gif";

image3off = new Image();
image3off.src = "http://www.freestonemx.com/menu_files/contact_off.gif";

image4on = new Image();
image4on.src = "http://www.freestonemx.com/menu_files/freestonemx_on.gif";

image4off = new Image();
image4off.src = "http://www.freestonemx.com/menu_files/freestonemx_off.gif";



}

function changeImages() {
if (document.images) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = eval(changeImages.arguments[i+1] + ".src");
}
}
}

function popUp(page,parameters)
{
newWindow=window.open(page,"",parameters)
}

function displayStatusMsg(msgStr) {
status=msgStr;
document.returnValue = true;
}

window.name='freestonemx';
function init() {
}

}

function act(imgName) {

if (document.images)
document[imgName].src = eval(imgName + "on.src");

}

function inact(imgName) {
if (document.images)
document[imgName].src = eval(imgName + "off.src");

}
// -->
</script>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum