28221 sujets

CSS et mise en forme, CSS3

Positionnement vertical du texte dans une liste [résolu]

bonjour,
J'ai un menu vertical à base de liste qui fonctionne bien mais le texte des liens est trop haut dans le <li> comment faire pour le positionner au milieu du <li> ??

Merci Smiley smile 

<!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>Menu vertical en CSS</title>
		<style type="text/css"> <!--

body {
	font: 12px Verdana, Arial, sans-serif;
	}

.menu {
	width: 150px;
	top: 5px;
	left: 5px;
	border: 1px solid #6495ED;
	background-color: #FFFFFF;
	color: #000000;
	}

.menu ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	} 

.menu li {
	margin-left: 5px;
	margin-right: 5px;
	}

.menu p { 	  /* configuration des titres */
	clear:both;
	font-weight: bold;
	width: 149px;
	height: 20px;
	margin: 0px;
	border: 1px solid #6495ED;
	background-color: #6495ed;
	color: #FFFFFF;
	text-align: center;
	}

.menu a {
     margin: 0;
     width: 141px; 
     height: 20px;
     display: block;
     text-align: left;
     text-decoration: none;
     color: #000000;
     font-size: 10px;
	}
	 
.menu a:hover {
     background: #add8e6;       
	}

.centre
	{
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	}
		
--></style>
	</head>
	<body>
		<div class="menu">
			<p>MENU</p>
			<ul>
				<li><a href="index.asp">Accueil</a></li>
				<li><a href="astuces.asp">Entretien des rivières</a></li>
				<li><a href="Coins_peche.asp">Coins de pêche</a></li>
				<li><a href="article.asp">Articles</a></li>
				<li><a href="humeurs.asp">Billets d'humeur</a></li>
				<li><a href="boutique.asp">Boutique</a></li>
				<li><a href="news.asp">Espace membres</a></li>
			</ul>
		</div>
	</body>
</html>


lien : http://www.assoc-sempe.com
Modifié le 05 Feb 2005 - 18:34


.menu li {

	margin-left: 5px;

	margin-right: 5px;

padding-top: 5px;padding-bottom: 5px;

	}


Joue sur les valeurs du padding, mais perso je vois pas ton problème...
le texte est coller en haut du <li> l'espace est trop grand sous le texte Smiley biggol

Tu m'a quand même donné l'idée, je n'ai pas mis le padding à <li> mais a la classe .menu a et ça fonctionne !

.menu a {
     margin: 0;
     padding-top: 5px;
     width: 141px; 
     height: 15px;
     display: block;
     text-align: left;
     text-decoration: none;
     color: #000000;
     font-size: 10px;
	}

merci

Modifié le 05 Feb 2005 - 11:46
Sujet clos
Aller à