28172 sujets

CSS et mise en forme, CSS3

Pb positionnement sous-éléments d'un menu horizontal dans IE7

Bonjour,

J'ai un gros souci de positionnement sur le site : http://www.arcencieltheatre.org/v2/

Il s'agit du menu horizontal en haut de page (accueil | Compagnie Arc en ciel | etc):
- dans Firefox et autres, les éléments de sous-menu sont correctement affichées avec bord gauche aligné sur bord élément parent
- dans IE7, ces élements sont décalés vers la droite, comme alignés sur le bord droit du parent, et je ne comprends pas pourquoi.

le menu est contenu dans une div appelée "nav2".

Voici le code CSS correspondant : 


#nav2 {
	background-color: transparent;
	background-image:none;
	text-align:left;
	width: 800px;
	height: 25px;
}

#nav2 ul {
	list-style: none;
	list-style: none;
	line-height: 1;
	text-align:left;
}
	
	
#nav2 ul li {
	position:relative; /* pour position du UL enfant */
	float:left;
	list-style:none;
	display: block;
	background-image: url(images/trait2.gif);
	background-position: right;
	background-repeat: no-repeat;
	text-transform:uppercase; 
	color:#999933;
	font-size:1.1em;
	padding-top: 6px;
	padding-right: 12px;
	padding-bottom: 6px;
	padding-left: 12px;
	text-align:left;
}

#nav2 ul li a, #nav2 ul li a:active  {
	text-decoration: none;
	border:none;
    color:#999933;
}

#nav2 ul li a:hover {
	text-decoration: underline;	
}

#nav2 ul li ul {
	position: absolute;
	top:20px; /* indisp pour bien caler position V dans IE --> nécessite que le LI (#nav2 ul li) parent soit positionné, sinon fait ref à la fenêtre */
	left: -999em;  /* pour planquer menu secondaire quand pas de rollover dessus. ON mettra left/auto ensuite pour l'afficher sur rollover */
	height: auto;
	width: 200px;
	border:1px solid #990000;	
	background:#ffffff;
	margin:0px;
	padding: 0px;

}

#nav2 li:hover ul, 
#nav2 li li:hover ul, 
#nav2 li li li:hover ul, 
#nav2 li.sfhover ul, 
#nav2 li li.sfhover ul, 
#nav li li li.sfhover ul { 
	left:auto;  /* réaffiche le sous-menu */
	 padding-left:0px; /* avec ce 0 l'alignement est meilleur  */
}

/* important pour positionnement éléments de menu */

#nav2 ul li ul li {
position:relative;
background:none;
width:195px;
display:block;
padding-left:6px;
}

#nav2 ul li ul li a, #nav2 ul li ul li a:visited {
	padding-left:-20px !important;
	text-transform:none;	
}


Je vois bien que c'est le positionnement left dans le sélecteur #nav2 li:hover ul qui pose pb :
- pourquoi IE7 ne calcule-t-il pas la position auto comme les autres ?
- dans ce cas, comment puis-je résoudre le pb ? Je viens d'y passer un paquet d'heures, pour ... pas grand résultat, et je n'y vois plus clair.

--> pouvez-vous m'aider SVP ?

Merci
Corinne M
Bonjour.
cmils a écrit :
- pourquoi IE7 ne calcule-t-il pas la position auto comme les autres ?
Parce que Microsoft n'a jamais été capable de sortir un navigateur correct ?

Et sinon : pourquoi ne pas mettre un :
left: 0;
... puisque le sous-menu est placé dans le menu-parent ? Du coup il viendrait se caler à gauche de ce dernier.

Et petite remarque en passant :
left: -999em;  /* pour planquer menu secondaire quand pas de rollover dessus. ON mettra left/auto ensuite pour l'afficher sur rollover */
Pourquoi ne pas simplement jouer sur la propriété display pour faire apparaître ou non le sous-menu ? Au moins ça marcherait sous IE6 aussi qui, sauf erreur de ma part, n'aime pas les valeurs négatives.
Modifié par phpdoesnotcare (05 May 2010 - 16:56)
phpdoesnotcare a écrit :
L'avantage du CSS c'est que ça marche tout le temps.

Pas forcément tout le temps. De plus, le contrôle du comportement de l'interface est beaucoup plus poussé en JS, notamment pour gérer la navigation au clavier.
Certes, mais il est quand même plus fréquent de se retrouver face à des utilisateurs acceptant le CSS mais pas le javascript plutôt que l'inverse, non (tout ça dépendant du type de navigateur utilisé ou des préférences de ces derniers, j'entends) ?
phpdoesnotcare a écrit :
Certes, mais il est quand même plus fréquent de se retrouver face à des utilisateurs acceptant le CSS mais pas le javascript plutôt que l'inverse, non (tout ça dépendant du type de navigateur utilisé ou des préférences de ces derniers, j'entends) ?

