[résolu]Menu Javascript pas centré avec Mozilla

[Funky-Fresh]

Je n'arrive pas à centrer le menu de mon site, du moins pour Mozilla. Avec IE, pas de problème quelque soit la résolution (enfin je crois) par contre avec Firefox c'est pas centre en 1024x768 ni en resolution > 1280x1024 (en fait c la seule resolution pour laquelle c ok)

 

Voici le code:

posYmenu = 115;

bgcolor='#FFDCB7';

bgcolor2='#FF8809';

posXmenu = screen.width/2-740/2;

document.write('<style type="text/css">');

document.write('.poppervert { POSITION: absolute; VISIBILITY: hidden; z-index:4; }')

document.write('#topgauche { position:absolute; top:'+posYmenu+'px; left:'+posXmenu+'px; z-index:10; }')

document.write('A:hover.menulinks {color:#FFFFFF; text-decoration:none; font-family:Tahoma;}')

document.write('A.menulinks {color:#000000; text-decoration:none; font-family:Tahoma;}')

document.write('</style>')

document.write('<DIV class=poppervert id=topdeckvert></DIV>');

 

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[1][0] = '<A HREF="http://www2.serveur4u.com/mangarena/amvs.php" CLASS=menulinks>AMV s</A>';

zlien[1][1] = '<A HREF="http://www2.serveur4u.com/mangarena/evazik.html" CLASS=menulinks>génériques</A>';

zlien[2][0] = '<A HREF="http://www2.serveur4u.com/mangarena/wallindex.html" CLASS=menulinks>index</A>';

zlien[2][1] = '<A HREF="http://www2.serveur4u.com/mangarena/wallseva01.html" CLASS=menulinks>Evangelion (44)</A>';

zlien[2][2] = '<A HREF="http://www2.serveur4u.com/mangarena/wallsbebop01.html" CLASS=menulinks>Cowboy Bebop (17)</A>';

zlien[2][3] = '<A HREF="http://www2.serveur4u.com/mangarena/wallshina01.html" CLASS=menulinks>Love Hina (15)</A>';

zlien[2][4] = '<A HREF="http://www2.serveur4u.com/mangarena/wallshell01.html" CLASS=menulinks>Ghost In The Shell (14)</A>';

zlien[2][5] = '<A HREF="http://www2.serveur4u.com/mangarena/wallsffantasy01.html" CLASS=menulinks>Final Fantasy (9)</A>';

zlien[2][6] = '<A HREF="http://www2.serveur4u.com/mangarena/wallsberserk01.html" CLASS=menulinks>Berserk (6)</A>';

zlien[2][7] = '<A HREF="http://www2.serveur4u.com/mangarena/wallsteacher01.html" CLASS=menulinks>Onegai Teacher (7)</A>';

zlien[2][8] = '<A HREF="http://www2.serveur4u.com/mangarena/wallsanctuary01.html" CLASS=menulinks>Angel Sanctuary (4)</A>';

zlien[2][9] = '<A HREF="http://www2.serveur4u.com/mangarena/wallsnoir01.html" CLASS=menulinks>Noir (12)</A>';

zlien[2][10] = '<A HREF="http://www2.serveur4u.com/mangarena/wallsiria01.html" CLASS=menulinks>Iria (4)</A>';

zlien[2][11] = '<A HREF="http://www2.serveur4u.com/mangarena/wallsmanga01.html" CLASS=menulinks>Manga divers (10)</A>';

zlien[2][12] = '<A HREF="http://www2.serveur4u.com/mangarena/wallsaubade01.html" CLASS=menulinks>Aubade (lingerie) (10)</A>';

zlien[2][13] = '<A HREF="http://www2.serveur4u.com/mangarena/wallslafrech01.html" CLASS=menulinks>Detournements & Fakes (12)</A>';

zlien[2][14] = '<A HREF="http://www2.serveur4u.com/mangarena/wallsjeux01.html" CLASS=menulinks>Jeux Video (26)</A>';

zlien[2][15] = '<A HREF="http://www2.serveur4u.com/mangarena/wallsheroic01.html" CLASS=menulinks>Heroic Fantasy (6)</A>';

zlien[2][16] = '<A HREF="http://www2.serveur4u.com/mangarena/wallszik01.html" CLASS=menulinks>Rock & Metal (25)</A>';

zlien[2][17] = '<A HREF="http://www2.serveur4u.com/mangarena/wallselectro01.html" CLASS=menulinks>Electro (4)</A>';

zlien[2][18] = '<A HREF="http://www2.serveur4u.com/mangarena/wallsfilms01.html" CLASS=menulinks>Films (9)</A>';

