Positionnement image dans bloc a

Bonjour,

Je cherche à faire ça sans table.


Le principe étant que la longueur du texte et la taille de l'image sont un peu variable, donc on ne peut pas fixer la hauteur de la ligne. Le but étant aussi d'avoir un effet :hover sur l'ensemble de l'arrière plan.

Tant que je n'avais pas mis d'image, ça fonctionnait à merveille. En revanche dès que je mettais une image, les problèmes apparaissaient. Si l'image est en float: left, elle chevauche la ligne du dessous, en absmiddle, et la deuxième ligne de texte passe dessous.

Bref je n'ai pas trouvé comment conserver cette mise en forme en s'affranchissant du tableau.

PS : l'usage du tableau n'est pas un problème en soi mais je crois que l'entourer par la balise <a> ne se fait pas, non ?...
Modifié par ulysse (17 Sep 2006 - 10:06)

ulysse a écrit :
PS : l'usage du tableau n'est pas un problème en soi mais je crois que l'entourer par la balise <a> ne se fait pas, non ?...

Il n'y a pas grand chose qui puisse être entouré de la balise <a> : uniquement les éléments de type en-ligne (images, texte, span, etc.).

De plus, je voudrais signaler que le texte que tu comptes utiliser pour le lien est un peu long et pas forcément très clair, ce qui peut poser des problèmes d'accessibilité. Je te conseille fortement de lire le sujet suivant :
Est-ce une bonne idée d'élargir un lien à toute une zone ?

Pour ce qui est de la mise en forme sans tableau, il faudra probablement une image en float:left, pour le texte un conteneur (div, p, ou span en display: block) doté d'une marge à gauche de la largeur de l'image, et enfin le bloc qui contient le tout sera en overflow: hidden pour créer un contexte de formatage qui empêchera le dépassement du flottant... ou à la rigueur en clear: left. Quelque chose du genre.