[CSS][HTML] Longueur d'un lien

**Anduriel** · 29/06/2006, 17h57

Salut,

Je suis encore confronté à un mystère de l'HTML...
Sur une page j'ai ce code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#" class="topleft">[!infos!]</a><a href="#" class="topleftdesactive">[!config!]</a><a href="#" class="topleftdesactive">[!login!]</a><br />

Avec comme class CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
a.topleft {
	color: black;
	font-family: arial;
	font-size: 11px;
	text-decoration: none;
	width: 100px;
	cursor: default;
	padding-top: 5px;
	height: 22px;
	text-align: center;
	background-image: url(../../images/top-left-active.jpg);
	background-repeat: no-repeat;
}

La longeur des liens fait bien 100px.

Sur une autre page, j'ai exactement le même code html (exactement exactement), mais la longeur du lien s'adapte à la longueur du texte, et ne fait pas 100px...

Comment faire?
Merci

**adiGuba** · 29/06/2006, 18h13

Salut,

Je suppose que tu dois utiliser Interner Explorer...

En effet les éléments <a> sont des éléments inline et ne prennent pas en compte le style CSS width puisque leur taille s'adapte au contenu...

Or par défaut IE authorise cela...
Toutefois si tu déclare ta page en XTML, par exemple avec l'entête suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">

Alors IE sera un peu plus conforme aux normes et ne prend pas en comte le style CSS width pour les éléments inline...

Tu peux corriger cela en ajoutant le code CSS suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
    display: block;
    float: left;

a++

**Anduriel** · 29/06/2006, 18h33

Merci à toi la longeur s'est en effet arrangée, après plusieurs teste j'ai opté seulement pour inline-block. Le problème maintenant c'est que j'ai mon lien, et quand je mets à la ligne un div, j'ai un espace vide (du 3 ou 4px de hauteur) qui les sépare.
Même en mettant les margin à 0, ça ne corrige pas

**masu** · 29/06/2006, 19h03

essai peu-etre de voir le jouer sur la propriété line-height.
C'est juste une idee j'ai pas testé

**Anduriel** · 29/06/2006, 19h34

Merci mais je ne sais pas sur quoi agit cet attribut. J'ai iben tenté plusieur hauteur mais ça ne change rien

**masu** · 30/06/2006, 01h38

le lineheight est la haiteur d'une ligne de text, parfois elle impose un espace (ca m'etait arrivé d'avoir un espacement une fois a cause de ca je sais plu dans quels circonstances exectement);

Pour verifier que ca ne vienne pas d'un marge tu peu essayer un truc qui va toutes les enlever

Code :

Sélectionner tout - Visualiser dans une fenêtre à part