[HTML]Conflit de liens

Version imprimable

23/10/2006, 16h10
navis84

[HTML]Conflit de liens

Bonjour,

Sur un de mes sites, j'ai le menu disponible sur ce site : http://iubito.free.fr/prog/menu.php.
Or dans certaines parties du menu, il y a en dessous un système d'onglets sur lesquels il y a des liens.

Mais lorsque je déroule un partie du menu, et que cette partie recouvre un ou plusieurs onglets, une fois sortie du menu principal, j'ai beau cliquer sur l'onglet, rien ne se passe ! C'est comme si ce n'était que du texte.

Une idée sur ce que ce conflit pourrait être ?
Merci d'avance,:)
@+
23/10/2006, 21h13
ythierrin

Salut,

J'ai essayé de reproduire ton défaut mais sans succès.

J'utilise IE6 et apparement tout fonctionne. Donne moi une manipulation à faire pour que je puisse essayer à nouveau.

A+
24/10/2006, 09h07
trotters213

:salut:
Tout simplement : tu n'aurais pas oublié les balises <a> dans tes balises <li> ?
24/10/2006, 09h27
navis84

Merci de t'être penché sur mon problème.

Voici des captures d'écran pour aider à comprendre la situation :

1 : Avant le survol
http://www.image-dream.com/membre/up...rKate/dev1.jpg

2 : Au survol
http://www.image-dream.com/membre/up...rKate/dev2.jpg

Lorsque je survole en allant du sens Menu 2 à Sous-menu 2.4, si je continue selon cet axe, je ne peux plus cliquer sur le lien de l'onglet 3.

Voici le code des onglets au cas où : (je ne mets pas tout le code du tableau)
<tr>
<th align='center' class='select' ><a href=''>Accueil</a>
<th align='center' ><a href=''>Onglet 1</a>
<th align='center' ><a href=''>Onglet 2</a>
<th align='center' ><a href=''>Onglet 3</a>

Merci pour ton aide.
Pourrais-tu poster ton code si cela marche pour toi ? Je pourrai ainsi faire plus de comparaisons... :)
24/10/2006, 10h30
MasterOfChakhaL

salut,

le problème pourrait simplement venir de tes attributs href

Tu leur donne comme valeur la chaine vide...

Si c'est pour des tests, tu peux mettre:

Code:

<a href="#">lien</a>
24/10/2006, 10h40
navis84

Citation:

Envoyé par trotters213

Tout simplement : tu n'aurais pas oublié les balises <a> dans tes balises <li> ?

Non, elles y sont. ;)

Citation:

Envoyé par MasterOfChakhaL

le problème pourrait simplement venir de tes attributs href
Tu leur donne comme valeur la chaine vide...
Si c'est pour des tests, tu peux mettre:

Code:

<a href="#">lien</a>

En fait, j'ai mis le contenu vide sur le forum, mais sur le site, il y a le nom d'une page...
24/10/2006, 11h03
MasterOfChakhaL

Re,

Alors, le problème doit venir du css...
Vérifie d'abord ton menu sans mettre le css, si tu vois que l'html est correcte (liste et sous listes de liens...) Alors, le problème vient certainement du css.

Vu ce que tu décris, je vérifierais que tu ne t'es pas planté dans les z-index. Par exemple, un menu déroulé doit avoir un z-index supérieur à ses voisins, sinon, s'il ya recouvrement, et ben les côtés de ton menu déroulé son masqués par les voisins (parfois maqués par une zone transparente, mais quand même bien masqués aux yeux de la souris......).

Donc voilà... pour d'autres idées, un bout de ton code pourrait être utile

Apparemment, mes z-index sont bons. Celui du menu est 100.

Par contre, j'avais adapté le menu (surtout en utilisant les fonctions JS) par rapport au menu existant.

Voici le code du menu :

