28202 sujets

CSS et mise en forme, CSS3

Hello,

j'ai un problème d'alignement vertical pour le menu d'un site que je fait en spip.

Dans ce menu à onglet j'ai un div différent pour chaque onglet, mais le problème c'est que le texte affiché dans certains tien parfois sur 2 lignes, et parfois sur une seule ligne.
Je ne peut pas me permettre de faire un style pour chaque onglet, et cherche donc une solution me permettant d'avoir une hauteur d'onglet égale pour tous, et mes texts bien alignés verticalement à l'intérieur.

J'ai déjà essayé la solution avec
height:30px;line-height:30px;
mais qui ne fonctionne pas quand tous les texts n'ont pas le même nbre de lignes (la 2ème ligne se retrouve en dehors du bloc)

Quelqu'un a-t-il une solution ?
Salut,

Tu peux essayer d'appliquer un min-height défini en unité relative pour chacun de tes liens.
ex.
min-height: 2em;

En définissant une hauteur qui couvre au moins deux lignes.
Modifié par Mikachu (22 Sep 2007 - 17:00)

#main_menu{
position:relative;
border:#006600 solid 1px;
height:45px;
width:950px;
}
#main_menu a{
text-decoration:none;
vertical-align:middle;
min-height: 2em;
}
.main_menu_onglets{
display:block;
border:red solid 1px;
float:left;
width:93px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:100;
text-align:center;
}

<div id="main_menu">
	<BOUCLE_menu(RUBRIQUES){id_rubrique != 22}{racine}>
		<div class="main_menu_onglets">
			<a href="#URL_RUBRIQUE">#TITRE</a>
		</div>			
	</BOUCLE_menu>	
</div>


J'ai déjà essayé ça, et mes onglets qui ne contiennent que une ligne de text ont alors une hauteur 2 fois plus petite que ceux qui ont 2 lignes de texte. Je voudrais avoir une hauteur d'onglets uniforme.