div caché mais visible(cursor=main) malgré display=none

**artenis** · 21/07/2012, 16h34

Bonjour

j'ai un menu avec des sous menu déroulant verticaux, le bloc du menu est en position=absolue, mes sous menu sont en position=relative , et ont un display=none. Or lorsque je mets ma souris dans la zone du sous menu (non affichée) mon curseur se transforme en main comme si le sous menu était visible.

le desagrement, comme vous devez vous en douter, c'est que les articles (boutons cliquables) situés au meme niveau (en-dessous) que le sous menu sont cachés et impossible de cliquer dessus.

j'ai bien appliqué du jquery sur le sous menu et sur la partie des articles avec des z-index, mais cela ne change absolument rien

le probleme du menu est qu'il utilise du float=left par consequent pour qu'il n'y ait pas d'écart en dessous du menu j'utilise du position=absolue, est-ce que le probleme viendrait de là ?

Invité · 21/07/2012, 21h46

Bonjour,
voilà beaucoup de blabla pour bien peu de code...

Je pourrais répondre :

Tu autem, Fanni, quod mihi tantum tribui dicis quantum ego nec adgnosco nec postulo, facis amice; sed, ut mihi videris, non recte iudicas de Catone; aut enim nemo, quod quidem magis credo, aut si quisquam, ille sapiens fuit. Quo modo, ut alia omittam, mortem filii tulit! memineram Paulum, videram Galum, sed hi in pueris, Cato in perfecto et spectato viro.

In his tractibus navigerum nusquam visitur flumen sed in locis plurimis aquae suapte natura calentes emergunt ad usus aptae multiplicium medelarum. verum has quoque regiones pari sorte Pompeius Iudaeis domitis et Hierosolymis captis in provinciae speciem delata iuris dictione formavit.

Cognitis enim pilatorum caesorumque funeribus nemo deinde ad has stationes appulit navem, sed ut Scironis praerupta letalia declinantes litoribus Cypriis contigui navigabant, quae Isauriae scopulis sunt controversa.

...mais je ne suis pas sûr que ça aide...

En clair, donne-nous au moins :
- le lien vers la page ;
- ou le code CSS ET le code html associé.

**artenis** · 21/07/2012, 23h32

voici le code html (pour wordpress):

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
<div id="choix-menu">
    	<div id="menu">
 
                <a href="<?php bloginfo("url"); ?>">
        		<div id="list-menu1" class="m active">
                Accueil
                </div>
                </a>
 
                <div id="zm2" class="m">
                	<?php  $id = 10; $post = get_post($id); $menu2 = $post->post_content;  ?>
 
                    <div  id="list-menu2" class="active">
                    <?php echo $menu2;  ?>
                    </div>
 
                	<div id="s-m2" class="sm">
                    	<ul style="top:20px;">
                        	<?php  $id = 76; $post = get_post($id); $menu2_1 = $post->post_content;  ?>
                            <a href="<?php the_permalink(); ?>">
                        	<li><?php echo $menu2_1;  ?></li>
                            </a>
                            <?php  $id = 79; $post = get_post($id); $menu2_2 = $post->post_content;  ?>
                            <a href="<?php the_permalink(); ?>">
                        	<li><?php echo $menu2_2;  ?></li>
                            </a>
                            <?php  $id = 81; $post = get_post($id); $menu2_3 = $post->post_content;  ?>
                            <a href="<?php the_permalink(); ?>">
                        	<li><?php echo $menu2_3;  ?></li>
                            </a>
                            <?php  $id = 83; $post = get_post($id); $menu2_4 = $post->post_content;  ?>
                            <a href="<?php the_permalink(); ?>">
                        	<li><?php echo $menu2_4;  ?></li>
                            </a>
                        </ul>
                    </div>
                </div>
                <div id="zm3" class="m">    
                	<?php  $id = 12; $post = get_post($id); $menu3 = $post->post_content; ?>
 
                    <div  id="list-menu3" class="active">
                    <?php echo $menu3;  ?>
                    </div>
 
                	<div id="s-m3" class="sm">
                    	<ul style="top:10px;">
                        	<?php  $id = 87; $post = get_post($id); $menu3_1 = $post->post_content;  ?>
                            <a href="<?php the_permalink(); ?>">
                        	<li><?php echo $menu3_1;  ?></li>
                            </a>
                            <?php  $id = 89; $post = get_post($id); $menu3_2 = $post->post_content;  ?>
                            <a href="<?php the_permalink(); ?>">
                        	<li><?php echo $menu3_2;  ?></li>
                            </a>
                        </ul>
                    </div>
                </div>
                <div id="zm4" class="m" >    
                	<?php  $id = 72; $post = get_post($id); $menu4 = $post->post_content; ?>
 
                	<div id="list-menu4" class="active">
                    <?php echo $menu4;  ?>
                    </div>
 
                	<div id="s-m4" class="sm">
                    	<ul style="top:7px;">
                        	<?php  $id = 91; $post = get_post($id); $menu4_1 = $post->post_content;  ?>
                            <a href="<?php the_permalink(); ?>">
                        	<li><?php echo $menu4_1;  ?></li>
                            </a>
                        </ul>
                    </div>
                </div>
                <?php  $id = 74; $post = get_post($id); $menu5 = $post->post_content; ?>
                <a href="<?php the_permalink(); ?>">
                <div class="m active" id="list-menu5">
                <?php echo $menu5;  ?>
                </div>
                </a>
            		<!--<div id="s-m5" class="sm"></div>-->
        </div>
    </div>