zlien[2][19] = '<A HREF="http://www2.serveur4u.com/mangarena/wallsautres01.html" CLASS=menulinks>Autres (9)</A>';

zlien[3][0] = '<A HREF="http://www2.serveur4u.com/mangarena/filmsindex.html" CLASS=menulinks>Index</A>';

zlien[3][1] = '<A HREF="http://www2.serveur4u.com/mangarena/rivieres2.html" CLASS=menulinks>Les Rivieres Pourpres II</A>';

zlien[3][2] = '<A HREF="http://www2.serveur4u.com/mangarena/resident.html" CLASS=menulinks>Resident Evil</A>';

zlien[3][3] = '<A HREF="http://www2.serveur4u.com/mangarena/28.html" CLASS=menulinks>28 Jours Plus Tard</A>';

zlien[4][0] = '<A HREF="http://www2.serveur4u.com/mangarena/jeuxindex.html" CLASS=menulinks>Index</A>';

zlien[4][1] = '<A HREF="http://www2.serveur4u.com/mangarena/testmetroid.html" CLASS=menulinks>Metroid Prime</A>';

zlien[4][2] = '<A HREF="http://www2.serveur4u.com/mangarena/testomen2.html" CLASS=menulinks>Blood Omen 2</A>';

zlien[4][3] = '<A HREF="http://www2.serveur4u.com/mangarena/testwindwaker.html" CLASS=menulinks>Zelda: The Wind Waker</A>';

zlien[5][0] = '<A HREF="http://www2.serveur4u.com/mangarena/dutils01.html" CLASS=menulinks>Utilitaires ( 8 )</A>';

zlien[5][1] = '<A HREF="http://www2.serveur4u.com/mangarena/dmulti01.html" CLASS=menulinks>Multimédia/mp3 (2)</A>';

zlien[5][2] = '<A HREF="http://www2.serveur4u.com/mangarena/dcustom01.html" CLASS=menulinks>Customisation (5)</A>';

var nava = (document.layers);

var nava = (document.layers);

var dom = (document.getElementById);

var iex = (document.all);

if (nava) { sknvert = document.topdeckvert }

else if (dom) { sknvert = document.getElementById("topdeckvert").style }

else if (iex) { sknvert = topdeckvert.style }

sknvert.top = posYmenu+44;

 

function pop(msg,pos)

{

sknvert.visibility = "hidden";

sknvert.left = posXmenu+pos;

a=true

var content ="<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR=#000000 WIDTH=155><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=1>";

pass = 0

while (pass < msg.length)

{

content += "<TR><TD BGCOLOR="+bgcolor+" onMouseOver=\"this.style.background='"+bgcolor2+"'\" onMouseOut=\"this.style.background='"+bgcolor+"'\" HEIGHT=20><FONT SIZE=1 FACE=\"Tahoma\">  "+msg[pass]+"</FONT></TD></TR>";

pass++;

}

content += "</TABLE></TD></TR></TABLE>";

if (nava)

  {

    sknvert.document.write(content);

  sknvert.document.close();

  sknvert.visibility = "visible";

  }

    else if (dom)

  {

  document.getElementById("topdeckvert").innerHTML = content;

  sknvert.visibility = "visible";

  }

    else if (iex)

  {

  document.all("topdeckvert").innerHTML = content;

  sknvert.visibility = "visible";

  }

}

function kill()

{

sknvert.visibility = "hidden";

}

document.onclick = kill;

document.write('<DIV ID=topgauche><center><img src="http://www2.serveur4u.com/mangarena/shell/menu.jpg" width="120" height="16" border="0" alt=""></center><TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR=#000000 WIDTH=740><TR><TD><TABLE CELLPADING=0 CELLSPACING=1 BORDER=0 WIDTH=100% HEIGHT=25>')

document.write('<TR><TD WIDTH=12.5% ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\'" onMouseOut="this.style.background=\''+bgcolor+'\'" HEIGHT=25><A HREF="http://www2.serveur4u.com/mangarena/index.html" CLASS=menulinks><FONT SIZE=1 FACE="Tahoma">accueil</FONT></A></a></TD>')

document.write('<TD WIDTH=12.5% ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[1],85)" onMouseOut="this.style.background=\''+bgcolor+'\'" HEIGHT=25><A onClick="return(false)" onMouseOver="pop(zlien[1],85)" href=# CLASS=menulinks><FONT SIZE=1 FACE="Tahoma">AMV & génériques</FONT></a></TD>')

document.write('<TD WIDTH=12.5% ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[2],178)" onMouseOut="this.style.background=\''+bgcolor+'\'" HEIGHT=25><A onClick="return(false)" onMouseOver="pop(zlien[2],178)" href=# CLASS=menulinks><FONT SIZE=1 FACE="Tahoma">wallpapers (243)</FONT></a></TD>')