Code:

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
<div id="menu">
 <table border="0" cellpadding="0" cellspacing="0" width="800">
  <tbody><tr>
   <td>
    <dl style="display: block;" class="dl_accueil" id="smenu0">
     <dt onmouseover="javascript:montre('smenu0');">
     <a href="index.php" title="Retour à l'accueil">
     Accueil</a>
     </dt>
    </dl>
 
    <dl>
     <dt onmouseover="montre('smenu1');MontrerMenu('smenu1');" onmouseout="CacherDelai();" onclick="montre('smenu1');">Menu 1</dt>
      <dd style="display: none; visibility: hidden;" id="smenu1" onmouseover="AnnulerCacher();" onmouseout="CacherDelai();">
       <ul>
        <li><a href="#"><img src="menu_1_fichiers/puce.gif" border="0"> Sous-menu 1.1</a></li>
        <li><a href="#"><img src="menu_1_fichiers/puce.gif" border="0"> Sous-menu 1.2</a></li>
        <li><a href="#"><img src="menu_1_fichiers/puce.gif" border="0"> Sous-menu 1.3</a></li>
       </ul>
      </dd>
    </dl>
 
 
    <dl>
     <dt onmouseover="montre('smenu2');MontrerMenu('smenu2')" onmouseout="CacherDelai();" onclick="montre('smenu2');">Menu 2</dt>
      <dd style="display: none; visibility: hidden;" id="smenu2" onmouseover="AnnulerCacher();" onmouseout="CacherDelai();">
       <ul>
       	<li><a href="#"><img src="menu_1_fichiers/puce.gif" border="0"> Sous-menu 2.1</a></li>
       	<li><a href="#"><img src="menu_1_fichiers/puce.gif" border="0"> Sous-menu 2.2</a></li>
       	<li><a href="#"><img src="menu_1_fichiers/puce.gif" border="0"> Sous-menu 2.3</a></li>
       	<li><a href="#"><img src="menu_1_fichiers/puce.gif" border="0"> Sous-menu 2.4</a></li>
        	<li><a href="#"><img src="menu_1_fichiers/puce.gif" border="0"> Sous-menu 2.5</a></li>
       	<li><a href="#"><img src="menu_1_fichiers/puce.gif" border="0"> Sous-menu 2.6</a></li> </ul>
      </dd>
    </dl>
 
 
    <dl>
     <dt onmouseover="montre('smenu3');MontrerMenu('smenu3')" onmouseout="CacherDelai();" onclick="montre('smenu3');">Menu 3</dt>
      <dd style="display: none; visibility: hidden;" id="smenu3" onmouseover="AnnulerCacher();" onmouseout="CacherDelai();">
       <ul>
       </ul>
      </dd>
    </dl>
 
  		</td>
  		</tr>
 </tbody>
</table>
  </div>

Et voici le code JS que j'ai repris de l'ancienne version :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function montre(id) {
 
		var d = document.getElementById(id);
 
 
		for (var i = 1; i<=10; i++) {
 
			if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';
 
			}
 
		}
 
		if (d) {d.style.display='block';}
 
	}

Cela vous aidera surement pour voir mon problème.
Merci d'avance. :)

PS : je descends les onglets, je n'ai aucun souci... :?

24/10/2006, 14h45
MasterOfChakhaL

Est-ce que les visibility:hidden; sont nécessaires?

J'ai l'impression que non et que c'est ca qui pose problème...
Si tu en as vraiment besoin pour d'autres raisons, alors il faut quand même que dans ton javascript, tu rendes la zone visible.
Ton display block permet de voir la zone occupé, mais puisque visibility est à hidden, les éléments ne sont pas affichés.
24/10/2006, 15h18
navis84

J'ai du mal à comprendre ton explication en fonction de mon code...

Parles-tu du visibility:hidden dans la propriété style de la balise <dd> ? Car si je l'enlève, ça ne me change rien...
24/10/2006, 15h23
MasterOfChakhaL

oui, je parle bien des balises dd.

Je ne comprends pas bien l'interêt de le mettre, tu empêches l'affichage avec le display:block, ca devrait suffire...
Quand j'ai testé chez moi, le fait de les enlever a quand même modifié l'affichage...

