Vertical align dans un menu dynamique

Question

fabfab2000

19 Jul 2006 à 11:24

Bonjourbonjour,

Je puise souvent des infos niveau css dedans... vraiment tres bien fait, tres pedagogique... Mais la.... je bloque
Je suis actuellement en train de me prendre la tete sur un menu css pour un bon referencement naturel... malheureusement j'ai un soucis d'alignement vertical (le fameu et vilain pas beau)

voici ou vous pouvez voir le menu :
le menu visible ici

le voici le voila... le code:

<style>
/* MENU */

#contenerg {font-size: 10px ; height:37px; width:798px;}
#contenerd {}


#menunav, #menunav ul { /* toutes les listes */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 15px;  
}

.topnav {height:34px; padding-top:2px; vertical-align: bottom;}
.topnav a{ height:34px;}

.topnav div.accueil {width:113px; border-right:1px solid #fff;}
.topnav div.papeterie {width:113px; border-right:1px solid #fff;}
.topnav div.fourniture {width:113px; border-right:1px solid #fff;}
.topnav div.classement {width:113px; border-right:1px solid #fff;}
.topnav div.environnement {width:113px; border-right:1px solid #fff;}
.topnav div.consommable {width:113px; border-right:1px solid #fff;}
.topnav div.info {width:113px; border-right:1px solid #fff;}
.topnav div.amenagement {width:113px; border-right:1px solid #fff;}
.topnav div.sieges {width:113px; border-right:1px solid #fff;}
.topnav div.mobilier {width:113px; border-right:1px solid #fff;}
.topnav div.services {width:113px; border-right:1px solid #fff;}
.topnav div.promo {width:113px;}

.topnav div a:hover { background-color:#b6d4ea;}
.topnav ul li a{height:25px;
width:116px;
vertical-align:bottom;
padding-left:5px;
border: solid 1px #4a7aa1;
border-top:0;
font:700 9px verdana, sans-serif;
color:#4a7aa1;
!important;
width: 110px;
}
.topnav ul li a:hover { background-color:#cde1f1; width:116px; !important; width: 110px; } /* liens liste deroulante */
.topnav ul li.rubrique  {background:url(/include/nouveau_menu/includes/nah2/comm_btn_flechon2.gif) top left no-repeat #cde1f1;}
.topnav ul li.rubrique a:hover {background:url(/include/nouveau_menu/includes/nah2/comm_btn_flechon2.gif) top left no-repeat #cde1f1;}
.spacer { margin:5px;}



.topnav a.entetetest { text-align:center; font:700 11px Arial, Helvetica, sans-serif; background-image:url(/include/nouveau_menu/includes/nah2/coinhg.gif); background-color:#4b7ba3; color:#FFFFFF;}
.topnav a.entetetest:hover {width:100%; color:#3c6c93; background-image:url(/include/nouveau_menu/includes/nah2/coinhg_on.gif);}


#topnavgauche { background: url(/include/nouveau_menu/includes/nah2/topnavgauche.gif) left top no-repeat; height:35px; margin:0; padding:0;}
#topnavdroite { background: url(/include/nouveau_menu/includes/nah2/topnavdroite.gif) right top no-repeat; height:35px; margin:0; padding:0;}

#menunav a {
	display: block;
	text-decoration:none;
	
}

#menunav li { /* tous les items de liste */
	float: left; 

}

#menunav li ul { /* listes de deuxième niveau */
	position: absolute;  z-index:999;
	background: #fff;
	width: 116px;
	display:block;
	left: -999em; /* on met left plutôt que display pour cacher les menus parce que display: none n'est pas lu par les lecteurs d'écran */
}

/* ############################################## IE HACKS############################################## */
* html #menunav li ul {
	width : 110px; /* for ie5 and ie6 in quirks mode */
	w\idth : 110px; /* for ie6 in starndards mode */
}
/* ############################################## FIN de IE HACKS############################################## */



#menunav li ul ul { /* listes de troisième niveau et plus */
	margin: -1em 0 0 8em;
}

#menunav li:hover ul ul, #menunav li.sfhover ul ul {
	left: -999em;
}

#menunav li:hover ul, #menunav li li:hover ul, #menunav li.sfhover ul, #menunav li li.sfhover ul { /* listes imbriquées sous les items de listes survolés */
	left: auto;  color:#676767; font-weight: 400;
}

#content {
	clear: left;
	color: #ccc;
}

</style>
<div id="contenerg">
<div id="contenerd">
			<ul id="menunav">	
				<li class="topnav">
					<div class="accueil">
						<a href="#" class="entetetest" title="Soutiens - gorge">Soutiens - gorge</a>
					</div>
					<ul>
						  <li class="rubrique"><a href="#" title="Sans Armature"><span class="spacer">&nbsp;</span>Sans Armature</a></li>
						  <li><a href="#" title="Triangle">Triangle</a></li>
						  <li><a href="#" title="Sport">Sport</a></li>
						  <li><a href="#" title="Brassi&egrave;res">Brassi&egrave;res</a></li>
						  <li><a href="#" title="Bandeaux">Bandeaux</a></li>
						  <li><a href="#" title="Maternit&eacute;">Maternit&eacute;</a></li>
						  <li class="rubrique"><a href="#" title="A Armature"><span class="spacer">&nbsp;</span>A Armature</a></li>
						  <li><a href="#" title="Sans Bretelles">Sans Bretelles</a></li>
						  <li><a href="#" title="Bretelles amovibles">Bretelles amovibles</a></li>
						  <li><a href="#" title="Corbeille">Corbeille</a></li>
						  <li><a href="#" title="Balconnet">Balconnet</a></li>
						  <li><a href="#" title="Triangle">Triangle</a></li>
						  <li><a href="#" title="Tour de cou">Tour de cou</a></li>
						  <li><a href="#" title="Push-up">Push-up</a></li>
						  <li><a href="#" title="Bonnets moul&eacute;s">Bonnets moul&eacute;s</a></li>
						  <li><a href="#" title="Armatures cach&eacute;es">Armatures cach&eacute;es</a></li>
					</ul>
				<li class="topnav">
					<div class="papeterie" align="center">
						<a href="#" class="entetetest" title="Slips, strings, tangas">Slips, strings, tangas</a>
					</div>
				<ul>
					<li><a href="#" title="Slips &amp; culottes">Slips &amp; culottes</a></li>
					<li><a href="#" title="Strings">Strings</a></li>
					<li><a href="#" title="Tangas">Tangas</a></li>
					<li><a href="#" title="Boxers">Boxers</a></li>
					<li><a href="#" title="Porte-Jarretelles">Porte-Jarretelles</a></li>
				</ul>	
				</li>

				<li class="topnav">
					<div class="fourniture" align="center">
						<a href="#" class="entetetest" title="Tops &amp; caracos">Tops &amp; caracos</a>
					</div>
					<ul>
						<li><a href="#" title="Caracos">Caracos</a></li>
						<li><a href="#" title="Tops">Tops</a></li>
					</ul>
				</li>

				<li class="topnav">
				<div class="classement" align="center">
					<a href="#" class="entetetest" title="Gu&ecirc;pieres &amp; bodys">Gu&ecirc;pieres &amp; bodys</a>
				</div>
				<ul>
					<li><a href="#" title="Gu&ecirc;pi&egrave;res">Gu&ecirc;pi&egrave;res</a></li>
					<li><a href="#" title="Bustiers">Bustiers</a></li>
					<li><a href="#" title="Bodys">Bodys</a></li>
				</ul>
				</li>
				
				<li class="topnav">
				<div class="environnement" align="center">
					<a href="#" class="entetetest"  title="Homewear &amp; nuit">Homewear &amp; nuit</a>
				</div>
				<ul>
					<li><a href="#" title="Tous">Tous</a></li>
				</ul>
				</li>
				
				<li class="topnav">
				<div class="consommable">
					<a href="#"  class="entetetest" title="Beachwear &amp; sport">Beachwear &amp; sport</a>
				</div>
				<ul>
					<li><a href="#" title="Maillot 1 pi&egrave;ce">Maillot 1 pi&egrave;ce</a></li>
					<li><a href="#" title="Maillot 2 pi&egrave;ces">Maillot 2 pi&egrave;ces</a></li>
					<li><a href="#" title="Maillots Combinables">Maillots Combinables</a></li>
					<li><a href="#" title="Beachwear">Beachwear</a></li>
					<li><a href="#" title="Sport">Sport</a></li>
				</ul>
				</li>
				
				<li class="topnav"><div class="info"><a href="#" class="entetetest"  title="Bas &amp; collants">Bas &amp; collants</a></div>
				<ul>
					<li><a href="#" title="Bas">Bas</a></li>
					<li><a href="#" title="Collants">Collants</a></li>
					<li><a href="#" title="Chaussettes">Chaussettes</a></li>
				</ul>
				</li>
			</ul>


</div>
</div>

Modifié par fabfab2000 (20 Jul 2006 - 10:59)

Vero

19 Jul 2006 à 11:44

Bonjour fabfab2000 et bienvenue sur ce forum, Smiley smile

Tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

fabfab2000

19 Jul 2006 à 12:14

pardon pardon... un oublie de ma part Smiley smile

désolé ca ne se refera plus promis Smiley smile

Raphael

Administrateur

19 Jul 2006 à 12:57

Hello,

Pourrais -tu donner plus d'explications, un visuel ou une page en ligne, de façon à éviter aux autres membres de devoir copier-coller ton code ?
Ça te facilitera les choses Smiley cligne

En attendant, as-tu testé la méthode du line-height ?
http://forum.alsacreations.com/faq/#item3

fabfab2000

20 Jul 2006 à 11:01

désolé
juste le menu etait en dynamique et il tourné en local...
donc j'ai du modifier le code avant de vous le copier/coller
la j'ai recréer un menu statique...
le soucis viens du fait que je ne sais pas a l'avance si il y a une ligne ou deux...
du coup l'alignement vertical avec un line height ne passe pas...
j'ai besoin que ca tourne sur ie, mozilla & safari minimum
j'espere que qq pourra m'aider rapidement
merci d'avance
fab

mere-teresa

1 Sep 2006 à 10:22

J'ai exactement le même problème !
A la différence : je sais quels items vont avoir une ligne ou deux, puisque c'est moi qui les crée.

=> en ce cas, y a-t-il un moyen d'aligner les items à une ligne au milieu de leur <li></li> ?

Je me réponds à moi même :
J'ai appliqué la classe uneligne aux éléments contenant les liens (des dt et li chez moi), puis j'ai suivi l'astuce de Marc http://marcarea.com/weblog/index.php/?2004/10/18/182-10-astuces-css-correction[/url]

Ce qui donne

.uneligne a{
font-size: 11px;
line-height:22px;
}

Modifié par mere-teresa (01 Sep 2006 - 10:53)

Sujet clos

CSS et mise en forme, CSS3

Vertical align dans un menu dynamique