I'm making a site where I have three <li> all floated to the left and they each have a background of a certain image. I have text in each of the <li> and I want to move that text so that it is displayed under the background instead of on it. What would the css for this sort of layout be?
Below I have an example of what I would like the layout to be. Thanks for the help.
====== ====== ======
| | | | | |
| | | | | |
====== ====== ======
text text text
I have no ASCII art skills but hopefully you get the idea.
Set the text in a span with a margin-top equal to the height of the background image. The span will need to be display: block for this to work. Or, better yet, just set padding-top equal to the height of the background image, with background-image-repeat: no-repeat.
See http://jsfiddle.net/77NdE/ for a working example.