Discussion :

[silverfab34]

Bonjour à tous,
Je suis en train de creer un site web statique en HTML et javaScript.
Ma page principal est un cadre avec un menu en javascript (que j'appel !).
Mon souci vient du fait que je n'arrive pas à positionner ce menu à la bonne place. Il se place correctement sous IE mais mal sous Mozilla.
Si quelqu'un peut m'aider.

Voici le menu. (recuperer sur le net et completer par moi !)

menu.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
 
//************ Menu Principal ************// 
Color0M = '#FC7613' //Couleur du texte orange
Color1M = '#577b8b' //Couleur Arrière gris foncé
Color2M = '#CCCCCC' //Couleur Arrière Surbrillance  gris clair
Color3M = '#CCCCCC' //Couleur Bordure gris clair
PosY = 500 //Distance entre le haut de l'écran et le menu 
LargeurM = 110 //Largeur 
HauteurM = 30 //Hauteur 
AlignM = 'center' //'center','right','left' 
FontM = 'Arial' //Police 
SizeM = 12 //Taille de la Police 
WeightM = 'bold' //Epaisseur de la Police 
CursorM = 'default' //Curseur-> default,hand... 
 
menu = new Array 
i=0 
//--------[Texte/Html]------------------[ Adresse ]--------------------------// 
menu[i++]='About Us' ;menu[i++]='#' 
menu[i++]='Solutions' ;menu[i++]='#' 
menu[i++]='Products' ;menu[i++]='#' 
menu[i++]='Partners' ;menu[i++]='#' 
menu[i++]='Resellers' ;menu[i++]='#' 
menu[i++]='Support' ;menu[i++]='#'
menu[i++]='Contact' ;menu[i++]='#'
 
//************ Sous-Menus ************// 
Color0S = '#000000' //Couleur du texte 
Color1S = '#CCCCCC' //Couleur Arrière 
Color2S = '#999999' //Couleur Arrière Surbrillance 
Color3S = '#CCCCCC' //Couleur Bordure 
EnLigne = 0 //1:pour ranger sur une seule ligne 0:en colonne 
LargeurS = 110 //Largeur 
HauteurS = 20 //Hauteur 
AlignS = 'center' //'center','right','left' 
FontS = 'Arial' //Police 
SizeS = 10 //Taille de la Police 
WeightS = 'bold' //Epaisseur de la Police 
FonduS = 1 //1:Fondu, 0:aucun 
CursorS = 'default' //Curseur-> default,hand... 
 
k=-1; zlien=new Array 
 
i=0; zlien[++k]=new Array 
//------------[Texte/Html]------------------[ Adresse ]-------------------------------// 
zlien[k][i++]='News';zlien[k] [i++]=''
i=0; zlien[++k]=new Array 
i=0; zlien[++k]=new Array 
i=0; zlien[++k]=new Array 
i=0; zlien[++k]=new Array 
i=0; zlien[++k]=new Array 
i=0; zlien[++k]=new Array 
//************ Fin des paramètres, Début du programme ************// 
document.write('<style>') 
document.write('.ejmenu {background:'+Color1M+';text-align:'+AlignM+';font:'+WeightM+' '+SizeM+' '+FontM+';color:'+Color0M+';cursor:'+CursorM+'}') 
document.write('.ejsmenu {background:'+Color1S+';text-align:'+AlignS+';font:'+WeightS+' '+SizeS+' '+FontS+';color:'+Color0S+';cursor:'+CursorS+'}') 
document.write('</style>') 
 
function fadeIn(obj) 
{ obj.style.filter="blendTrans(duration=1)" 
  if(obj.filters.blendTrans.status!=1) 
  { obj.filters.blendTrans.Apply() 
    obj.style.visibility="visible" 
    obj.filters.blendTrans.Play() 
  } 
} 
 
document.onclick = function() { skn.visibility='hidden' } 
//document.onmousemove = function() { dgt.top=document.body.scrollTop+PosY; dgt.visibility='visible' } 
//window.onscroll = function() { dgt.visibility=skn.visibility='hidden' } 
 
function pop(msg,pos) 
{ skn.visibility="hidden" 
  skn.top= HauteurM 
  if(!msg.length) return 
  if(EnLigne) 
  { content="<TABLE style='border-collapse:collapse;'WIDTH="+LargeurM*menu.length/2+" bordercolor="+Color3S+" BORDER=1><TR>" 
    for(pass=0;pass<msg.length;pass+=2) content+="<TD onMouseDown='location.href=\""+msg[pass+1]+"\"' onMouseOver=\"this.style.background='"+Color2S+"'\" onMouseOut=\"this.style.background='"+Color1S+"'\" HEIGHT="+HauteurS+" CLASS=ejsmenu>"+msg[pass]+"</TD>" 
  } else 
  { skn.left=pos-1 
    content="<TABLE style='border-collapse:collapse;'WIDTH="+LargeurS+" bordercolor="+Color3S+" BORDER=1>" 
    for(pass=0;pass<msg.length;pass+=2) content+="<TR><TD WIDTH="+LargeurS+" onMouseDown='location.href=\""+msg[pass+1]+"\"' onMouseOver=\"this.style.background='"+Color2S+"'\" onMouseOut=\"this.style.background='"+Color1S+"'\" HEIGHT="+HauteurS+" CLASS=ejsmenu>"+msg[pass]+"</TD></TR>" 
  } 
  document.getElementById("topdeck").innerHTML=content+"</TR></TABLE>" 
  if(document.all && FonduS) fadeIn(topdeck); else skn.visibility="visible"; 
} 
 
document.write('<DIV style="position:relative"><DIV style="POSITION:absolute;VISIBILITY:hidden;z-index:15" id=topdeck></DIV><TABLE ID=topmenu style="position:absolute;border-collapse:collapse;" bordercolor='+Color3M+' BORDER=1 WIDTH='+LargeurM*menu.length/2 +' HEIGHT='+HauteurM+'><tr>') 
skn=document.getElementById('topdeck').style 
//dgt=document.getElementById('topmenu').style
for(pass=0;pass<menu.length/2;pass++) document.write("<TD WIDTH="+LargeurM+" onMouseDown='location.href=\""+menu[pass*2+1]+"\"' onMouseOver='this.style.background=\""+Color2M+"\";pop(zlien["+pass+"],this.offsetLeft)' onMouseOut='this.style.background=\""+Color1M+"\"' CLASS=ejmenu>"+menu[pass*2]+"</TD>") 
document.write('</TR></TABLE></DIV>') 
//dgt.top=document.body.scrollTop+PosY

Et voici ma page html : index.html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Page d'accueil</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
 
<body>
<br>
<div align="center">
<table width="90%"  height="600" border="1" cellpadding="0" cellspacing="0" bordercolor="#666666">
<tr  height="600">
<td>
<table width="100%"  height="600" border="0" cellpadding="0" cellspacing="0" bordercolor="#666666">
  <tr height="50">
    <td width="20%" height="50"rowspan="3" bgcolor="#577b8b"><div align="center"><img src="images/logo.jpg" width="154" height="100" align="top" /></div></td>
    <td width="80%" height="40" bgcolor="577b8b" border="0">&nbsp;	</td>
  </tr>
    <tr>
    <td height="21" bgcolor="577b8b" border="0">&nbsp;
      <script language="JavaScript" src="menu.js" type="text/JavaScript"></script></td>
  </tr>
  <tr height="50">
    <td height="21" bgcolor="577b8b" border="0">&nbsp;      </td>
  </tr>
  <tr height="450">
    <td>
 <table height="100%" width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
  <td height="375"style="background-image:url(images/left_bg.jpg)">
  </td>
  </tr>
  <tr>
  <td height="75"style="background-image:url(images/left_bg_bt.jpg)">
  </td>
  </tr>
  </table>
 
	</td>
    <td >&nbsp;</td>
  </tr>
  <tr height="50">
    <td bgcolor="#abc3cf">&nbsp;</td>
    <td bgcolor="#abc3cf">&nbsp;</td>
  </tr>
</table>
</td>
</tr>
</table>
 
</div>
</body>
</html>

Dans le HTML, le javascript est introduit par :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
    <tr>
    <td height="21" bgcolor="577b8b" border="0">&nbsp;
      <script language="JavaScript" src="menu.js" type="text/JavaScript"></script></td>
  </tr>

Si quelqu'un peut me dire comment bien positionner mon menu, merci d'avance !!!

[nox75]

Tu auras forcément des différences de ce genre si tu jongles avec les navigateurs. Il faut gérer le cas Mozilla à part.
Fais ton placement dans IE correctement, regarde comment placer correctement dans Mozilla (les coordonnées ne devraient pas changer beaucoup) et une fois que tu as tes coordonnées correctes pour chaque navigateur, tu testes en utilisant la propriété appName de l'objet navigator, et tu appliques les coordonnées de l'un ou de l'autre selon la valeur.

[silverfab34]

Fais ton placement dans IE correctement, regarde comment placer correctement dans Mozilla (les coordonnées ne devraient pas changer beaucoup) et une fois que tu as tes coordonnées correctes pour chaque navigateur, tu testes en utilisant la propriété appName de l'objet navigator, et tu appliques les coordonnées de l'un ou de l'autre selon la valeur.

Ok merci pour le conseil, aurais tu un exemple d'utilisation de appName et de navigator !
Actuellement, le placement est correct sous IE, mais c'est sous Mozilla que c'est decalé !
Merci pour l'aide.

[E.Bzz]

Bonjour,

Il faut gérer le cas Mozilla à part.
Fais ton placement dans IE correctement, ...

Oui, mais avec la logique inverse : c'est Mozilla qui correspond le plus au standard, et IE qui est ... "éxotique"
Mieux vaut donc tout régler correctement pour Mozilla, et ensuite gérer le cas spécifique IE ...

Dans ton cas, ne suffit-il pas d'ajouter "px" (l'unité) aux coordonnées (height, top, width et height) ?

