Text over floated images

Posted by Barbara on Stack Overflow See other posts from Stack Overflow or by Barbara
Published on 2010-04-05T15:05:00Z Indexed on 2010/04/05 15:23 UTC
Read the original article Hit count: 318

Filed under:
|
|
|

I need to put some text over a series of images in a gallery. I found many tutorials about the text part however the images need to be floated. Whenever I add float:left though the trick no longer works. My code (css inline for sack of brevity):

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

This way the images are one under another but like I said I need to float them without breaking everything else.

© Stack Overflow or respective owner

Related posts about html

Related posts about float