drop-down menu appearing under the page text and images

juliaw · Post by **juliaw** » Fri Nov 17, 2006 3:16 pm

I have a menu where the drop-down part is appearing under the text and images of the page.

this is the style:

with(TestStyle=new mm_style()){
styleid=2;
fontfamily="comic sans ms,verdana,helvetica";
fontsize="12px";
fontstyle="normal";
fontweight="normal";
offbgcolor="#000000";
offcolor="#FFFFFF";
onbgcolor="red";
oncolor="#000000";
padding=3;
separatorcolor="red";
separatorsize=1;
bgimage="images/j77button.gif";
overbgimage="images/j77button_on.gif";
}
Please can anyone help?

Thanks

Julia

Post by **Ruth** » Fri Nov 17, 2006 3:23 pm

Hello,

Please, we need a page to see what's happening. There isn't any way to tell from a style post because the issue you address has nothing to do with style it has to do with your page and how the actual menu is functioning.

In the years I've been helping here I've never had a question that says the menu is going behind images when it opens so we have nothing to base a response on with regard the issue and we'd need to see the page to figure it out.

Thanks

Ruth

juliaw · Post by **juliaw** » Fri Nov 17, 2006 3:45 pm

Thanks for you prompt reply.
This page is on my laptop at the moment so I can't direct you to a site, the only way would be sending you an image of the page fom a screen print in word or something - would that be acceptable?

Julia

Post by **Ruth** » Fri Nov 17, 2006 3:49 pm

Hi,

An image doesn't help, we need to see the coding. You could paste all the necessary info here and we could try and make a page. We'd need the page html coding, any css file coding, and all the menu_data.js file coding.

Ruth

juliaw · Post by **juliaw** » Fri Nov 17, 2006 9:30 pm

Here goes, it's long!

As a side I am also having to put in very large off-sets in the menu_data.js file, so if you could help me with that also that would be great!!

<html >

<head>
<title>Jubilee77 YFC home page</title>
<link rel="stylesheet" href="style/j77Stylediv1.css" />

</head>

<body>
<script type="text/javascript" src="milonic_src.js"></script>
<noscript><a href="http://milonic.com/">JavaScript Menus and DHTML Menus Powered by Milonic</a></noscript>
<script type="text/javascript">

</script>
<div id="divcontent" >
<div id="leftcolumn" >
<div id="logo">
<div id="image-wrapper" >
<img src="images/mediumlogo.gif" alt="" border="0" width="140" height="218" />
<div id="menu">
 <script language="JavaScript" src="source/j77menu_data.js" type="text/javascript"></script>
</div>
</div>
</div>

</div>
<div class="rightcolumn" >
<img src="images/Name.gif" />
<div id="primarycontent">
<br />
<h1> Welcome to the Jubilee 77 YFC home page</h1>
<br />
<p class="para"> We are a boys football club situated in West Fareham, our home ground being Henry Cort School,
We play in the Portsmouth Youth football league which plays Sundays, we have teams for uhder9's right up to under 16's
each year trains during the week and if you work hard you will be picked for the team on sunday!
</p>
<p class="para2">
<img alt="Jubilee77 Logo" src="images/J77Logo_GreySmall.gif" width="22" border="0">
<b> Want to join?</b> More players are required at most age groups Come along to a training session. To find out where the training sessions are email club@jubilee77.com or telephone 023 92xx xxxx and leave a message stating: Name, Age Group and a number we can call you back on.
</p>
<p class="para2">
<img alt="Jubilee77 Logo" src="images/J77Logo_GreySmall.gif" width="22" border="0">
<b>Jubilee 77 Youth football Club</b>
was first set up in 1977, the Silver Jubilee year. It has grown from x clubs to 16 youth clubs plus some Adult indoor football teams. <a href="#">more...</a>
</p>

</div>
<div id="secondarycontent">
<div align="right">
<img src="images/footballphoto2.jpg" alt="" /> </div>