A+

[nox75]

C'est pas faux ^^
D'une maniere générale je suis plutot pro-mozilla (ou anti-IE disons )

Les unités px il me semble que ca ne change rien le décalage est toujours là (à confirmer hein, j'ai pas mozilla au boulot pour tester)

Sinon pour le navigator.appName ba tout est dit.

[silverfab34]

C'est pas faux ^^
D'une maniere générale je suis plutot pro-mozilla (ou anti-IE disons )

Les unités px il me semble que ca ne change rien le décalage est toujours là (à confirmer hein, j'ai pas mozilla au boulot pour tester)

Sinon pour le navigator.appName ba tout est dit.

Donc pour ma part, si je comprend bien, dans mon fichier "menu.js" je dois faire la difference entre Mozilla et IE du style :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
Nom = navigator.appName;
 
 
 
if (Nom == 'Mozilla') {
 
mon menu sous Mozilla
}
 
 
 
if (Nom == 'Microsoft Internet Explorer') {
Mon menu sous IE
}

Sauf que dans "menu.js" je ne vois pas où jouer pour changer le positionnement de mon menu ! (à part PosY= 0 ).

Merci

[E.Bzz]

Donc pour ma part, si je comprend bien, dans mon fichier "menu.js" je dois faire la difference entre Mozilla et IE

Pas forcément.
As-tu essayé d'ajouter les "px" comme indiqué ?
Dans ton dernier exemple, ça donnerait

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

PosY= 0+"px";

Bien sûr il faudra le faire partout, y compris quand les valeurs sont stockées dans des variables ...

A+