Si j'ai raté un truc... dis-moi...

Je les ai enlevé mais ça ne change rien...

Je me permet de te faire un récapitulatif car je ne vois pas ce qu'il te manque.

1. Le fichier html

Le menu :

Code:

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
<div id="menu">
	 <table border="0" cellpadding="0" cellspacing="0" width="800">
	  <tbody><tr>
	   <td>
	    <dl style="display: block;" class="dl_accueil" id="smenu0">
	     <dt onmouseover="javascript:montre('smenu0');">
	     <a href="index.php" title="Retour à l'accueil">
	     Accueil</a>
	     </dt>
	    </dl>
 
	    <dl>
	     <dt onmouseover="montre('smenu1');MontrerMenu('smenu1');" onmouseout="CacherDelai();" onclick="montre('smenu1');">Menu 1</dt>
	      <dd style="display: none;" id="smenu1" onmouseover="AnnulerCacher();" onmouseout="CacherDelai();">
	       <ul>
	        <li><a href="#"><img src="menu_1_fichiers/puce.gif" border="0"> Sous-menu 1.1</a></li>
	        <li><a href="#"><img src="menu_1_fichiers/puce.gif" border="0"> Sous-menu 1.2</a></li>
	        <li><a href="#"><img src="menu_1_fichiers/puce.gif" border="0"> Sous-menu 1.3</a></li>
	       </ul>
	      </dd>
	    </dl>
 
 
		 <dl>
	     <dt onmouseover="montre('smenu2');MontrerMenu('smenu2')" onmouseout="CacherDelai();" onclick="montre('smenu2');">Menu 2</dt>
	      <dd style="display: none;" id="smenu2" onmouseover="AnnulerCacher();" onmouseout="CacherDelai();">
	       <ul>
	       	<li><a href="#"><img src="menu_1_fichiers/puce.gif" border="0"> Sous-menu 2.1</a></li>
	       	<li><a href="#"><img src="menu_1_fichiers/puce.gif" border="0"> Sous-menu 2.2</a></li>
	       	<li><a href="#"><img src="menu_1_fichiers/puce.gif" border="0"> Sous-menu 2.3</a></li>
	       	<li><a href="#"><img src="menu_1_fichiers/puce.gif" border="0"> Sous-menu 2.4</a></li>
	        	<li><a href="#"><img src="menu_1_fichiers/puce.gif" border="0"> Sous-menu 2.5</a></li>
	       	<li><a href="#"><img src="menu_1_fichiers/puce.gif" border="0"> Sous-menu 2.6</a></li> 
	       </ul>
	      </dd>
	    </dl>
 
	    <dl>
	     <dt onmouseover="montre('smenu3');MontrerMenu('smenu3')" onmouseout="CacherDelai();" onclick="montre('smenu3');">Menu 3</dt>
	      <dd style="display: none;" id="smenu3" onmouseover="AnnulerCacher();" onmouseout="CacherDelai();">
	       <ul>
	       </ul>
	      </dd>
	    </dl>
 
	  		</td>
	  		</tr>
	 </tbody>
	</table>
</div>

Les onglets (dans un tableau en dessous) :

Code:

1
2
3
4
5
6
<tr>
		<th class="select" align="center"><a href="#">Accueil</a></th>
		<th align="center"><a href="#">Onglet 1</a></th>
		<th align="center"><a href="#">Onglet 2</a></th>
		<th align="center"><a href="#">Onglet 3</a></th>
</tr>

2. Le Javascript

La fonction montre() :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function montre(id) {
 
		var d = document.getElementById(id);
 
 
		for (var i = 1; i<=10; i++) {
 
			if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';
 
			}
 
		}
 
		if (d) {d.style.display='block';}
	}

Le fichier menu.js : pris du site http://iubito.free.fr/prog/menu.php. J'ai juste mis en commentaire l'appel de la fonction SelectVisible() dans MontrerMenu() et CacherMenus(). Et le délai est de 50 ms.

En espérant que ça t'éclaire... :roll: