Absolute positioning and screen resolution.

A simple answer needed !

[Malkie_Babe]

I have nothing on my page except a heading that is centered using absolute positioning (because I'm going to add a layer.) which, when I switch to a different screen resolution is no longer centered. Apart from creating a separate style sheet is there a simple answer?

[tedster]

Welcome to the forums, Malkie_Babe.

Unfortunately, centering is one of the areas where CSS doesn't have simple answers. But definitely don't center using a pixel value -- as you've discovered, that value will be inaccurate the minute a window's width is different from the window you designed on.

Still using absolute position, here's one approach to centering. The center of the screen is always at left:50%. If you position your element at left:50% it will BEGIN at the center. So, as a next step, you need to know the width of that centered element. By knowing the width, you can use a negative margin-left to move beginning of the element to the left by a distance of half that width -- and then the whole element will be exactly in the center.

So, for example, if you are using an H1 for your header, you put a container div around the H1 so you are sure of its width -- and then use text-align center for the containner div's content.

CSS

#container {
text-align:center;
position:absolute;
left:50%;
width:700px;
margin-left:-350px;
}

HTML

<div id="container"><h1>This Is a Centered Headline</h1></div>

[Malkie_Babe]

Thankyou for your advice. It worked perfectly. As an absolute beginner I don't understand why and I was a little concerned of what would happen when I added a layer. I wished to create a heading that would appear to be shadowed so, making an uneducated guess, I altered the ngative margin setting and achieved the desired result! Thankyou again.