css html news list creation little help please

i am using css to create a NewsList like :

<ul class="newslist">
            <li><img alt="" src="images/news-bg.png" />
            <h5>My Title <br />
            <span>Detailed description </span></h5>
            </li>

above is the first element and so far it works great. Its like this:

-------
|I    |  My Title.
|  M  |  Detailed description....
|    G|
-------

I am trying to insert the date inside the pic. the image is just an empty chatbox and i开发者_JAVA技巧 would like to be able to insert the date inside the image with html code!

any pointers??

One way is:

<ul class="newslist">
  <li style="position:relative">
    <img alt="" src="images/news-bg.png" />
    <div style="position:absolute;top=Xpx;left=Ypx">DATE</div>
    <h5>
      My Title <br />
      <span>Detailed description </span>
    </h5>
  </li>
</ul>

Where X and Y are the x and y offset where you want the date.

You can create two divs inside element like following:

<ul class="newslist">
            <li>
            <div style="background-image:src="images/news-bg.png; float:left">date</div>

            <div style="float:right">
            <h5>My Title <br />
            <span>Detailed description </span></h5>
            <div>

            </li>

if you are looking to make the date a part of the image you will need to use server side like imagemagic if you just want it to look like it is the relative/absolute positioning is the way to go.