menu qui se positionne mal

**peck** · 26/12/2004, 22h00

Bonsoir

J'ai fais un menu pour mon site http://www.pixelmotion.org le menu est dépla cé de 5 centimètre sur la droite à chaque fois. Problème uniquement sous IE.
Si vous pouviez m aider pcq là je suis vmt perdu. Vous pouvez visiter la page ou, voici le code
Feuille de 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
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
 
 
#accueil{
position:absolute;
}
 
#decouverte{
	position:absolute;
	display:none;
	visibility:hidden;
 
	}
#pres {
	position:absolute;
	display:none;
	visibility:hidden;
	}
#loisir {
	position:absolute;
	display:none;
	visibility:hidden;
	}
 
#pratique {
	position:absolute;
	display:none;
	visibility:hidden;
	}
 
#pratique {
	position:absolute;
	display:none;
	visibility:hidden;
	}
 
#court{
	position:absolute;
	display:none;
	visibility:hidden;
	}
	.liens{
	color:#ffffff;
	text-align:center;
	text-decoration:none;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
 
	}

fonctions:

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
94
95
96
97
98
99
100
101
102
103
104
105
106
 
<script language="JavaScript">
<!--
var temps;					//pour l'attribution de la fonction setTimeout()
var menu;					//Nom du style
 
function url(page,affichage)//se rend à l'adresse précisée
{							// dans la fenetre précisée
	window.open(page,affichage);
}
 
function cache()
{// cache tous les menus sauf celui de l'onglet
	if (menu=='decouverte')
	{
		document.getElementById('pres').style.display='none';
		document.getElementById('pres').style.visibility='hidden';
		document.getElementById('loisir').style.display='none';
		document.getElementById('loisir').style.visibility='hidden';
		document.getElementById('pratique').style.display='none';
		document.getElementById('pratique').style.visibility='hidden';
		document.getElementById('court').style.display='none';
		document.getElementById('court').style.visibility='hidden';
	}
	else if (menu=='loisir')
	{
		document.getElementById('pres').style.display='none';
		document.getElementById('pres').style.visibility='hidden';
		document.getElementById('decouverte').style.display='none';
		document.getElementById('decouverte').style.visibility='hidden';
		document.getElementById('pratique').style.display='none';
		document.getElementById('pratique').style.visibility='hidden';
		document.getElementById('court').style.display='none';
		document.getElementById('court').style.visibility='hidden';
	}
	else if (menu=='pres')
	{
		document.getElementById('decouverte').style.display='none';
		document.getElementById('decouverte').style.visibility='hidden';
		document.getElementById('loisir').style.display='none';
		document.getElementById('loisir').style.visibility='hidden';
		document.getElementById('pratique').style.display='none';
		document.getElementById('pratique').style.visibility='hidden';
		document.getElementById('court').style.display='none';
		document.getElementById('court').style.visibility='hidden';
	}
	else if (menu=='pratique')
	{
		document.getElementById('pres').style.display='none';
		document.getElementById('pres').style.visibility='hidden';
		document.getElementById('loisir').style.display='none';
		document.getElementById('loisir').style.visibility='hidden';
		document.getElementById('decouverte').style.display='none';
		document.getElementById('decouverte').style.visibility='hidden';
		document.getElementById('court').style.display='none';
		document.getElementById('court').style.visibility='hidden';
	}
	else if (menu=='court')
	{
		document.getElementById('pres').style.display='none';
		document.getElementById('pres').style.visibility='hidden';
		document.getElementById('loisir').style.display='none';
		document.getElementById('loisir').style.visibility='hidden';
		document.getElementById('decouverte').style.display='none';
		document.getElementById('decouverte').style.visibility='hidden';
		document.getElementById('pratique').style.display='none';
		document.getElementById('pratique').style.visibility='hidden';
	}
}
function affiche()
{	//Affiche le div
	document.getElementById(menu).style.display='block';
	document.getElementById(menu).style.visibility='visible';	
}
 
function cache_menu(style)
{//initialise la valeur de la variable globale menu avec la valeur de la variable locale style
//lance la fonction menu au bout de 1 seconde
	menu=style;
	temp=cache();
}
function affiche_menu(style)
{//initialise la valeur de la variable globale menu avec la valeur de la variable locale style
//affiche le menu
	menu=style;
	affiche();
 
}
function cache_tout()
{
	document.getElementById(menu).style.display='none';
	document.getElementById(menu).style.visibility='hidden';
}
 
