28172 sujets

CSS et mise en forme, CSS3

[Résolu] Centrer verticalement le texte dans menu horizontal

Bonjour,
Comme l'indique le titre, j'essaie désespérément de centrer le texte verticalement dans un menu horizontal car il y a des boutons sur 1 ligne et d'autres sur 2 lignes (c'est pour faire joli)...

En cherchant un peu , j'ai bien trouvé une explication en utilisant line-height... Mais je n'arrive pas a l'adapter a mon code.
Je recherche donc une bonne âme qui pourrait corriger mon code en me plaçant, là ou il faut, ce qu'il faut ou en me trouvant une solution.

Voici mon code :

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

body {
 font: 12px verdana, sans-serif;
 text-align : center;
 margin: 0;
 padding: 0;
}

#menu
{
            position: absolute; 
            width:100%;
	height:auto;
	list-style-type: none;
            margin:auto;
	padding:auto; 
	border: 0;
            text-align: center;
}

#menu > li
{
	float: left;
	width: 110px;
            font: 11px Garamond;
            font-weight: bold;
            margin: 1px;
	padding: 0;
	border: 0;

}
#menu li a{

            display: block;
	color: white;  
            background-color: #FF7519;
	margin: 0;
height:25px;
	padding: 3px 3px;
	border:1px solid #FFFFFF;
            border-radius:12px;
            box-shadow:4px 4px 8px #999;
	text-decoration: none;
}

#menu li a:hover {
        background-color: rgb(175, 214, 1);
        background-color: #EEE8AA;
        font-weight: bold;
        border:1px solid;
        color: #8B4513;
}

#menu .menuderoulant
{
	display: none;
	list-style-type: none;
	margin: 0;   
	padding: 0;
	border: 0;
}
#menu .menuderoulant li
{
	float: none;
	margin: 0;
	padding: 0;
	width: 140px;
            height: 28px;
            font-weight: normal;
            border-top: 1px solid;
	border-right: 1px solid;
            border-left: 1px solid;
}
#menu .menuderoulant li a
{
	display: block;
	color: #8B4513;
	margin: 0;
	border: 0;
            border-radius:0px;
	text-decoration: none;       
            background-color: #EEE8AA;

}
#menu .menuderoulant li a:hover
{
	color: white;  
            font-weight: bold;
            background-color: #FF7519;

}

#menu .menuderoulant li a:visited {
  
                background-color: white;
}

#menu li:hover > .menuderoulant { display: block; }
</style></head>

<body><ul id="menu">

<li><a href="http://www.pierres-info.fr/la_vision/index.html">LA VISION </a>
<ul class="menuderoulant">	
</ul></li>

<li><a href="http://www.pierres-info.fr/l_approche/index.html">L'APPROCHE</a>
<ul class="menuderoulant">	
</ul></li>

<li><a href="http://www.pierres-info.fr/l_histoire/index.html">L'HISTOIRE</a>
<ul class="menuderoulant">	
</ul></li>

<li><a href="http:/www.pierres-info.fr/le_materiau/index.html">LE MATÉRIAU</a>
<ul class="menuderoulant">	
</ul></li>

<li><a href="http:/www.pierres-info.fr/les_outils/index.html">LES OUTILS</a>
<ul class="menuderoulant">			      
</ul></li>

<li><a href="http:/www.pierres-info.fr/la_taille_directe/index.html">LA TAILLE DIRECTE</a>
<ul class="menuderoulant">			      
</ul></li>

<li><a href="http:/www.pierres-info.fr/le_modele/index.html">LE MODELE</a>
<ul class="menuderoulant">			      
</ul></li>

<li><a href="http:/www.pierres-info.fr/copie_compas/index.html">COPIE COMPAS</a>
<ul class="menuderoulant">			      
</ul></li>

<li><a href="http:/www.pierres-info.fr/copie_machine/index.html">COPIE MACHINE</a>
<ul class="menuderoulant">	
</ul></li>

<li><a href="http:/www.pierres-info.fr/le_statut_d_artiste/index.html">LE STATUT D'ARTISTE</a>
<ul class="menuderoulant">			      
</ul></li>
</html>


Ne pas tenir compte des "sous menus" car ils existeront par la suite...
Et je joins résultat en image de ce que cela donne aujourd'hui...

Merci d'avance pour les réponses Smiley biggrin



upload/56496-aspectmenu.JPG
Voila le code dont tu as besoin.

J'ai rajouté le line-height à 25px et une nouvelle classe pour les liens qui auront 2 lignes.

#menu li a{
	display: block;
	color: white;  
	background-color: #FF7519;
	margin: 0;
	height:25px;
	line-height:25px;
	padding: 3px 3px;
	border:1px solid #FFFFFF;
	border-radius:12px;
	box-shadow:4px 4px 8px #999;
	text-decoration: none;
}

#menu li a.ligne2{
	line-height:13px;
}


Après, tu n'auras qu'à rajouter cette classe (ci-dessous)...
class="ligne2"

... dans les liens qui seront sur deux lignes comme pour celui-là.
<a href="http:/www.pierres-info.fr/la_taille_directe/index.html" [b]class="ligne2"[/b]>LA TAILLE DIRECTE</a>


J'espère que ça t'ira. Smiley cligne
Formidable, ça marche du tonnerre et les explications sont enfin parfaitement claire... Sujet enfin résolu.
Alors un grand merci à toi Florian pour ton aide.
Sujet clos
Aller à