Texte sur images flottantes

Question

Je dois mettre du texte sur une série d'images dans une galerie. J'ai trouvé de nombreux tutoriels sur la partie texte, mais les images doivent être flottantes. Chaque fois que j'ajoute float: à gauche, même si l'astuce ne fonctionne plus. Mon code (ligne css pour sac de brièveté):

<a href="/photos/photo1.php" title="photo1"> 
<span style="position: relative; width: 100%;"> 
    <img src="/photos/photo1.jpg" alt="" /> 
    <span style="position: absolute; top: 10px; left: 0; width: 100%;">Text over image</span> 
</span> 
</a> 

<a href="/photos/photo2.php" title="photo2"> 
<span style="position: relative; width: 100%;"> 
    <img src="/photos/photo2.jpg" alt="" /> 
    <span style="position: absolute; top: 10px; left: 0; width: 100%;">Text over image</span> 
</span> 
</a> 

De cette façon, les images sont un sous l'autre, mais comme je l'ai dit je dois les faire flotter sans casser tout le reste.

Answer 1

Vous voudrez faire flotter l'extérieur entier <span> ou le <a>. Ma conjecture est que vous essayez actuellement de flotter le <img> spécifiquement, ce qui provoque les éléments à se retrouver dans des positions inattendues. Si cette hypothèse est incorrecte, vous pouvez mettre à jour avec plus de détails.