[CSS] alignement lien/image

Version imprimable

13/06/2006, 14h32
speedev

[CSS] alignement lien/image

Bonjour,

Voilà, j'ai un menu horizontal sous-forme d'onglets.
Je passe par du CSS (classes "a" et "a:hover") avec des images en background. Le soucis c'est que je ne parviens pas à aligner verticalement le texte du lien par rapport à l'image (le texte est trop haut donc pas centré sur l'onglet). J'ai beau passer par toutes les propriétés css que j'utilise habituellement (vertical-align:top ou padding-top:5px -pour tenter de rabaisser tout ça- line-height : 5px etc...etc...) mais niet!
Info: les liens sont dans des cellules respectives de la même taille que les images. Peu importe comment je modifie les padding ou margin, le texte ne bouge pas d'un chouia par rapport à l'image. Le positionnement de l'image en background est correct.

Quelqu'un a-t-il déjà eu ce problème et comment s'en sortir??
13/06/2006, 14h44
Chronax

j'ai jamais eu ce genre de probleme mais si tu pouvais nous montrer les codes en question je crois que ca arrangerait tout le monde !:D

code

Le code pour un lien (sans le hover) dans le css:

Code:

1
2
3
4
5
6
7
8
9
10
11
a.image_centre { 
	display: block;
	width: 166px;
	height: 29px;
	background-image: url("../images/bt_on.gif");
	background-position: bottom;
	letter-spacing:3px;
	text-decoration: none;
	text-align:center;
	font-weight:normal;
}

le code de la cellule dans lequel ce trouve le lien:

Code:

1
2
3
4
5
6
7
8
.td_onglet{
	padding:0px;
	width:133px;
	vertical-align:center;
	text-align:center;
	height:auto;
	border: 0px solid black;
}

Faites vos jeux!

14/06/2006, 09h36
speedev

j'savais qu'ça poserait problème à résoudre.
Bon je clotûre la discussion, je chercherai ça plus tard.
14/06/2006, 11h28
speedev

Solution

Ok j'ai trouvé la solution, enfin un collègue m'a donné une solution et qui fonctionne :P .

Code:

<a href="gnagna" class="lien_image"><br class="br_lien" /> truc chouette</a>

je mets un <br /> dans le lien qui a une classe dont le font-size est tout petit (5px)...

Certes ça fait bidouillage, mais propre bidouillage invisible et pas lourd.
Je suis sûr que servira à d'autres!