Oui. Smiley smile

Mais les lecteurs d'écran, s'ils ne prennent évidemment en compte qu'une petite partie des propriétés graphiques de CSS, interprètent en revanche assez bien le JavaScript.
D'accord. Mais dans ce cas, ils ignorent simplement le CSS je suppose ? Si oui, si on a quelque chose comme :
<ul class="menu">
   <li>
      <a>
         lien 1
         <ul class="sous-menu">
            <li>
               <a>sous-lien 1</a>
               ...
            </li>
         </ul>
      </a>
   </li>
   ...
</ul>
.sous-menu { display: none; }
.menu li a:hover .sous-menu { display: block; }
... le display: none; serait simplement ignoré, et le sous-menu resterait accessible. Non ?
Modifié par phpdoesnotcare (06 May 2010 - 09:54)
En disant ca je voulais simplement dire qu'en css le menu n'est pas accessible au clavier.

Donc que ce soit le choix js ou css ce genre de menu ne remplit pas les critères WAI. Dans mes sites j'ai donc choisi d'implémenter ce genre de comportement en javascript, avec une gestion des focus clavier, et des effets d'apparition/disparition sympa.
Evidemment pour respecter WAI quand javascript n'est pas activé, le menu s'affiche dans son intégralité !

Choix perso Smiley smile

phpdoesnotcare a écrit :
<ul class="menu">
<li>
<a>
lien 1
<ul class="sous-menu">
<li>
<a>sous-lien 1</a>
...
</li>
</ul>
</a>
</li>
...
</ul>

Je ne pense pas qu'un <a> peut contenir un <ul> ...
Modifié par spiral123 (06 May 2010 - 10:28)
spiral123 a écrit :
Je ne pense pas qu'un <a> peut contenir un <ul> ...
Si si. Smiley lol

--- édit -----
En fait le problème aurait plutôt tendance à venir des liens imbriqués, mais bon ça ne poserait un problème que pour IE6, les autres gérant très bien :hover si on remplace le premier lien par un autre élément.
Modifié par phpdoesnotcare (06 May 2010 - 10:37)
phpdoesnotcare a écrit :
le display: none; serait simplement ignoré, et le sous-menu resterait accessible. Non ?

Les lecteurs d'écran prennent en compte display: none.
phpdoesnotcare a écrit :
Si si. Smiley lol

Non non. Smiley smile
Julien Royer a écrit :
Les lecteurs d'écran prennent en compte display: none.
Ah ok.
Julien Royer a écrit :
Non non. Smiley smile
Le validateur du w3c me dit que si, lui... J'avais testé :
<!doctype html>
<html>
   <head><title></title></head>
   <body>
      <a href="#">
         <ul>
            <li>test</li>
         </ul>
      </a>
   </body>
</html>
... et ça me l'avait validé. Où est l'erreur (ça n'est pas de la mauvaise foi, hein... j'essaie juste de comprendre) ?
Modifié par phpdoesnotcare (06 May 2010 - 11:14)
Autant pour moi.

HTML 5 introduit le modèle de contenu transparent : l'élément a peut contenir tout ce que son père peut contenir (dans ton exemple, tout ce que body peut contenir), sauf d'autres éléments interactifs. Au sein d'un paragraphe, le problème serait différent : a ne pourrait pas contenir d'élément ul (car p ne le peut pas).

C'est néanmoins invalide avec les doctypes précédents, et je ne sais pas à quel point c'est correctement supporté par les navigateurs modernes.
Ah d'accord. Quand tu m'as fait la remarque, je me suis douté que ça devait venir du doctype utilisé (mais je retiens plus facilement celui-ci, curieusement. Smiley sourire ). Et merci pour toutes ces précisions. Smiley cligne
Bonjour, et merci pour toutes vos réponses !

a écrit :
Et sinon : pourquoi ne pas mettre un :
left: 0;
... puisque le sous-menu est placé dans le menu-parent ? Du coup il viendrait se caler à gauche de ce dernier.


Oui bien sûr j'avais essayé :
- ça marche bien dans Firefox
- dans IE7, le sous-menu est invisible.

a écrit :
Et petite remarque en passant :
left: -999em;  /* pour planquer menu secondaire quand pas de rollover dessus. ON mettra left/auto ensuite pour l'afficher sur rollover */
Pourquoi ne pas simplement jouer sur la propriété display pour faire apparaître ou non le sous-menu ? Au moins ça marcherait sous IE6 aussi qui, sauf erreur de ma part, n'aime pas les valeurs négatives.


Je viens d'essayer mais ça me fout le bazar. Bon, faut croire que je n'ai toujours pas pigé le principe des menus déroulants !
Sujet clos
Aller à