<p class="stoppress">Stop Press</p>



<div id="pyfllogo"> <img alt="pyfl Logo" src="images/pyfllogo.gif" width="70" border="0"></div>
<div id="falogo"> <img alt="pyfl Logo" src="images/FACrestMedium.jpg" width="40" border="0"> </div>
</div>
</div>
</div>

now here is my .css file:

body {
text-align: center;
background: #CCCCCC;
background-color : #CCCCCC;
}
p {
font-family: Comic Sans MS,Arial Black,Aharoni, sans-serif;
font-size:10pt;
margin:10px;

}
h1{font-family: Comic Sans MS,Arial Black,Aharoni, sans-serif;
font-size:13pt;
color:blue;
text-align: center;
top :10;
}

#divcontent{
margin: 0 auto; background-color:white; width: 804px; text-align: left;
}
#leftcolumn {
position: relative;
left:0px;
top:0px;
width:200px;

border:0;
float:left;
height:600px;
background: url(../images/column.gif);
}
.rightcolumn {
position: relative;
left:0px;
top:0px;
width:604px;

border:0;
float:left;

}

#logo {
position: relative;
left:0px;
top:0px;
width:200px;
background:red;
border:0;
height: 600px
}
#image-wrapper {
top: 7px;
left: 30px;
position: relative;
}

#menu{
top: 10px;
position: relative;
z-index:+2;

}
#primarycontent{
position: relative;
left:0px;
top:0px;
width:400px;
z-index:-1;
border:0;
float:left;
}
#secondarycontent{
position: relative;
left:0px;
top:0px;
width:204px;
background:#fff;
border:0;
float:left;

}
#paraheader
{font-size:16pt;
text-align="center" ;
color:blue;
font-family: Comic Sans MS, Arial Black, Aharoni,sans-serif;
}
#para{font-size:12pt;
text-align="left" ;
color:black;
font-family: Comic Sans MS, Arial , Aharoni,sans-serif;
margin: 5px;
z-index:-1;
}
#para2{ position: relative;
font-family: Comic Sans MS, Arial Black, Aharoni,sans-serif;

font-size:10pt;
z-index:-1;
}

.stoppress{background-color:red;
vertical-align: top;
text-align: center;
position: relative;
top:0px;
width:204px;
border:0;
padding:0;
margin:0;
}

}
#pyfllogo{ position: relative;
top:300px;
left:20px;
float:left ;
}
#falogo{ position: relative;
top:310px;
float:left ;
left:60px;
}

now here is my j77menu_data.js

fixMozillaZIndex=true; //Fixes Z-Index problem with Mozilla browsers but causes odd scrolling problem, toggle to see if it helps
_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=2;
_subOffsetLeft=-2;

