Attribut span pour coller le texte à l'image

Bonjour à tous, voilà un bon moment que je me prends la tête; alors peut être que quelqu'un pourras m'aider..

J'essaie d'afficher deux colonnes avec image et texte (comme dans le screen en bas).

http://img689.imageshack.us/img689/3413/span.jpg

En bas j'ai réussi avec ce code :

<div style="float:left;width:290px;margin-right:25px"><a href="index.php"><img src="images/tutorial/tutorial_icon1.png" align="left" border="0" alt="Install HiveMind" class="nounder" style="margin-right:10px;margin-top:10px" width="111" height="106" /></a><div style="font-size:130%;font-weight:bold;margin-bottom:15px;margin-top:15px">Texte de test</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>

Sauf que le problème c'est que je dois utilisé ceci pour afficher mon image :

<span class="spotlight" style="background: url(../images/logo.png); display: block; width: 240px; height: 180px;"></span>

Car j'utilise un js qui me permet de passer l'image en couleur lorsque je passe la souris dessus, mais avec un fondu

J'ai donc utiliser ce code :

<div style="left:right;width:290px;margin-right:25px"><a href="index.php"><span class="spotlight" style="background: url(../images/tutorial/icon1.png); text-align: left; display: block; width:111px; height:106px;"></span></a></div><div style="font-size:130%;font-weight:bold;margin-bottom:15px;margin-top:15px">Texte de test</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>

Mais cela ne fonctionne pas comme vous pouvez le voir sur le screen, le texte ne viens pas s'aligner à l'image, et je ne sais pas comment faire...

Apriori le fait que cela fonctionne pour les deux icone du bas c'est parce que j'utilise <img src="images/tutorial/tutorial_icon1.png" align="left", mais je ne sait pas faire avec un span au lieu d'un img src

Je sais pas si vous comprendrez, j'ai du mal à m'exprimer puisque ce n'est pas vraiment mon domaine, mais je fait tout pour réussir.

Pour le coup, si quelqu'un peut m'aider et m'expliquer ce qu'il faudrait que je fasse ce serai super sympa.
Modifié par UtOpiK (21 Nov 2009 - 18:48)

Je suis peut être pas assez clair?
Si il y a un problème de compréhension merci de me le dire j'essaierai de faire au mieux pour expliquer le souci.

Merci d'avance.

Salut,

La page en ligne est souvent bien plus parlante, l'élément principale de l'analyse, la compréhension et la résolution des problèmes. Peut être te faudrait-il essayer d'améliorer tes chances de réponse en nous en apportant une ?

Salut,

En reprenant le code qui marche (ne pas oublier de fermer la balise p...). Puis en remplaçant la balise image par celle du span ?
Mais ton script js ne marche pas sur la balise img ?

<div style="float:left;width:290px;margin-right:25px"><a href="index.php"><span class="spotlight" style="background: url(../images/logo.png); display: block; width: 240px; height: 180px;">logo</span></a><div style="font-size:130%;font-weight:bold;margin-bottom:15px;margin-top:15px">Texte de test</div> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>