IE6 + menu qui disparait au contact d'un contenu

**PuppeT mAsTer** · 04/08/2006, 15h22

Bonjour à tous, difficile d'expliquer le problème qui me tracasse avec Auteur dans un titre donc voici une vrai explication :

J'ai un menu déroulant qui fonctionne parfaitement sous FF et qui marche disons à moitié sous IE6. Le problème est le suivant : lorsque je passe une première fois sur le titre d'un sous menu, celui se déroule mais quand je navigue dans mon sous menu, si celui-ci rencontre du texte ou une image ou un autre contenu, le sous menu disparait. Bcp d'explication à ce problème ont déjà été cherché et rien n'y a fait c'est pourquoi je créé un nouveau topic pour soliciter votre aide maintenant que le problème a été éclairci.

Voici comment se présente la feuille de style font.css :

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
#idMenu{
 position: absolute;
 top: 185;
 left: 0;
 width: 100%;
 font-size: 12px;
 z-index: 100;
 font-family:Verdana;
}
 
.elementMenu{
 float: left;
 width: 128px;
 text-align: center;
}
 
.titreMenu{
 color: #FFA900;
 font-weight: bold;
 background-color:#000000;
 padding:5px;
 margin:0px;
}
 
div.elementMenu:hover div{
 display: block;
}
.sousMenu{
 display: none;
 margin:0px;
}
 
.sousMenu p{
 padding: 3px;
 margin:0px;
 margin-top:1px;
 background-image:url('images/fondmenu.png');
}
.titreSousMenu{
 color: #FFFFFF;
 font-weight: bold;
}
 
a:link, a:visited
{
  text-decoration:none;
  color: #FFA900;
}
 
a:hover {
  color: #FF5B01;
}

et voici le code d'une page standard du site, côté client :

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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<html>
<head>
<title>
HIT & SPORT 98.4 FM - Des Hits & du Sport !
</title>
<link rel="stylesheet" type="text/css" href="font.css">
 
<script type="text/javascript">
<!--
function mouseOver(idObj)
{
  if (document.all) //test IE
    document.getElementById(idObj).style.display = "block";
}
 
function mouseOut(idObj)
{
  if (document.all)
    document.getElementById(idObj).style.display = "none";
}
 
//-->
</script>
<script language="JavaScript">
function openWindow(width,height) {
x = (640 - width)/2, y = (480 - height)/2;
if (screen) {
y = (screen.availHeight - height)/2;
x = (screen.availWidth - width)/2;
}
if (screen.availWidth > 1800) {
x = ((screen.availWidth/2) - width)/2;
}
window.open('live.php','newWin','width='+width+',height='+height+',screenX='+x+',screenY='+y+',top='+y+',left='+x);
}
</script>
</head>
<body>
<IMG SRC="images/bannierehaut.png">
 
<div id="idMenu">
<div class="elementMenu" onmouseover="mouseOver('idRadio')" onmouseout="mouseOut('idRadio')">
  <p class="titreMenu"><a href="id.php">RADIO</a></p>
 
  <div id="idRadio" class="sousMenu">
    <p class="titreSousMenu">EMISSIONS</p>
	<p><a href="deboutlyon.htm">Debout Lyon</a></p>
	<p><a href="denisshow.htm">Le Denis Show</a></p>
	<p><a href="leclub.htm">Le Club</a></p>
    <p class="titreSousMenu">ANTENNE</p>
 
    <p><a href="progs.php">Grille des programmes</a></p>
	<p><a href="animateurs.php">Animateurs</a></p>
	<p><a href="redac.php">La Rédac</a></p>
    <p><a href="direction.php">La Direction</a></p>
	<p><a href="contact.php">Contactez-nous</a></p>
  </div>
 
</div>
 
<div class="elementMenu">
     <p class="titreMenu"><a href="breves.php">BREVES</a></p>
</div>
 
<div class="elementMenu" onmouseover="mouseOver('idMusique')" onmouseout="mouseOut('idMusique')">
   <p class="titreMenu">MUSIC</p>
   <div id="idMusique" class="sousMenu" >
     <p><a>Ecoutez en live</a></p>
 
	 <p><a href="playlist.php">La playlist</a></p>
   </div>
</div>
 
<div class="elementMenu" onmouseover="mouseOver('idSport')" onmouseout="mouseOut('idSport')" >
   <p class="titreMenu">SPORT</p>
   <div id="idSport" class="sousMenu">
      <p class="titreSousMenu">RESULTATS</p>
      <p><a href="OL.php">Olympique Lyonnais</a></p>
 
      <p><a href="ASVEL.php">Adecco ASVEL</a></p>
      <p><a href="LOU.php">LOU</a></p>
      <p><a href="calendrier.php"><b>CALENDRIERS</b></a></p>
      <p class="titreSousMenu">LE DIRECT</p>
      <p><a href="oldirect.php">Olympique Lyonnais</a></p>
      <p><a href="ASVELdirect.php">Adecco ASVEL</a></p>
 
      <p><a href="LOUdirect.php">LOU</a></p>
   </div>
