Aligner image et texte

Bonjour

Dans le cadre de mon design, je dois afficher une image ,et son lien.

Par exemple :

http://touchapp.fr/developpement/images/categories.png Catégories

Et le lien toucherait catégories et l'image :

<li class="categories"><a href="categories.html"> Forum</a></li>

Je ne sais pas si je dois utiliser l'image en background du lien, ou mettre l'image dans le xhtml, franchement j'ai du mal et je n'y arrive pas;

J'ai essayé énormément de choses, et dans tous les cas, à chaque fois le texte n'était pas aligné verticalement.

Il s'affichait comme ceci :

http://up.jeoffrey54.com/upload/test.png

Moi je souhaiterais que le texte soit aligné verticalement.

Un petit coup de main ?

Bonne journée à tous.

Dans ce genre de cas, je met l'image en background ( du <li> par exemple ) étant donné que c'est plus une puce qu'une image dans ton cas, ensuite je l'aligne avec le texte grace au background-position.

Par contre tu devra définir une hauteur pour ton <li>.

Salut Salah.

Je suis d'accord avec toi, mais ensuite si je met l'image en background du li, celui-ci n'est plus défini comme un lien :S

Et donc plus cliquable !

Bonjour.

Voila qui devrait t'aider : Comment centrer un élément verticalement ?.

Merci Changaco Je vais étudier sa immédiatement ! Je vous tiens au courant =)

Merci.

Jeoffrey54 a écrit :

Je ne sais pas si je dois utiliser l'image en background du lien, ou mettre l'image dans le xhtml

Dans ce cas-ci, c'est à peu selon ta préférence. Petit exemple rapide:

[#black][b]HTML[/b][/#]

<a href="#">
	<img src="image.png" alt="" />
	Hello world
</a>

[#black][b]CSS[/b][/#]

a {display:block}
a img {vertical-align:middle}

J'ai utilisé ceci :

#menugauche li.itouch a
{
background:url(../images/itouch.png) no-repeat;
display:-moz-inline-block; /* FF2 */
display:inline-block;
padding-left:62px; /* Largeur de l'image + Espacement si nécessaire */
line-height:62px; /* Hauteur de l'image */
margin-bottom: 30px;
}

L'image est bien alignée au texte, et les 2 sont pris en compte comme un lien, ca marche bien, mais sur IE, l'image n'est pas considérée comme un lien. Pourquoi ?

Jeoffrey54 a écrit :
L'image est bien alignée au texte, et les 2 sont pris en compte comme un lien, ca marche bien, mais sur IE, l'image n'est pas considérée comme un lien. Pourquoi ?

Parce que "inline-block" n'existe pas sous IE ...
Ici il serait à mon avis plus intelligent de mettre les <li> en "inline" et les <a> en "block".

oui ton li en inline avec un padding left et ton li a en display:block, pour un alignement précis tu n'as qu'a mettre ton text dans un span et definir tes paddings pour le li a span.
Si tu ne veux pas indiquer de height a ton li et laisser le a englober le tout, tu as tjs la possibilté de mettre l'image et le span dans le href de ton li et de definir les li a img et li a span en float:left avec les paddings correspondants je pense ...