help needed overlay text from php onto image

[ronuk99]

hello im ron and this is my website for our online radio at www.vikingradio.net...after 6 months and following this site i am now really stuck with this one. You will see in the center of webpage a picture of our studio . i want to overlay our program schedule dynamically. Already done that part using ajax script kindly given to me. Now heres the html to bring up the image <img src="images/onnow.jpg" the timediv does a refresh to update the users online . My problem is i wish to overlay the text which would show in timediv onto the image . irealise i have two seperate divs which may be one of the problems.

my website is www.vikingradio.net to see the working. Only tested in chrome


<div id="content">
<script type="text/javascript">
refreshdiv_timediv();
</script>
<div id="ad3" style="position: relative;padding-bottom: 12px;"720" height="180"><div name="timediv" id="timediv"></div>
<img src="images/onnow.jpg" width=720 height=180 border="0" ">








</DIV>

[Will Bontrager]

Unfortunately, I am unable to code this for you. I had intended just a quick peek at the forum before getting on with something I need to do.

Perhaps this short how-to will help.

One way to overlay content on top of other content is with CSS position:absolute. Use the top:... and left:... to specify the position, which position the overlaid content the specified number of pixels from where they're measuring form.

Where they're measuring from is the key for accurate positioning. They will measure from the first container (like a div tag) with a CSS positioning style other than position:static. If none such is on the page, they will measure from the body tag.

Unless a person wants to specify position from the body tag, a container with a CSS position other than static needs to be specified. I generally use position:relative.

Here is an example of the concept:

<div style="position:relative;">

   <!-- image of studio -->

   <div style="position:absolute; top:3px; left:15px;">

      <!-- program schedule -->

   </div>

</div>

The top:3px of the position:absolute div positions the top of the div 3 pixels below the top of the position:relative div. And the left:15px positions the left of the position:absolute div 15 pixels from the left of the position:relative div.

For the position:absolute, bottom:... and right:... may be used instead of top:... and left:... if those would work better for you.

Hopefully, you can use the above to develop the code you need. Maybe others will find the concept helpful, also.

Will