Elaine had a very good question about positioning, to wit:
scenario: table with background image in a cell. Background image has an area pre-determined for overlaying text.
question: how to best set in the text so that it appears in the area determined for it?
answer: use absolute positioning within a div that is within a positioned div. Position, in this case, is an attribute and may be defined in a css style.
solution: don't bother with the table, it only confuses the situation, then
- set up a div with a class or id defined with the attribute {position: ppp;} where ppp is relative, absolute, or fixed.
- on this 'containing' div, set
{background-image: [url];}
and set the height and the width of the div to the dimensions of the image
{width: xxx; height: yyy;}. - set a div inside the containing div with the following attributes:
{width: [width of text area];
height: [height of text area];
top: [distance from top of div in pixels]px;
left: [distance from left edge of div in pixels]px;
position: absolute;} - By using a background image, the surface real-estate is still available for the text div to be positioned and populated with the desired text; the image will not push the new div out of the way.
Here's an example file:
If you really want to use a table, go ahead, but you will still need a containing div within the data cell and a positioned div within the containing div.
Don't forget to set position: relative|fixed|absolute (choices) on the containing div; use position: absolute on the positioned div.
Fiddle around with negative numbers of pixels when you do the positioning (from top, from left; could do from right or from bottom; don't do more than 2) dimensions. Talk about working outside the box!
Have fun!
