0

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 would like to be able to insert the date inside the image with html code!

any pointers??

Ray
  • 429
  • 6
  • 16

3 Answers3

1

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>
sap
  • 1,141
  • 6
  • 41
  • 62
1

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.

DaedalusFall
  • 8,335
  • 6
  • 30
  • 43
0

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.

webLacky3rdClass
  • 659
  • 10
  • 27
  • looking for relative absolute positioning! IE was giving me all kinds of problems with abs positioning. – Ray Jul 22 '11 at 17:33
  • I think that IE is picky with block level on positioning you may need to make all of the main elements block and float them in contaners that go right and left – webLacky3rdClass Jul 22 '11 at 17:44