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