Well, I figured that I would post this here. Even though its a mix of CSS, DIV, and tables. But I really need this fixed. I got the image centered fine. Its just the fact of getting the text in the white spots just right.

Can anyone help? I'd really apperciate it.

<center><table border="0"
cellpadding="0"
cellspacing="0"
width="720px"
height="580px"> <TR><TD>

<center><img style="position:center; top:300px; left:20px; " src="http://img.photobucket.com/albums/v502/OutWhim/photos/Horseland/mds2_splicing.png"></center>
<font color=black>


<div style="position:absolute; left:60px; top:370px; width:150px; height:145px;
background-color:transparent; overflow:auto"><center><b>

[TEXT TEXT TEXT <BR>
TEXT TEXT TEXT <BR>
TEXT TEXT TEXT <BR>]

</center></b>
</div>

<div style="position:absolute; left:100px; top:100px; width:384px; height:92px;
background-color:transparent; overflow:auto"><center> <b>


[TEXT TEXT TEXT <BR>
TEXT TEXT TEXT <BR>
TEXT TEXT TEXT <BR>]

</center> </b>
</div>
</tr> </td> </table></center>

Anyone? I really need help with this...

It would be easier to help if you described what, exactly, the problem is. What's the problem with the text?

It would be easier to help if you described what, exactly, the problem is. What's the problem with the text?

On the image I need the text positioned on the white spots of the image. There's a circle and a rectangle. That all that I am having problems with. If I can get the positioning right, I'd be good to go.

Any idea on how to get the text where it needs to be on the white parts? The circle is the top lefthand corner (I'm lefthanded, so it would be your right I think...) and the rectangle is in the bottom righthand corner (your left...).

One note: if you have a visual problem with your site, it's helpful to post a link to the site so we can actually see what's happening. It saves us from having to piece together your code in order to see the problem and results in you getting answers more quickly.

Another note: abandon use of the center element as its use has been deprecated since even HTML 4.01, and as you've found out, it only makes positioning awkward and unreliable. Furthermore, position:center, does not exist. There are only four values for the position property: static, relative, absolute, and fixed; and they determine how the positioning of an element relates to the document, not its actual position. I've composed some notes on centering (http://www.lissaexplains.com/forum/showthread.php?t=59782), if you're interested.

You should get rid of the table in your HTML, entirely. Since your layout is based on the concept of positioning elements over a backdrop, and since you have no tabular data of which to speak, its presence serves no purpose. Ideally, tables shouldn't be used solely for layout purposes. HTML should always be used to describe the content of your website, never style it. Tables are used to show relationships between groups of content.

Also, since your image is meant to be a background image, you should implement it as a background image, not as a piece of content on the page. There is one problem with this, however, in that part of your image does contain some content: the heading, "miami dade stables", which, as a background image would not be visible to search engines, or any other user agent that cannot display images (or any user who cannot see them). The same is true of how you've displayed it in your source: without alt text. What would probably be best would be to divide the image into two parts: one with the heading and one with the background. Then you could display the heading as an image with alt text in a heading element and set the other part as a background image.

You have the right idea in using absolute positioning, but the wrong implementation. Because you're trying to control the exact position of your blocks of text on your page, absolute positioning is your best bet. However, you're trying to position them as a set number of pixels from one edge of the screen while the "background" image is centered and free to move on the page. This allows the image to shift beneath the text when the window is resized.

You're perhaps best off in centering one element with absolute positioning, containing the heading in that element, and assigning it the background image, then you could absolutely position your text sections within that div. Your HTML could be as minimal as this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>miami dade stables</title>
<meta http-equiv="Content-type" content="application/xhtml+xml;charset=UTF-8" />
</head>


<body>

<div id="main">
<h1><img src="mds.jpg" width="720" height="75" alt="miami dad stables" /></h1>

<div id="text_area_1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus vestibulum augue.</p>
</div>

<div id="text_area_2">
<p>Fusce tempus. ``` sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum.</p>
</div>
</div>

</body>
</html>

Some CSS would be required to control the positioning, dimensions, etc. of everything, of course. The background image of div#main would also need to be specified by CSS.

Judging by your code, however, you may want to devote some more time to better understanding HTML and CSS.