This seems like it should be simple, but I haven't figured it out.
I've got a page which has a background image and several pieces of information that must be positioned at precise places relative to the image.
At present this is done by placing each piece of information in a <div> block with a different ID. Each ID is defined with "position: absolute" and appropriate "left" and "top" values.
This works well, except that the image needs to be centered, and when I do that the pieces of text don't move. Furthermore, no adjustment to the "left" and "top" values will work because the background image moves when the window is resized, and the text does not.
I want to put the text in a one-cell table, apply the background image to the cell, and set the text positions relative to the cell. Then the table can float anywhere it wants to, and all of the text should move with it.
But I can't figure out a way to make that happen. The description of the "position" property appears to say that it positions an element relative to the most local containing element that is positioned. That's self-defeating -- if I position a containing element (e.g., the table) I can't center it, and if I don't, I can't position the text. I've tried many combinations of "position" settings on the table and the text, without results.
if I position a containing element (e.g., the table) I can't center it
If the containing element has a fixed width: Yes, you can! Try this:
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Demo</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><style type="text/css">
td {
width: 100px;
height: 100px;
border: 1px solid black;
vertical-align: center;
text-align: center;
}
#table-1 {
position: relative;
margin: auto;
}
#table-2 {
position: absolute;
left: 50%;
margin-left: -50px; /* half its width, in this case the cell width */
}
</style></head><body><table id="table-1" summary=""><tr><td>Test</td></tr></table><table id="table-2" summary=""><tr><td>Test</td></tr></table></body></html>
The centering may need a bit of fine-tuning, as you can see if you have the code rendered. But all elements inside the cell can be positioned relative to it, with position:absolute. That is always relative to the containing element if that element has position.
it positions text relative to the page, not the cell
I don't understand how you can say that. It is clear that the divs position themselves relative to the table (cell), not to the page. Just give the table cell and divs a background color, convert inches to pixels (1in ~ 100px), and see for yourself. If the divs would be positioned relative to the page with this code, they would be at some 50px from the browser's left border. In reality, they are at some 50px from the tables left border.
Then I tried the same thing in IE 8, the text appeared in the box, in a fixed position relative to the box.
So it appears that your code does work, but not in all browsers.
By the way, I bit the bullet and redid the page without using absolute positions, so this is no longer an urgent problem. I'd still like to resolve it for future reference, though.
Wow! Now I do understand how you can say that. That's amazing! Especially because I tested it in IE 6, 7 and 8 and FF 4, and all rendered the divs inside the table! You've discovered something very important! Could you check how matters render in FF 3.5? That can be easily done through http://spoon.net/browsers/.
Remove the display:block and see that FF will only position the blue square inside the big yellow for the div-in-div, not the div-in-table. (You had me scared there, because I am using the relative-absolute positioning frequently nowadays, and I thought that it was a FF glitch in the older versions, which are still used quite a lot....)
Yes, that does it. Thanks for helping me solve this problem.
I tried my code in spoon.net (a good resource, by the way, and thank you for suggesting it). It works in FF3.5 the same way it works in FF3.0.
I experimented with the display property, but I didn't hit on the display:block value. I'm again amazed by how convoluted HTML and CSS are, and how tricky the various combinations of techniques and browsers can be.
Reply With Quote
Try this: 
Bookmarks