with(menuStyle=new mm_style()){
styleid=2;
bordercolor="#999999";
borderstyle="solid";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="75%";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";

offcolor="#FFFFFF";

oncolor="#000000";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Shadow(color=#777777', Direction=135, Strength=3)";
padding=4;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="white";
separatorsize=1;
subimage="images/arrow.gif";
subimagepadding=2;
bgimage="images/j77button.gif";
overbgimage="images/j77button_on.gif";
}

with(background=new mm_style()){
bgimage="images/j77button.gif";
fontfamily="comic sans ms,verdana,helvetica";
borderstyle="solid";
fontfamily="Helvetica";
fontsize="75%";
fontstyle="italic";
fontweight="bold";
image="images/transparent.gif";
imagepadding=4;
itemheight=25;
itemwidth=170;
offcolor="#333300";
oncolor="#ffffff";
overbgimage="images/j77button_on.gif";
separatorcolor="transparent";
separatorsize=10;
subimage="images/arrow.gif";
}

with(TestStyle=new mm_style()){
styleid=2;
fontfamily="comic sans ms,verdana,helvetica";
fontsize="12px";
fontstyle="normal";
fontweight="normal";
offbgcolor="#000000";
offcolor="#FFFFFF";
onbgcolor="red";
oncolor="#000000";
padding=3;
separatorcolor="red";
separatorsize=1;
bgimage="images/j77button.gif";
overbgimage="images/j77button_on.gif";
}

with(milonic=new menuname("Main Menu")){
screenposition="left";
alwaysvisible=1;
position="relative";
itemwidth=159;
top=50;
orientation="vertical";
style=background;
aI("align=center;text=Home;url=index.php;");
aI("align=center;showmenu=Teams;text=Teams;");
aI("align=center;text=News;url=newslist.php;");
aI("align=center;showmenu=Information;text=Information;");
aI("align=center;text=Forums;url=/phpBB2/index.php;");
aI("align=center;text=Contacts;url=contacts.html;");
}

with(milonic=new menuname("Milonic")){
orientation="horizontal";
style=TestStyle;
top="offset=-5";
aI("align=center;text=Purchasing;url=http://milonic.com/cbuy.php;");
aI("align=center;text=Contact Us;url=http://milonic.com/contact.php;");
aI("align=center;text=Newsletter;url=http://milonic.com/newsletter.php;");
aI("align=center;;text=FAQ;url=http://milonic.com/menufaq.php;");
aI("align=center;;text=Privacy Policy;url=http://milonic.com/privacy.php;");
aI("align=center;text=Discussion Forum;url=http://forum.milonic.com/;");
}

with(milonic=new menuname("Teams")){
orientation="vertical";
position="absolute";
style=TestStyle;
top="offset=-900";
left="offset=-250";
aI("align=center;text=U8;url=http://www.a-q.co.uk/;");
aI("align=center;text=U9;url=http://www.sms2email.com/;");
aI("align=center;text=U10;url=http://www.sms2email.com/;");
aI("align=centerf;text=U11A;url=http://www.sms2email.com/;");
aI("align=center;text=U11B;url=http://www.sms2email.com/;");
aI("align=center;text=U12;url=http://www.sms2email.com/;");
aI("align=center;text=U13;url=http://www.sms2email.com/;");
aI("align=center;text=U14A;url=http://www.sms2email.com/;");
aI("align=center;showmenu=14Bmenu;text=U14B;");
aI("align=center;text=U15;url=http://www.sms2email.com/;");
aI("align=center;text=U16;url=http://www.softidiom.com/?milonicmenu;");
}

with(milonic=new menuname("14Bmenu")){
orientation="horizontal";
style=TestStyle;
top="offset=-250";
left="offset=-250";
position="absolute";

aI("align=center;text=Fixtures;clickfunction=javascript:window.open('U14CResults.html','mywindow','status=no, toolbar=no, resizable=no, scrollbars=no, location=no, width=500px, height=500px,left=200,top=50,screenX=200,screenY=50');");
aI("align=center;text=News;clickfunction=javascript:window.open('U14BNews.mht','mywindow','status=no, toolbar=no, resizable=no, scrollbars=no, location=no, width=500px, height=500px,left=200,top=50,screenX=200,screenY=50');");
aI("align=center;text=results;clickfunction=javascript:window.open('U14Bfixtures.htm','mywindow','status=no, toolbar=no, resizable=no, scrollbars=no, location=no, width=600px, height=600px,left=200,top=50,screenX=200,screenY=50');");
}

with(milonic=new menuname("Information")){

itemwidth=167;
orientation="horizontal";
style=TestStyle;
top="offset=-250";
left="offset=-250";
aI("align=center;text=Boot Exchange;url=Bootex.html;");
aI("align=center;text=Locations;url=locations.html;");
aI("align=center;text=Events;url=http://www.php.net/;");
}

drawMenus();

Post by **Ruth** » Sat Nov 18, 2006 3:25 am

Hi,

It's a z-index problem in your divs. The left column is a z-index which puts it 'under' the right one.

You also have a real problem in placing the menu in the div. You cannot put it in there like that.

The left column css is

Code: Select all

 
#leftcolumn { 
position: relative; 
left:0px; 
top:0px; 
width:200px; 
border:0; 
float:left; 
height:600px; 
background: url(../images/column.gif);
z-index:1; 
}