</div>
 
<div class="elementMenu" onmouseover="mouseOver('idBlog')" onmouseout="mouseOut('idBlog')" >
   <p class="titreMenu">BLOGS</p>
     <div id="idBlog" class="sousMenu">
      <p><a href="#">Les blogs</a></p>
      <p><a href="forums.php">Les forums</a></p>
 
      <p><A>Le Tchat</a></p>
   </div>
</div>
 
<div class="elementMenu">
     <p class="titreMenu"><a href="agenda.php">AGENDA</a></p>
</div>
 
<div class="elementMenu" onmouseover="mouseOver('idPratique')" onmouseout="mouseOut('idPratique')" >
   <p class="titreMenu">PRATIQUE</p>
 
     <div id="idPratique" class="sousMenu">
      <p><a href="horoscope.php">Horoscope</a></p>
      <p><a href="emplois.php">Emplois</a></p>
   </div>
</div>
 
<div class="elementMenu">
     <p class="titreMenu"><a href="photos.php">PHOTOS</a></p>
</div>
 
</div>
 
 
<table border=0 cellpadding=0 cellspacing=5 bgcolor="#FFFFFF" style="margin-top:140px">
<tr>
<td width="200" height="40">
</td>
<td width="449">
<p>SMS</p>
 
</td>
<td width="150">
<p align="center"><font size="2" color="#0060cd">On air</font>
 
</td>
<td width="200">
<P align="right">
  <object type='application/x-shockwave-flash' data='liveHitSport.swf' width='170' height='70'>
  <param name='movie' value='liveHitSport.swf' />
  <param name='wmode' value='transparent' />
  </object>
</td>
</tr>
</table>
 
	[la suite du contenu]
 
 
<table border="0" bgcolor="#000000">
<tr>
<td height="30" width="1019" style="padding:10px">
 
<p align=center>
<font color="#FFFFFF" size=1 face="Verdana">
Réalisé par <b><a href="http://aprog.free.fr">ghOw</a></b>
</p>
 
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

J'ai l'impression qu'il y a un problème de priorité d'apparition du contenu. En clair le contenu sous le menu doit apparaître quoiqu'il arrive si il est survolé. Pourtant j'ai essayé d'appeler le contenu se trouvant sous le menu dans un div et de donner un z-index inférieur à 100 à ce div dans font.css mais ça n'a pas marché non plus, peut être le problème vient du script JS, c'est pourquoi je poste ici mais il vient aussi peut être du CSS, enfin voici un lien vers le topic qui a répondu aux premiers problèmes de mon menu (merci Auteur

) :

http://www.developpez.net/forums/sho...=184541&page=2

Je ne sais plus où chercher pour résoudre le problème. J'utilise IE6, peut être le problème vient aussi de ma version de IE

Merci tester les scripts avec vos versions de IE poui vérifier si il y a un pb de version. et j'espère que quelqu'un pourra m'aider

Merci d'avance

PM

**FremyCompany** · 06/08/2006, 18h57

Code :

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

 float: left;

Est-ce vraiment utile ou tu peux contourner ?
Si oui, essaie, car j'ai moi même eu des problèmes avec float... ca n'a peut-être rien à voir, le contexte était tout à fait différent, mais rien ne coute d'essayer

Sinon, je trouve le code de ton menu un peu long....
La page mets du temps à le charger et comme il se trouve en début de page, ca bloque le reste de la page... de plus, l'utilisateur ne percoit pas le chargement de la page...

**PuppeT mAsTer** · 07/08/2006, 11h15

Merci d'avoir répondu déjà

float:left est vraiment utile pour la forme de mon menu puisque tous les éléments Menu doivent se trouver à gauche les un des autres, en effet le menu voulu est une barre horizontal avec des sous menu qui se déroulent et se renroulent.

Malheuresement je ne sais pas comment faire cela autrement

Tu as raison le menu est peut être un peu trop détaillé, je tiendrai compte de ton avis pour le bien de tout les utilisateurs

http://aprog.free.fr/v2/pagestandard.php

Peut être ça vous aidera à voir comment se comporte le menu sous IE6 en tout cas car apparement tout va bien sous IE5;

Merci de répondre

PM

**FremyCompany** · 07/08/2006, 12h03

j'ai trouvé le problème...
Il vient du bord entre chaque div...
Je te propose de ne fermer ton menu qui lors de l'event onmouseout du div contenant TOUS les autres...

Code :

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

1
2
<div id="idMenu" onmouseover="openMenu('idMenu')" onmouseout="closeMenu('idMenu')">
<div class="elementMenu" onmouseover="mouseOver('idRadio')" onmouseout="mouseOut('idRadio')">

La fonction closeMenu execute un setTimeout qui ferme le menu...
La fonction openMenu affiche le menu et supprime le timer avec clearTimeout...

Code :

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

1
2
3
4
5
6
var menuTimer=0;
 
//...
    menuTimer=setTimeout("blablabla");
//...
    clearTimer(menuTimer);

**PuppeT mAsTer** · 07/08/2006, 15h40