function fin()
{
	cache_tout();
	cache();
}
 
 
function arret()
{
	clearInterval();
	clearTimeout(temps);
}

les boutons qui font appel aux fonctions et les tableaux cachés:

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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
 
  <td width="100"><img src="images/accueil2.jpg" width="100" height="18"></td>
        <td width="100"><a href="javascript:;" onMouseOver="cache_menu('decouverte');arret();affiche_menu('decouverte');" onMouseOut="temps=setTimeout('cache_tout()',1000)"><img src="images/avatars.jpg"  border="0" name="bouton_decouv" width="100" height="18"></a></td>
        <td width="100"><a href="javascript:;" onMouseOver="cache_menu('pres');arret();affiche_menu('pres');" onMouseOut="temps=setTimeout('cache_tout()',1000)"><img src="images/bannieres.jpg"  border="0" name="bouton_pres" width="100" height="18"></a></td>
        <td width="100"><a href="javascript:;" onMouseOver="cache_menu('loisir');arret();affiche_menu('loisir')" onMouseOut="temps=setTimeout('cache_tout()',1000)"><img src="images/fonds-decran.jpg"  border="0" name="bouton_loisir" width="100" height="18"></a></td>
        <td width="100"><a href="javascript:;" onMouseOver="cache_menu('pratique');arret();affiche_menu('pratique');" onMouseOut="temps=setTimeout('cache_tout()',1000)"><img src="images/web-design.jpg"  border="0" name="bouton_pratique" width="100" height="18"></a></td>
        <td width="100" ><a href="javascript:;" onMouseOver="cache_menu('court');arret();affiche_menu('court')" onMouseOut="temps=setTimeout('cache_tout()',1000); "><img src="images/forum.jpg"  border="0" name="bouton_court" width="100" height="18"></a></td>
      </tr>
    </table>   
      <table width="600" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="100"><div id="accueil"></div></td>
          <td width="100"><div  id="decouverte" style="z-index:1;">
		<table border="0" cellspacing="0" cellpadding="0"  background="images/fd_menu.jpg">
              <tr>
                <td onMouseOver="arret()" onMouseOut="temps=setTimeout('cache_tout()',500)" height="24" width="100"><a href="javascript:url('index.htm','_parent')" >
                  <div class="liens">Bleu</div>
                </a></td>
              </tr>
              <tr>
                <td onMouseOver="arret()" onMouseOut="temps=setTimeout('cache_tout()',500)" width="100" height="24"><a href="javascript:url('index.htm','_parent')">
                  <div class="liens">Jaune</div>
                </a></td>
              </tr>
              <tr>
                <td onMouseOver="arret()" onMouseOut="temps=setTimeout('cache_tout()',500)" width="100" height="24"><a href="javascript:url('index.htm','_parent')" >
                  <div class="liens">Rouge</div>
                </a></td>
              </tr>
            </table>
        </div></td>
          <td width="100"><div id="pres" style="z-index:1;">
            <table border="0" cellpadding="0" cellspacing="0" background="images/fd_menu.jpg">
              <tr>
                <td onMouseOver="arret()" onMouseOut="temps=setTimeout('cache_tout()',500)" width="100" height="24"><a href="javascript:url('index.htm','_parent')" >
                  <div class="liens">Animaux</div>
                </a></td>
              </tr>
              <tr>
                <td onMouseOver="arret()" onMouseOut="temps=setTimeout('cache_tout()',500)" width="100" height="24"><a href="javascript:url('index.htm','_parent')" >
                  <div class="liens">Sports</div>
                </a></td>
              </tr>
              <tr>
                <td onMouseOver="arret()" onMouseOut="temps=setTimeout('cache_tout()',500)" width="100" height="24"><a href="javascript:url('index.htm','_parent')" >
                  <div class="liens">Divers</div>
                </a></td>
              </tr>
            </table>
        </div></td>
          <td width="100"><div id="loisir" style="z-index:1;">
            <table border="0" cellpadding="0" cellspacing="0" background="images/fd_menu.jpg">
              <tr>
                <td onMouseOver="arret()" onMouseOut="temps=setTimeout('cache_tout()',500)" width="100" height="24"><a href="javascript:url('index.htm','_parent')" >
                  <div class="liens">B</div>
                </a></td>
              </tr>
              <tr>
                <td  onMouseOver="arret()" onMouseOut="temps=setTimeout('cache_tout()',500)" width="100" height="24"><a href="javascript:url('index.htm','_parent')" >
                  <div class="liens">Bloc B</div>
                </a></td>
              </tr>
              <tr>
                <td  onMouseOver="arret()" onMouseOut="temps=setTimeout('cache_tout()',500)" width="100" height="24"><a href="javascript:url('index.htm','_parent')" >
                  <div class="liens">Bloc C</div>
                </a></td>
              </tr>
            </table>
        </div></td>
          <td width="100"><div id="pratique" style="z-index:1;">
            <table border="0" cellpadding="0" cellspacing="0" background="images/fd_menu.jpg">
              <tr>
                <td onMouseOver="arret()" onMouseOut="temps=setTimeout('cache_tout()',500)" width="100" height="24"><a href="javascript:url('index.htm','_parent')" >
                  <div class="liens">Bloc A</div>
                </a></td>
              </tr>
              <tr>
                <td onMouseOver="arret()" onMouseOut="temps=setTimeout('cache_tout()',500)" width="100" height="24"><a href="javascript:url('index.htm','_parent')" >
                  <div class="liens">Bloc B</div>
                </a></td>
              </tr>
              <tr>
                <td onMouseOver="arret()" onMouseOut="temps=setTimeout('cache_tout()',500);" width="100" height="24"><a href="javascript:url('index.htm','_parent')" >
                  <div class="liens">Bloc C</div>
                </a></td>
              </tr>
            </table>
        </div></td>
          <td width="100"><div id="court" style="z-index:1;">
            <table border="0" cellpadding="0" cellspacing="0" background="images/fd_menu.jpg">
              <tr>
                <td onMouseOver="arret()" onMouseOut="temps=setTimeout('cache_tout()',500)" width="100" height="24"><a href="javascript:url('index.htm','_parent')" >
                  <div class="liens">Bloc A</div>
                </a></td>
              </tr>
              <tr>
                <td onMouseOver="arret()" onMouseOut="temps=setTimeout('cache_tout()',500)" width="100" height="24"><a href="javascript:url('index.htm','_parent')" >
                  <div class="liens">Bloc B</div>
                </a></td>
              </tr>
              <tr>
                <td onMouseOver="arret()" onMouseOut="temps=setTimeout('cache_tout()',500)" width="100" height="24"><a href="javascript:url('index.htm','_parent')" >
                  <div class="liens">Bloc C</div>
                </a></td>
              </tr>
            </table>
        </div></td>
        </tr>
      </table>    </td>