This is your menu_data, it is now two files. You have to have two files, one which has only the main menu in it and is called in the div, and then the other with the subs which is called with the other program files. I did this but you need to read the info on relative positioned menus at the main site, it refers to table placement but it also applies to divs, any situation in which the menu is placed relatively.

Note the difference in the coding for the two subs in the sub_data file that actually open. Use that setup as you add submenus. You can work on the offsets as you see fit. I removed the left offset from the team one and used openstyle="rtl" which opens the submenu at the right of the main.

Main data file, I've named it embedded_main_data.js

Code: Select all

with(milonic=new menuname("Main Menu")){ 
alwaysvisible=1; 
position="relative"; 
itemwidth=159;
orientation="vertical"; 
style=background; 
aI("align=center;text=Home;url=index.php;"); 
aI("align=center;showmenu=Teams;text=Teams;"); 
aI("align=center;text=News;url=newslist.php;"); 
aI("align=center;showmenu=Information;text=Information;"); 
aI("align=center;text=Forums;url=/phpBB2/index.php;"); 
aI("align=center;text=Contacts;url=contacts.html;"); 
} 
drawMenus();

The sub_data I've name sub_data.js

Code: Select all

fixMozillaZIndex=true; //Fixes Z-Index problem with Mozilla browsers but causes odd scrolling problem, toggle to see if it helps 
_menuCloseDelay=500; 
_menuOpenDelay=150; 
_subOffsetTop=2; 
_subOffsetLeft=-2; 

with(menuStyle=new mm_style()){ 
styleid=2; 
bordercolor="#999999"; 
borderstyle="solid"; 
borderwidth=1; 
fontfamily="Verdana, Tahoma, Arial"; 
fontsize="75%"; 
fontstyle="normal"; 
headerbgcolor="#ffffff"; 
headercolor="#000000"; 
offcolor="#FFFFFF"; 
oncolor="#000000"; 
outfilter="randomdissolve(duration=0.3)"; 
overfilter="Fade(duration=0.2);Shadow(color=#777777', Direction=135, Strength=3)"; 
padding=4; 
pagebgcolor="#82B6D7"; 
pagecolor="black"; 
separatorcolor="white"; 
separatorsize=1; 
subimage="arrow.gif"; 
subimagepadding=2; 
bgimage="j77button.gif"; 
overbgimage="j77button_on.gif"; 
} 

with(background=new mm_style()){ 
bgimage="j77button.gif"; 
fontfamily="comic sans ms,verdana,helvetica"; 
borderstyle="solid"; 
fontfamily="Helvetica"; 
fontsize="75%"; 
fontstyle="italic"; 
fontweight="bold"; 
image="transparent.gif"; 
imagepadding=4; 
itemheight=25; 
itemwidth=170; 
offcolor="#333300"; 
oncolor="#ffffff"; 
overbgimage="j77button_on.gif"; 
separatorcolor="transparent"; 
separatorsize=10; 
subimage="arrow.gif"; 
} 

with(TestStyle=new mm_style()){ 
styleid=2; 
fontfamily="comic sans ms,verdana,helvetica"; 
fontsize="12px"; 
fontstyle="normal"; 
fontweight="normal"; 
offbgcolor="#000000"; 
offcolor="#FFFFFF"; 
onbgcolor="red"; 
oncolor="#000000"; 
padding=3; 
separatorcolor="red"; 
separatorsize=1; 
bgimage="j77button.gif"; 
overbgimage="j77button_on.gif"; 
} 

