Discussion :

[speedev]

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??

[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 !

[speedev]

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

Code :

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

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 :

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

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!

[speedev]

j'savais qu'ça poserait problème à résoudre.
Bon je clotûre la discussion, je chercherai ça plus tard.

[speedev]

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

Code :

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

<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!