Merci par avance et désolé pour la longueur, c est pour ceux qui veulent pas aller sur le site

**peck** · 27/12/2004, 18h06

Je me doute que personne n'a de temps a passer sur autant de ligne de code mais est ce que quelqu'un pourrait m'aiguiller vers uine solution éventuelle? parce que là franchement je galère

**dervish** · 28/12/2004, 11h16

Slt,
A priori, en survolant le code, cela doit être un problème d'alignement des deux tables (celles des images des entrées du menu et celle des contenus du menu). Si tu choisis les tables pour construire ton menu (bien que les css soient meilleures), mets tes deux tableaux dans deux cellules de deux lignes d'un même tableau...
voilà

**peck** · 28/12/2004, 11h30

Je te remercie de ta réponse, mais j'ai divisé le tableau en 2 tableau justement parce que ca ne marchais pas.

Pour ce qui est des CSS je n'ai rien contre mais je sais pas le faire. Comment je pourrai faire pour créer un tableau a partir de CSS

**peck** · 28/12/2004, 23h24

Ok c est bon je me suis bien instruit, j'ai refais les tableaux en css.Je te remercie pour ton aide, tu m enleves une grosse épine du pied.

menu qui se positionne mal

JavaScript

Vue hybride

Discussions similaires

Partager

Partager