[web] I hate CSS

No, it's my post that doesn't make any sense, thanks for trying to help. :P

I want all of the content to be centered horizontally. Now, in that content:

I want to have an image with a div full of text overlapping it at a specific set of coordinates. I don't want the coordinates to be absolute to the entire page though, I want them to be absolute to the content of the site (which so happens to be centered).

In other words, I want a div with some text to be at (100, 100) relative to the top left corner of the image, and I want both the text and the image to be inside of another div (the content div) which is centered horizontally on the page. If that still doesn't make any sense, just tell me (because it probably doesn't).

Quote:

In other words, I want a div with some text to be at (100, 100) relative to the top left corner of the image, and I want both the text and the image to be inside of another div (the content div) which is centered horizontally on the page. If that still doesn't make any sense, just tell me (because it probably doesn't).

So you need to know how to do 2 things:

1) center a div horizontally on the page
2) put text at 100,100 relative to the top left of an image
3) put #2 inside of #1

Right?

I'm not sure about the exact solution, but I'm sure it has something to do with 'inline display', 'absolute positioning', 'float-ing', and/or 'margins'. Did you check Google?

A solution that comes to mind would be something like:

[edit]nevermind that doesn't work

Also, if you choose to make the image the background of a div which contains the text you might find that (2) will be straightforward.

OK, thanks for your replies everyone!

AP (too bad I can't rate you up): When I do that, the text simply does not move with the containing div.




The "site" div centers fine, but the text is positioned absolute to the page. When I use the image as a background and use relative positioning for div.maintext, it works fine.

++ratings

I would use CSS to make http://*****/top.png a background image of the class "site". From there, I believe you can make class "maintext" have position : relative and life should work out.

Quote:

Original post by Colin Jeanne I would use CSS to make http://*****/top.png a background image of the class "site". From there, I believe you can make class "maintext" have position : relative and life should work out.

Yes, it does work, but I was hoping to avoid that. That's what I'll do though. Thanks for your answers! :)