28221 sujets

CSS et mise en forme, CSS3

[résolu] Alignement vertical du texte d'un lien dans son image de fond

Bonjour,
J'ai un menu qui utilise des images pour représenter des boutons. Ce que je voudrais c'est aligner le texte du lien centré verticalement dans le bouton.

La seule solution satisfaisante que j'ai trouvé est la suivante :


<ul class="menu">
  <li class="mnuNotSelect"><a href="statistiques/consultation/consulter.asp"><div class="mnuNotSelectDiv">Consulter</div></a></li>
</ul>


.mnuNotSelectDiv {
	text-align: center;
	padding-top: 4px;
}
.mnuNotSelect a {
	display: block;
	height: 30px;
	width: 140px;
	color: black;
	font-weight: bold;
	text-decoration: none;
	background-image: url(/StatsMinistere/images/menu%20bleu.gif);
	background-repeat: no-repeat;	
}


Mais ce n'est pas valide XHTML 1.1 (balise div enfant de la balise inline a Smiley decu )
J'ai essayé en remplaçant le div par un span, mais alors rien à faire Smiley ohwell

Si quelqu'un a une solution propre et valide à me proposer je lui en serai très reconnaissant Smiley smile

Merci

Sylvain
Modifié le 22 Nov 2004 - 22:41
Administrateur
Poire a écrit :

Si quelqu'un a une solution propre et valide à me proposer je lui en serai très reconnaissant Smiley smile

Salut,

As-tu commencé par effectuer une Recherche ?
Raphael a écrit :

Salut,

As-tu commencé par effectuer une Recherche ?


oui j'ai fait une recherche et j'ai déjà consulté ces 3 topics ainsi q'un certain nombre d'autre sites. Ainsi que google et les news group google Smiley langue
Et je n'ai rien trouvé de satisfaisant Smiley decu
Administrateur
La Recherche t'aurait permis de trouver la solution à partir de ce topic : http://forum.alsacreations.com/topic.php?fid=4&tid=35&s=alignement+vertical

La solution est expliquée ici : http://marcarea.com/weblog/index.php/2004/10/18/182-10AstucesCssCorrection

Et voici un exemple :
<!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></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
li {
background: yellow;
height: 50px;
list-style: none;
}
li a {
line-height: 50px;
}
-->
</style>
</head>
<body>
<ul>
<li><a href="#">un lien centré</a></li>
</ul>
</body>
</html>
Merci beaucoup
J'ai pas encore eu le temps de l'intégré mais j'ai fais un ptit test vite fait en local et ça marche Smiley smile

Par contre j'ai qq points à éclaircir (j'vais potasser ma signification de balises Smiley sweatdrop )

Merci en tout cas pour les excellents tutoriels et l'aide apporté Smiley smile

@+
[HS]Par contre c'est normal que je n'ai pas toutes les notifications par mail à chaque réponse ? j'ai eu par mail ta 1ere réponse et la dernière mais pas celle du milieu Smiley ohwell

C le forum qui déconne ou GMail ? Smiley biggol
Administrateur
Curieux, je n'ai pas encore eu ce problème... peut-être un ralentissement du serveur mail, tu recevras peut-être la notification plus tard.
Voila je viens de l'intégrer sur le site et ça marche au poil Smiley smile
Merci encore Smiley jap
Dire que j'ai passé tant de temps à chercher une solution complexe alors que c'était si simple Smiley biggol

ça serait cool de rajouter la technique ligne-height dans le tutoriel sur l'allignement vertical Smiley smile

J'avoue ne pas comprendre encore pourquoi ça centre, mais le principal est que ça marche Smiley lol

Mici @+
Administrateur
Poire a écrit :

J'avoue ne pas comprendre encore pourquoi ça centre, mais le principal est que ça marche Smiley lol

Parce que line-height détermine la hauteur de ligne du texte et que le texte se place par défaut au milieu de cette hauteur.
Si le line-height est égal à la hauteur du bloc dans lequel se trouve le texte, alors celui-ci sera centré verticalement dans ce bloc.

Par contre, cette bidouille ne fonctionne pas si ton texte fait plus d'une ligne.
ok, c'est bon à savoir pour le multiligne

mais pour moi ligne-height correspond à l'interligne (http://dicolive.media-box.net/docCSS/css.php?orderByType=1&id=74)

et tjs pour moi, l'interligne c'est pas la même chose que la hauteur de ligne... c'est pour ça que je comprenait pas bien. Mais si c'est comme tu dis, alors tout de suite je comprend mieux Smiley smile
Sujet clos
Aller à