Page 1 of 1

CSS expert needed

Posted: Sun Dec 04, 2005 2:51 pm
by alex.barylski
Don't know if you need to be an expert or not, but...

Here is my dilema...

I have a table much like:

Code: Select all

<table>
  <td><img src="" /><span style="position: absolute; top: 10px">Some Text</span></td>
  <td></td>
  <td></td>
</table>
the SPAN needs to be positioned over the image, but without using relative, because it causes problems...

How can I do this using CSS or do I have to determine the TOP/LEFT of the TD cell and position my SPAN dynamically using Javascript???

Thanks :)

Posted: Sun Dec 04, 2005 2:56 pm
by neophyte
Have you tried making the image a non repeating background image?

Posted: Sun Dec 04, 2005 2:59 pm
by John Cartwright
e.g.

Code: Select all

background-repeat: none;

Posted: Sun Dec 04, 2005 6:18 pm
by RobertPaul
Setting the image as the background would be ideal, as neophyte mentioned.

But if you can't do that, giving your TD's position:relative should do the trick. Absolutely positioned elements are layed out relative to the first relatively positioned parent above them. In other words, you want:

Code: Select all

<table>
  <td style="position: relative;"><img src="" /><span style="position: absolute; top: 10px">Some Text</span></td>
  <td></td>
  <td></td>
</table>
Of course, if your image has any margins or borders, it's going to throw things off a little.

If that doesn't work, let me know ... there's more than one way to do this but I don't want to confuse things.