28172 sujets

CSS et mise en forme, CSS3

[Résolu] Menu tab horizontal - Décalage si menu sur 2 lignes

Bonjour,
Je voulais m'inspirer d'un menu que je trouvais sympa à cette adresse :
http://www.htmldog.com/examples/tabs5.html
J'ai commencé à l'adapter à mes besoins, mais si un des libellés est sur 2 lignes, ceux qui sont sur une ligne s'alignent en haut. J'ai testé plusieurs possibilité pour corriger le problème mais rien à faire.

Merci d'avance pour votre aide !

Voici mon code :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#tabheader {
	background-color: white;
}
#tabheader ul {
	list-style: none;
	padding: 0;
	margin: 0;
	background: white;
	float: left;
	width: 100%;
	vertical-align: bottom;
}
#tabheader li {
	float: left;
	margin: 0 1em 0 0;
}
#tabheader a {
	text-decoration: none;
	display: block;
	width: 6em;
	padding: 0 0.5em;
	font-weight: bold;
	color: black;
	border-bottom: 0.5em solid #fc6;
	color: #fc6;
	font-size: 12pt;
}
#tabheader a:hover {
	color: #fa3;
	border-color: #fa3;
}
#tabheader #tabselected a {
	color: #f80;
	border-color: #f80;
}
#tabcontent {
	background: #fc0;
	padding: 0.1em;
}

</style>
</head>
<body leftmargin="0" topmargin="5px" marginheight="0" marginwidth="0">
<div id="tabheader"> 
  <ul>
      <li id="tabselected"><a href="#">Accueil</a></li>
      <li><a href="#">Premier sur 2 lignes</a></li>
      <li><a href="#">Troisième</a></li>
      <li><a href="#">Quatrième sur 2 lignes</a></li>
      <li><a href="#">Cinquième</a></li>
  </ul>
</div>
<div id="tabcontent">
  <br /><br /><br /><br /><br /><br /><br /><br />
</div>
</body>
</html>

Modifié par anthony37 (24 Oct 2011 - 12:13)
Hello.

En remplaçant le float: left sur #tabheader li par un display: inline-block, tu pourras utiliser vertical-align et obtenir le résultat voulu.
Sujet clos
Aller à