Super j'aimerai tester ta solution Fremy mais je n'y connais absolument rien en JS (c'est d'ailleurs pourquoi j'ai bcp de mal avec ce menu) et donc je ne comprend pas la deuxième partie du code qui crée les fonctions closeMenu et openMenu. Enfin comment écrire ces fonctions en gros, j'ai compris l'idée mais je ne sais pas la mettre en pratique

. Après ça je me met au JS avec sérieux c'est sur

Merci de répondre

PM

**PuppeT mAsTer** · 08/08/2006, 10h57

Slt tout le monde, je vais me lancé malgrès ma méconnaissance total du Javascript et avec quelques observations, ce que j'ai écris ne marche pas biensûr alors si quelqu'un peut me dire ce qui cloche et ce que j'ai pas saisie dans l'idée de Fremy je prend

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
var menuTimer=0;
 
function closeMenu(idObj)
{
  menuTimer=setTimeout("blablabla");
}
 
function openMenu(idObj)
{ 
  clearTimer(menuTimer);
}

Que fallait il comprendre par blablabla placé dans la fonction setTimeout ?

PM

**FremyCompany** · 08/08/2006, 12h29

Qqchose dans ce gout la :

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
var menuTimers=new Object();
 
function closeMenu(idObj)
{
  var menu=document.getElementById(idObj);
  menuTimers[idObj]=setTimeout(function() {
    menu.style.display="none";
  }, 500);
}
 
function openMenu(idObj)
{ 
  clearTimer(menuTimers[idObj]);
  var menu=document.getElementById(idObj);
  menu.style.display=""
}

**Auteur** · 08/08/2006, 14h51

ou comme ceci :

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
 
/** Fonctions du menu **/
var chrono = null;   // id du Timer ; null > pas de timer a executer
var menuOut = null;  //menu qu'il faut fermer  ; null > tous menus fermes
var duree = "500";  //temps avant fermeture du menu en ms
 
function closeMenu()
{
  document.getElementById(menuOut).style.display = "none";
  menuOut = null;
  //affectation à chrono de la valeur par defaut pour indiquer que le menu est ferme
  chrono = null;
}
 
function mouseOver(idObj)
{
  if (document.all) //test IE
  {
    //affichage du menu
    document.getElementById(idObj).style.display = "block";
 
    //si le timer!=null > l'utilisateur a fait un "out" et le menu n'est pas ferme
    if (chrono!=null)
    {
       clearTimeout(chrono);   //arret timer car le over a eu lieu avant la fin de la duree imposee
       //affectation à chrono de la valeur par defaut (on laisse le menu ouvert)
       chrono = null;
 
       //fermeture anticipee du menu (menuOut) si l'utilisateur en ouvre un autre (idObj)
       if (idObj!=menuOut)
          closeMenu();
    }
  }
}
 
function mouseOut(idObj)
{
  if (document.all)
  {
    menuOut = idObj;    //menuOut varibale globale, idObj variable locale
 
    //demarrage du timer. Execution de closeMenu() apres un temps egal à duree
    chrono = setTimeout("closeMenu()",duree);
  }
}

-J'ai modifié un peu tes fonctions mouseOver et mouseOut (qui sont dans le fichier scripts.js). J'ai créé des variables globales et la fonction closeMenu().
Ne prends pas peur avec ce code

, il est ni difficile ni long. J'ai ajouté beaucoup de commentaires, c'est tout.

-si tu veux que les menus se ferment plus rapidement modifie la valeur de 'duree'. Ici elle est de 500ms.

-Je t'invite également à te renseigner sur les méthodes setTimeout() clearTimeout(), ainsi que setInterval() et clearInterval().

**PuppeT mAsTer** · 08/08/2006, 19h34

Post A Detruire Doublon Du Suivant, Dsl

**PuppeT mAsTer** · 08/08/2006, 19h35

je ne sais plus quelle tête faire parce que ça n'a pas changé le problème avec IE6, j'aimerai comprendre, ça n'est jamais arrivé à personne ? Enfin un problème comme ça ne passe pas inaperçu, je dois pas avoir de chance !! Je re résume le pb, dès que la souris qui est sur le menu passe sous un autre contenu le menu disparait et cela seulement sous Internet Explorer version 6 apparement. Merci j'y est vraiment cru cette fois !!

Résumons : les z-index inférieur ne change rien, le temps d'apparition du menu non plus, ce n'est pas non plus un pb de balises html dédoublé, peut être un pb de float mais à ce moment comment garder la présentation du dit menu.

Rassurez moi il y a une solution

Merci bcp d'avoir essayé.

PM

**Auteur** · 09/08/2006, 16h33

La dernière chose que tu peux faire est de demander aux autres de tester ton site :
http://www.developpez.net/forums/forumdisplay.php?f=134

indique une adresse où l'on peut visualiser ton site.

Ceux qui te liront pourront ainsi tester ton travail sur différents navigateurs et systèmes d'explotation. Et peut-être te proposer une solution.

IE6 + menu qui disparait au contact d'un contenu

JavaScript

Discussions similaires

Partager

Partager