18041 sujets

Questions générales et questions de débutants

Menu déroulant avec alignement vertical du texte en bas

re bonjour,

j'ai à nouveau une question pour le menu déroulant vertical.
j'ai crée une zone de menu déroulant fixe en paramétrant mon "#menu ul " avec une largeur et une hauteur fixe (en pixels).

J'aimerais que les liens en sous-menus <li>soient alignés en bas de mon de ma zone de sous-menus.

j'ai tenté de modifié mes "#menu ul" ou "#menu li" en ajoutant "vertical-align: bottom;". mais les liens ne s'alignent pas.

merci Smiley smile
Salut.

Utilise le "line-height" et les marges des liens. La propriété "vertical-align" ne s'applique qu'aux cellules de tableau et aux éléments en-ligne.
merci pour les réponses.

mais le "line-height" augmente l'interlignage de ma liste <li>.
or, je souhaite que toute la liste, soit alignée en bas de mon restangle.
Ah, je comprends mieux Smiley smile

Je placerais le menu en absolu, en bas du header :
<div id="header">
   <ul id="menu">
      <li>...</li>
   </ul>
</div>
avec
#header {
   position: relative;
}
#menu {
   position: absolute;
   bottom: 0;
   /* Plus les dimensions qui vont bien [smile] */
}
Modérateur
bonjour,

juste en passant , rapidement , un peu de menage peut-etre dans le code html , on retrouve un div header dans les dl et 2 fois un ul#menu.

pour ul des sous menu un display:table-cell; avec un vertical-align:bottom , fera l'affaire.

Pour IE je regarde ce soir en rentrant (+-23heures), il y'a peut-etre quelque chose du coté de inline-block , float et padding top , je m'avance peut-etre trop , et ça ressemble a du coup par coup , alors peut efficace et sujet a bug ... sinon peut-etre : ajout d'un <li> vide pour reperndre un "hack / technique" de centrage verticale de block dans IE.

++
Modifié par gcyrillus (08 Nov 2006 - 15:46)
Modérateur
bonsoir,
ce n'est pas un li supplementaire pour IE , mais juste un span vide , ça vaut mieux qu'un tableau .
(pour rappel la validité du doctype , peut avoir son importance dans le rendu pour IE , le zoom:1; sur le span n'est pas necessaire en mode quirk par exemple )
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html  xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>test menu , vertical-align :bottom .</title>
<style type='text/css'>
dl , ul , dd  {
	padding:0px;
	margin:0px;
	list-style-type:none;
}
dt  	{background:#567;}
dd  	{background:#678;}
div 	{background:#9ab;}
a 	{color:white;}
dd ul {
	vertical-align:bottom;
	display:table-cell;
	width:200px;
	height:139px;
}
div  {
	height:200px;
	position:relative;
}

dl , dd  {
	position:absolute;
	bottom:0;
	width:200px;
}
dd {
	bottom:1.1em;
	left:0;
}

</style>
<!--[if IE ]>
<style type="text/css">
dl , ul , dd {
	zoom:1;

}
dd span {
	width:0px;
	height:139px;
	vertical-align:bottom;
	background:red;
	zoom:1;
}
dd ul {
	display:inline;
	height:auto;
}

dt {
	position:absolute;
	bottom:0;
	width:200px;
}

</style>
<![endif]-->
</head>
<body>
<div>
<p>un peu de texte</p>	
	<dl>	
	  	<dt ><a href="#" >produits</a></dt>
	  	<dd id="smenu3" ><span></span>
			<ul>
				<li><a href="#">Sous-Menu 3.1</a></li>
				<li><a href="#">Sous-Menu 3.2</a></li>
				<li><a href="#">Sous-Menu 3.3</a></li>
				<li><a href="#">Sous-Menu 3.4</a></li>
				<li><a href="#">Sous-Menu 3.5</a></li>
			</ul>
		</dd>
	</dl>
</div>
</body>
</html>


Si cela te convient , je te laisse reprendre le css pour les fond , dimensions et couleur de texte .

Le javascript va aussi necessité une reprise . le mieux est peut-etre d'appliqué le css au travers d'une class , et de n'appliquer celle -ci qu'au survol de dd .

bonne soirée.
Modifié par gcyrillus (08 Nov 2006 - 21:45)
C'est pas tout à fait ça. J'apprécie le geste Smiley smile , mais en fait, ça ne va pas du tout.
tant pis, je ferai une navigation un peu plus simple graphiquement.

merci
Sujet clos
Aller à