voici le css correspondant au menu:

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
#choix-menu{width:1024px; height:230px; font-size:11pt; color:black; }
#menu{width:100%; height:80px; background:url(images/menu.png) no-repeat; margin-top:-10px;position:absolute;}
 
 
#menu ul{list-style:none;  padding:0; margin:0; width:100%; position:relative; }
#menu li{list-style:none; width:100%; margin-top:5px;   padding:5px 0 5px 0; text-align:center; 
	border:px solid #F3D66D; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; font-size:10pt;
}
 
#choix-menu .m{ float:left; border:px solid black;   cursor:pointer; } 
#choix-menu .sm{display:none; }
#list-menu1, #zm2, #zm3, #zm4, #list-menu5 { float:left;}
 
	#choix-menu #list-menu1{width:105px; height:35px; padding:15px 0 0 30px;  text-align:center; }
	/*#choix-menu #s-m1{background:url(images/menu1.png); width:138px; height:233px; position:relative; top:-21px; left:0;  }*/
 
#choix-menu #zm2{width:140px; height:210px;  margin-top:5px; margin-left: 5px;}
	#choix-menu #list-menu2{width:140px; height:60px; text-align:center; padding:7px 0 0 0;}
	#choix-menu #s-m2{background:url(images/menu2.png); width:140px; height:150px; position:relative; top:-22px; left:3px;}
 
#choix-menu #zm3{width:120px; height:146px;  margin-top:5px; margin-left:2px;}
	#choix-menu #list-menu3{width:120px; height:58px;  text-align:center;padding:15px 0 0 0;}
	#choix-menu #s-m3{background:url(images/menu3.png); width:120px; height:85px;  position:relative; top:-11px; left:0;}
 
#choix-menu #zm4{width:114px; height:110px;  margin-top:11px;  margin-left:2px;}
	#choix-menu #list-menu4{ width:114px; height:49px; padding:15px 0 0 0; text-align:center; }
	#choix-menu #s-m4{background:url(images/menu4.png); width:114px; height:60px;  position:relative; top:-2px; left:0;}
 
#choix-menu #list-menu5{width:120px; height:35px; margin-top:1.4%;  margin-left:2px; text-align:center; padding:17px 0 0 0;}

est ce que cela vous permet de mieux comprendre ?

par avance merci pour vos réponses

Invité · 22/07/2012, 09h02

C'est le code html généré qu'il faut. Pas le PHP.
navigateur -> "Afficher la Source" -> copier-coller

**artenis** · 22/07/2012, 13h21

ok,

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
<div id="choix-menu">
    	<div id="menu">
 
                <a href="http://site">
        		<div id="list-menu1" class="m active">
                Accueil
                </div>
                </a>
 
                <div id="zm2" class="m">
 
                    <div  id="list-menu2" class="active">
                    Qui<br />sommes-nous ?                    </div>
 
                	<div id="s-m2" class="sm">
                    	<ul style="top:20px;">
                        	                            <a href="http://site">
                        	<li><p>Missions</p></li>
                            </a>
                                                        <a href="http://site">
                        	<li><p class="style-ssmenu">Valeurs</p></li>
                            </a>
                                                        <a href="http://site">
                        	<li>Organisation</li>
                            </a>
                                                        <a href="http://site">
                        	<li>Accompagnateurs
 
</li>
                            </a>
                        </ul>
                    </div>
                </div>
                <div id="zm3" class="m">    
 
                    <div  id="list-menu3" class="active">
                    Nos<br />activités                    </div>
 
                	<div id="s-m3" class="sm">
                    	<ul style="top:10px;">
                        	                            <a href="site">
                        	<li><p>Accompagnement</p></li>
                            </a>
                                                        <a href="http://site">
                        	<li><p>Insertion</p></li>
                            </a>
                        </ul>
                    </div>
                </div>
                <div id="zm4" class="m" >    
 
                	<div id="list-menu4" class="active">
                    Les<br />actualités                    </div>
 
                	<div id="s-m4" class="sm">
                    	<ul style="top:7px;">
                        	                            <a href="http://site">
                        	<li><p class="style-ssmenu">Infos</p></li>
                            </a>
                        </ul>
                    </div>
                </div>
                                <a href="http://site">
                <div class="m active" id="list-menu5">
                <p>Contacts</p>                </div>
                </a>
            		<!--<div id="s-m5" class="sm"></div>-->
        </div>
    </div>

**Candygirl** · 22/07/2012, 14h21

Hello,

Envoyé par artenis

Code :

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

1
2
3
4
5
6
 
#choix-menu .m{cursor:pointer; } 
 
#choix-menu #zm2{height:210px}
#choix-menu #zm3{height:146px;}
#choix-menu #zm4{height:110px;}

Ton cursor pointer apparaît sur tes élément de classes m en fonction de la hauteur que tu définis pour #zm2,#zm3,... et non pas en fonction de ton élément en display:none.

**artenis** · 22/07/2012, 15h00

merci, mais le problème vient des div sous menu (sm et s-m1,etc),

le cursor, je l'ai bien changé pour le mettre sur les éléments de display=none,
mais ça n'a aucune influence sur la div.

j'ai l'impression que l'element display=none n'agit plus, sans doute a cause d'un position (absolue,relative) ou d'un z-index.
j'ai tenté des 10aine de solution et aucune n'ont marché

Probleme resolu:

l'element height sur les div zm (2,3,4) était en trop

div caché mais visible(cursor=main) malgré display=none

CSS

Discussions similaires

Partager

Partager