28173 sujets

CSS et mise en forme, CSS3

[Résolu] Boutons avec la balise <a>. Problème de positionnement.

Bonjour.
J'ai réalisé un bouton avec une balise <a>. Voici mon code ci-dessous.


<!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">
<head>
  <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
  <title>Test</title>  
  <style>
    a {
      display : block;
      background-image : url(./onglet.jpg);
      background-position : left bottom;	
      width : 107px;
      height : 26px;
      text-decoration : none;
      font-family : Arial;
      font-size : 8pt;
      color : #000;         
    }
    a:hover {
      background-image : url(./onglet.jpg);
      background-position : left top;	
    }
  </style>
</head>
<body>
  <a href="#"> Mon texte </a>
</body>
</html>


Mon problème est le suivant. Je souhaite aligner verticalement le texte (i.e le descendre de 3px), je ne vois pas du tout comment m'y prendre. J'ai essayé bêtement un padding-top, mais ceci décalle également l'image.
Contrainte : cela doit fonctionner dans MSIE et Firefox.
Le lien suivant http://www.splitter.kokoom.com/lien.htm[/url] permet de bien comprendre ce qui ne fonctionne pas correctement.

Merci.
Rémy.
Modifié par RemyVingtNeuf (27 Oct 2006 - 14:54)
Bonjour,
Oui, j'ai pensé à line-height, mais cela ne fonctionne pas. Si j'ai bien compris, line-height augmente l'espacement entre deux lignes, il se trouve que je n'ai qu'une ligne. ligne-height n'influe pas sur la position de la première ligne.
Merci.
Rémy.
Non. line-height, comme son nom l'indique, spécifie la hauteur des lignes de texte.

Dans ton cas, je pense qu'il faut que tu précises
line-height: 26px; vertical-align: middle;
ou quelque chose comme ça.
Modifié par Eldebaran (27 Oct 2006 - 11:59)
Merci beaucoup, ca fonctionne en ajoutant :

line-height : 26px; /* hauteur de l'image */
vertical-align : middle;

En y réfléchissant, je me rends compte que j'ai interprété 'ligne-height' comme 'espacement entre les lignes' et non 'hauteur de la ligne'.
Merci.
Rémy.
Sujet clos
Aller à