Positioning content over background image...

[nickbarresi]

I can't find anything with CSS to get my content box centered on my background image...do I need to revert to using slices and tables for this?

I have a big background image, about 600x700 pixels, with a window in it (centered on page). I need to have text inside the window....centered and all.

Thanks:)

[MrDoubtFire]

What is this content box? Well actually I don't suppose it matters, here's the css:

div.content {
width:500px;
height:550px;
margin-left:auto;
margin-right:auto;
}

MRDoubtFire

[nickbarresi]

Thanks for the code, I'll give that a try:)

The content is going to be all content on my site, including forms, embedded text boxes, and possibly a table.

I'd have no problems if I stuck with tables, but very interested in CSS and giving it a shot.

[nickbarresi]

Ok now I got the content centered Horizontally right where I want it, but how do I center it vertically? :)

Thanks

[MrDoubtFire]

Hey Nick,

Although I haven't done this myself, it should work:

div {
margin-top: auto;
margin-bottom: auto;
}

Add those options to the css you already have defined should do it. You might want to write it out shorthand too, which should cover all of the right/left/top/bottom in one:

div {
margin: auto;
}


MrDoubtFire

[nickbarresi]

Nope didn't work:( Also, the code I added before doesn't work in Netscape, only in IE, maybe I'll need to use good 'ol tables for this one

Thanks for the help!

[nickbarresi]

To illustrate what I'm trying to do, please go here:

http://freecustom.mav.net/test.html

Thanks again everyone:)

[MrDoubtFire]

Ok try this, assuming your "content" is contained within a <div> and/or <table>:

In your css:

div.centered {text-align: center;}
div.centered table {margin: 0 auto; text-align: left;}

Then in your html:

<div class="centered">
<table>
...
</table>
</div>

See if that works,

MrDoubtFire