with(milonic=new menuname("Milonic")){ 
orientation="horizontal"; 
style=TestStyle; 
top="offset=-5"; 
aI("align=center;text=Purchasing;url=http://milonic.com/cbuy.php;"); 
aI("align=center;text=Contact Us;url=http://milonic.com/contact.php;"); 
aI("align=center;text=Newsletter;url=http://milonic.com/newsletter.php;"); 
aI("align=center;;text=FAQ;url=http://milonic.com/menufaq.php;"); 
aI("align=center;;text=Privacy Policy;url=http://milonic.com/privacy.php;"); 
aI("align=center;text=Discussion Forum;url=http://milonic.com/forum/;"); 
} 

with(milonic=new menuname("Teams")){ 
orientation="vertical"; 
position="absolute"; 
style=TestStyle;
openstyle="rtl";
 
aI("align=center;text=U8;url=http://www.a-q.co.uk/;"); 
aI("align=center;text=U9;url=http://www.sms2email.com/;"); 
aI("align=center;text=U10;url=http://www.sms2email.com/;"); 
aI("align=centerf;text=U11A;url=http://www.sms2email.com/;"); 
aI("align=center;text=U11B;url=http://www.sms2email.com/;"); 
aI("align=center;text=U12;url=http://www.sms2email.com/;"); 
aI("align=center;text=U13;url=http://www.sms2email.com/;"); 
aI("align=center;text=U14A;url=http://www.sms2email.com/;"); 
aI("align=center;showmenu=14Bmenu;text=U14B;"); 
aI("align=center;text=U15;url=http://www.sms2email.com/;"); 
aI("align=center;text=U16;url=http://www.softidiom.com/?milonicmenu;"); 
} 

with(milonic=new menuname("14Bmenu")){ 
orientation="horizontal"; 
style=TestStyle

aI("align=center;text=Fixtures;clickfunction=javascript:window.open('U14CResults.html','mywindow','status=no, toolbar=no, resizable=no, scrollbars=no, location=no, width=500px, height=500px,left=200,top=50,screenX=200,screenY=50');"); 
aI("align=center;text=News;clickfunction=javascript:window.open('U14BNews.mht','mywindow','status=no, toolbar=no, resizable=no, scrollbars=no, location=no, width=500px, height=500px,left=200,top=50,screenX=200,screenY=50');"); 
aI("align=center;text=results;clickfunction=javascript:window.open('U14Bfixtures.htm','mywindow','status=no, toolbar=no, resizable=no, scrollbars=no, location=no, width=600px, height=600px,left=200,top=50,screenX=200,screenY=50');"); 
} 

with(milonic=new menuname("Information")){ 

itemwidth=167; 
orientation="horizontal"; 
style=TestStyle; 
aI("align=center;text=Boot Exchange;url=Bootex.html;"); 
aI("align=center;text=Locations;url=locations.html;"); 
aI("align=center;text=Events;url=http://www.php.net/;"); 
} 

drawMenus();

You're call for the main menu in that div is this

Code: Select all

<div id="menu"> <script language="JavaScript" src="embedded_main.js" type="text/javascript"></script> 
</div>

and your call for your other menu files has this added to them.

Code: Select all

<script type="text/javascript" src="milonic_src.js"></script> 
<noscript><a href="https://milonic.com/">JavaScript Menus and DHTML Menus Powered by Milonic</a></noscript> 
<script type="text/javascript"> 
<!-- 
if(ns4)_d.write("<script language=JavaScript src=mmenuns4.js><\/script>"); 
else _d.write("<script language=JavaScript src=mmenudom.js><\/script>"); 
--> 
</script> 
<script language="JavaScript" src="sub_data.js" type="text/javascript"></script>

Ruth

juliaw · Post by **juliaw** » Sat Nov 18, 2006 9:26 am

Thanks for your reply -

Julia

juliaw · Post by **juliaw** » Sun Nov 19, 2006 4:03 pm

Thanks for your help - It'sworking now and have read through the information about relative positioning.

Julia