28173 sujets

CSS et mise en forme, CSS3

[Résolu] Pb menu déroulant (bug IE6)

Bonjour,

J'ai un peu fouillé sur le forum mais je n'ai pas trouvé.

Je m'inspire du menu horizontal Alsacréations (merci au passage) :
http://css.alsacreations.com/modelesmenus/hd1.htm

CSS

/*-------------------------*/
/* Menu déroulant             */
/*-------------------------*/

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}

#menu {
background-color: #79849f;
margin-left:25px;
margin-right:25px;
z-index:100;
width:974px;
height:32px;
line-height:32px;
position:absolute;
top:220px;
}

#menu .first-dl {
width:219px;
}

#menu dl {
float:left;
width:107px;
color:white;
}

#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
border-right: 1px solid white;
}

#menu dd {
display:none;
border-right: solid 1px white;
border-left: solid 1px #79849f;
border-bottom: solid 1px #79849f;
}

#menu li {
text-align: center;
list-style-type:none;
}

#menu li a, #menu dt a {
color: white;
background: #79849f;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}

#menu li a:hover, #menu dt a:hover {
background: #79849f;
}


HTML

<div id="menu">
			<dl class="first-dl">
				<dt>&nbsp;</dt>
			</dl>
			<dl>
				<dt onmouseover="javascript:montre();"><a href="/" title="Informations">Soci&eacute;t&eacute;</a></dt>
			</dl>
			<dl>			
				<dt onmouseover="javascript:montre('smenu1');">M&eacute;tier</dt>
					<dd id="smenu1">
						<ul>
							<li><a href="#">Sous-Menu 1.1</a></li>
							<li><a href="#">Sous-Menu 1.2</a></li>
							<li><a href="#">Sous-Menu 1.3</a></li>
							<li><a href="#">Sous-Menu 1.4</a></li>    
						</ul>
					</dd>
			</dl>
    	   	<dl>	
				<dt onmouseover="javascript:montre();"><a href="/">Solutions</a></dt>
			</dl>
			<dl>	
				<dt onmouseover="javascript:montre('smenu3');">Etudes de Cas</dt>
					<dd id="smenu3">
						<ul> 
							<li><a href="#">Sous-Menu 3.1</a></li>
						</ul>  
					</dd>
			</dl>
			<dl>	
				<dt onmouseover="javascript:montre('smenu4');">Espace Presse</dt>
					<dd id="smenu4">
						<ul>
							<li><a href="#">Sous-Menu 4.1</a></li>
						</ul>
					</dd>
			</dl>
		</div>


Le problème :
sous IE6 => les options du menu déroulant prennent toute la largeur (974px)
sous FF1.5.0.1 => le comportement est satisfaisant. Par contre, si je désactive l'attribut height de #menu, j'obtiens le même comportement qu'avec IE6.
Le modèle fonctionne correctement sous les deux navigateurs.

Merci de votre aide.
Modifié par sytou (06 Apr 2006 - 11:53)
Administrateur
sytou a écrit :
Dix gros doigts et pas de cervelle Smiley decu

Pas grave, il suffit d'éditer ton premier message Smiley smile
Salut,

Ca a juste rapport avec la couleur de fond que tu mets sur #menu, la même que sur l'élément A.
C'est plutôt logique : si le sous menu apparaît, le div#menu s'étire, et comme elle a la même couleur de fond que l'élément A, tu as l'impression que c'est celui ci qui prend toute la largeur.
En revanche le div#menu ne s'étire pas si tu lui donnes un height, sauf sous IE où le height se comporte dans ce cas comme un min-height.

Donc enlève la couleur de fond de #menu pour la mettre par exemple sur #menu dl

A+
Modifié par Alan (05 Apr 2006 - 11:55)
Super ! Il faut que je rajoute un petit bout pour que le menu occupe toute la largeur mais le principal était de faire marcher le sous-menu.
Comme quoi, il faut du temps pour maitriser ces comportements.
Encore un grand merci.
Je vias de ce pas modifier mon titre [Résolu]
Encore moi !
Encore une suggestion SVP :
je veux élargir la zone de sous-menu (x2) par rapport à l'entete du menu.
Dans le JS, j'affecte dynamiquement la largeur (width) des zones (beurk !).
Sous FF => nickel
Sous IE => l'entete de menu (balise dt) prend le width du sous menu et décale tous les autres éléments.
Merci encore de votre aide.
PS : j'enlève le [résolu] en attendant
Impressionnant Alan !
Tu respires le CSS, tu parles CSS, tu vis CSS (pas trop j'espère).
Il me reste encore du chemin à faire pour atteindre un tel niveau (je n'arrive pas à me convertir en balise) mais je ne désèspère pas ... Smiley bawling
Encore merci (on ne le dit jamais assez)
PS : je mets à nouveau [Résolu]
Si tu savais à quel point tu te trompes : il y a quelques semaines seulement je ne savais quasi rien, ou très mal, et aujourd'hui encore je dis des énormités ou je découvre des choses que seuls les débutants peuvent ignorer.

Après c'est souvent les mêmes problèmes qui reviennent, donc facile de trouver des solutions.

A+
Bonjour à tous,

j'avais quasimment exactement la même question donc merci pour le tip du absolute, ca a résolu ...quasimment...mon problème.
Mais je n'arrive pas à faire en sorte que le sous-menu apparaisse exactement sous le menu, il est toujours aligné à droite (en retrait dû au <dd> je suppose...).
Du moins , j'ai ce problème sous IE et pas sous FF....

Comment faire ??? pouvez vous m'aider ?

Merci


Extrait du CSS:


DIV#header_menu_part
{    
/*width: 22cm;*/
width: 100%;
border:none;
}

#header_menu_part dd{
position: absolute;
width: 159px;
text-align: center;
}

#header_menu_part dl
{
  float: right;
  height: 20px;
    
  margin: 3px;
  width: 159px;
 
  border: none;

  background-color: transparent;
  background-image: url("/Img/xx.jpg");
  background-repeat:no-repeat;
  background-position: 50% 50%;
}

#header_menu_part dt {
cursor: pointer;
margin: 2px 0;
height: 20px;
text-align: center;

font-weight: bold;
border: none;
}

#header_menu_part dd{
position: absolute;
width: 159px;
text-align: center;
}

#header_menu_part li {
  background-color: green;
}

#header_menu_part dl, #header_menu_part dt, #header_menu_part dd{
margin: 0;
padding: 0;
}

Modifié par Rimka (06 Apr 2006 - 15:56)
Sujet clos
Aller à