document.write('<TD WIDTH=12.5% ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[3],271)" onMouseOut="this.style.background=\''+bgcolor+'\'" HEIGHT=25><A onClick="return(false)" onMouseOver="pop(zlien[3],271)" href=# CLASS=menulinks><FONT SIZE=1 FACE="Tahoma">critiques de films</FONT></a></TD>')

document.write('<TD WIDTH=12.5% ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[4],364)" onMouseOut="this.style.background=\''+bgcolor+'\'" HEIGHT=25><A onClick="return(false)" onMouseOver="pop(zlien[4],364)" href=# CLASS=menulinks><FONT SIZE=1 FACE="Tahoma">jeux videos</FONT></a></TD>')

document.write('<TD WIDTH=12.5% ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[5],455)" onMouseOut="this.style.background=\''+bgcolor+'\'" HEIGHT=25><A onClick="return(false)" onMouseOver="pop(zlien[5],455)" href=# CLASS=menulinks><FONT SIZE=1 FACE="Tahoma">downloads</FONT></a></TD>')

document.write('<TD WIDTH=12.5% ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\'" onMouseOut="this.style.background=\''+bgcolor+'\'" HEIGHT=25><A HREF="http://www2.serveur4u.com/mangarena/guestbook/livredor.php?action=readall" CLASS=menulinks><FONT SIZE=1 FACE="Tahoma">livre d"Or</FONT></A></a></TD>')

document.write('<TD WIDTH=12.5% ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\'" onMouseOut="this.style.background=\''+bgcolor+'\'" HEIGHT=25><a href="http://www2.serveur4u.com/mangarena/liens.html" CLASS=menulinks><FONT SIZE=1 FACE="Tahoma">liens</FONT></A></a></TD>')

document.write('</TABLE></TD></TR></TABLE></DIV>')

 

Une idée??

Modifié le 13 juin 2004 par Funky-Fresh

[KewlCat]

Avec juste le code, j'ai pas trop d'idée... Tu as une page d'exemple pour qu'on puisse constater l'étendue des dégâts ?

Mais il me semble que Mozilla et IE ont des façons différentes de compter les marges des éléments de type "block" et des tableaux... peut-être que...

[Laubean]

Salut,

 

c'est clair que beaucoup de sites deconnent sur Firefox quand y'a du Javascript.....

[KewlCat]

Ce n'est pas le cas dans ce script... Celui-là gère bien les navigateurs compatibles DOM (j'ai eu l'occasion de bosser à partir de ce script y'a qques années), ce n'est pas un problème de JavaScript, je crois...

En revanche, tous les scripts qui commencent par utiliser "document.all", faut oublier...

[Funky-Fresh]

et bien pour l'exemple:

http://www2.serveur4u.com/mangarena/index.html

[KewlCat]

Tu sais que window.screen.width, c'est la taille de l'écran, pas la taille de la fenêtre du navigateur ???

http://www.mozilla.org/docs/dom/domref/dom...01.html#1020243

Il faut peut-être utiliser window.innerWidth ? (ou forcer les gens à mettre le navigateur en plein écran ? Quand je passe Firefox en plein écran, ton menu est parfaitement au centre...)

[Funky-Fresh]

Tu sais que window.screen.width, c'est la taille de l'écran, pas la taille de la fenêtre du navigateur ???

http://www.mozilla.org/docs/dom/domref/dom...01.html#1020243

Il faut peut-être utiliser window.innerWidth ? (ou forcer les gens à mettre le navigateur en plein écran ?

Oui, mais avec "window.innerwidth" ca donne un résultat un peu particulier. Si le surfeur redimensionne la page apres qu'elle soit chargée le menu reste en place, c'est a dire n'importe ou. Je prefere donc garder "screen.width"

Quand je passe Firefox en plein écran, ton menu est parfaitement au centre...)

En effet je me suis fourvoyé, ca marche trèsbien. je sais pas pourquoi tout à l'heure ca me faisait des sales trucs quand je changeais de resolution.....

Tout ca pour dire que j'ai un peu l'air con et que le "problème" est résolu

 

Merci toutefois pour votre aide

[KewlCat]

Oui, mais avec "window.innerwidth" ca donne un résultat un peu particulier. Si le surfeur redimensionne la page apres qu'elle soit chargée le menu reste en place, c'est a dire n'importe ou.

Bin, c'est pas "n'importe où" puisque c'est calculé lors de la génération de la page (propriété left de la classe topgauche) pour être centré par rapport à la taille du navigateur...