JavaScript : Menu mal positionné

[peKKa]

Bonjour,

 

j'ai un problème avec mon menu dynamique en javascript.

Je vous donne tout de suite sa syntaxe :

posYmenu = 270;
bgcolor2='#FFCC00';
bgcolor='#FFCC00';
needcenter =true;
if(!needcenter)
posXmenu = 55;
else
{ if (document.all)
posXmenu = (document.body.clientWidth/2)-(800/2);
else
posXmenu = (window.innerWidth/2)-(800/2); 
}
document.write('<style type="text/css">');
document.write('.popper { POSITION: absolute; VISIBILITY: hidden; z-index:3; }');
document.write('#topgauche { position:absolute; top:'+posYmenu+'px; left:'+posXmenu+'px; z-index:10; }');
document.write('A:hover.ejsmenu {color:#000000; text-decoration:none;}');
document.write('A.ejsmenu {color:#000000; text-decoration:none;}');
document.write('</style>');
document.write('<DIV class=popper id=topdeck></DIV>');
/*
SCRIPT EDITE SUR L'EDITEUR JAVACSRIPT
http://www.editeurjavascript.com
*/

/*
LIENS
*/
zlien = new Array;
zlien[0] = new Array;
zlien[1] = new Array;
zlien[2] = new Array;
zlien[3] = new Array;
zlien[4] = new Array;
zlien[5] = new Array;
zlien[6] = new Array;
zlien[7] = new Array;

zlien[1][0] = '<A HREF="../infos/infos.html" CLASS=ejsmenu>Infos société</A>';
zlien[1][1] = '<A HREF="../infos/rech.html" CLASS=ejsmenu>Etudes et recherche</A>';
zlien[2][0] = '<A HREF="../formation/formtec.html" CLASS=ejsmenu>Formations techniques</A>';
zlien[2][1] = '<A HREF="../formation/form.html" CLASS=ejsmenu>Formations génériques</A>';

var nava = (document.layers);
var dom = (document.getElementById);
var iex = (document.all);
if (nava) { skn = document.topdeck }
else if (dom) { skn = 
document.getElementById("topdeck").style }
else if (iex) { skn = topdeck.style }
skn.top = posYmenu+30;

function pop(msg,pos)
{
skn.visibility = "hidden";
a=true
skn.left = posXmenu+pos;
var content ="<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR=#000000 WIDTH=100><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=1>";
pass = 0
while (pass < msg.length)
{
content += "<TR><TD ALIGN=center BGCOLOR="+bgcolor+" onMouseOver=\"this.style.background='"+bgcolor2+"'\" onMouseOut=\"this.style.background='"+bgcolor+"'\" HEIGHT=30><FONT SIZE=1 FACE=\"Verdana\"><b>  "+msg[pass]+"</b></FONT></TD></TR>";
pass++;
}
content += "</TABLE></TD></TR></TABLE>";
if (nava)
{
skn.document.write(content);
skn.document.close();
skn.visibility = "visible";
}
else if (dom)
{
document.getElementById("topdeck").innerHTML = 
content;
skn.visibility = "visible";
}
else if (iex)
{
document.all("topdeck").innerHTML = content;
skn.visibility = "visible";
}
}
function kill()
{
skn.visibility = "hidden";
}
document.onclick = kill;
document.write('<DIV ID=topgauche><TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR=#000000 WIDTH=800><TR><TD><TABLE CELLPADING=0 CELLSPACING=1 BORDER=0 WIDTH=100% HEIGHT=30><TR>')
document.write('<TD WIDTH=100 HEIGHT=30 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[0],0)" onMouseOut="this.style.background=\''+bgcolor+'\'"><A onMouseOver="pop(zlien[0],0)" HREF="../default.htm" CLASS=ejsmenu><FONT SIZE=1 FACE="Verdana"><b>Accueil</b></FONT></a></TD>')
document.write('<TD WIDTH=100 HEIGHT=30 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[1],98)" onMouseOut="this.style.background=\''+bgcolor+'\'"><FONT SIZE=1 FACE="Verdana"><b>Infos sur le CIRP</b></FONT></TD>')
document.write('<TD WIDTH=100 HEIGHT=30 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[2],197)" onMouseOut="this.style.background=\''+bgcolor+'\'"><FONT SIZE=1 FACE="Verdana"><b>Formations</b></FONT></TD>')
document.write('<TD WIDTH=100 HEIGHT=30 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[3],300)" onMouseOut="this.style.background=\''+bgcolor+'\'"><A onMouseOver="pop(zlien[3],300)" HREF="../bilan/bilan.html" CLASS=ejsmenu><FONT SIZE=1 FACE="Verdana"><b>Bilan</b></FONT></a></TD>')
document.write('<TD WIDTH=100 HEIGHT=30 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[4],400)" onMouseOut="this.style.background=\''+bgcolor+'\'"><A onMouseOver="pop(zlien[4],400)" HREF="../candidat/cand.html" CLASS=ejsmenu><FONT SIZE=1 FACE="Verdana"><b>Espace Candidat</b></FONT></a></TD>')
document.write('<TD WIDTH=100 HEIGHT=30 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[5],500)" onMouseOut="this.style.background=\''+bgcolor+'\'"><A onMouseOver="pop(zlien[5],400)" HREF="../entreprise/entre.html" CLASS=ejsmenu><FONT SIZE=1 FACE="Verdana"><b>Espace Entreprise</b></FONT></a></TD>')
document.write('<TD WIDTH=100 HEIGHT=30 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[6],600)" onMouseOut="this.style.background=\''+bgcolor+'\'"><A onMouseOver="pop(zlien[6],400)" HREF="../contact/contact.html" CLASS=ejsmenu><FONT SIZE=1 FACE="Verdana"><b>Contact</b></FONT></a></TD>')
document.write('<TD WIDTH=100 HEIGHT=30 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[7],600)" onMouseOut="this.style.background=\''+bgcolor+'\'"><A onMouseOver="pop(zlien[7],400)" HREF="../iut/iut.html" CLASS=ejsmenu><FONT SIZE=1 FACE="Verdana"><b>Nouveautés télécharger</b></FONT></a></TD>')
document.write('</TR></TABLE></TD></TR></TABLE></DIV>')

 

Ce code est utilisé sur cette page : http://atjuju.free.fr/test.htm

et celle ci : http://atjuju.free.fr/test2.htm

 

Il n'y a aucun problème sous IE mais par contre sous Firefox, lorsque la page dépasse un écran la scrollbar verticale apparait et le menu se décalle (voir test2)

Moi je veux que le menu reste au centre...

 

Savez vous comment je peux faire pour arranger ce problème ?

 

Si je centre directement le tableau, les sous menu (représentés aussi dans des tableaux) ne sont pas positionné correctement.

 

Merci pour votre aide et à bientot.