Stylesheets - Center page / absolute positioning

Author

Center page / absolute positioning

Thomas Elser

2004-02-26, 2:32 pm

Hi,

I made a site using CSS absolute positioning for all my
content on the page. Now I try to figure out if it is possible
to center the pages without giving up the absolute positioning.

Can somebody please enlighten me if that's possible and if
not what would be the quickest way to accomplish that?

Thanks in advance for your help

Best regards

Thomas

Els

2004-02-26, 2:32 pm

Thomas Elser wrote:

> Hi,
>
> I made a site using CSS absolute positioning for all my
> content on the page. Now I try to figure out if it is possible
> to center the pages without giving up the absolute positioning.
>
> Can somebody please enlighten me if that's possible and if
> not what would be the quickest way to accomplish that?

By putting the whole lot in a container div, which you give
position:relative;
width: (whatever width it has now);
margin-left:auto;
margin-right:auto;
border:1px solid (color of background);
(this is to prevent the left side of your page slipping off
the screen when the window is narrower than the content in
Gecko browsers)
and give body {text-align:center;}, which I think (but am
not sure) you need for some browsers.
You can give then text-align:left if needed, to the
container div.

Hope I didn't forget any details... :)

--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Thomas Elser

2004-02-26, 2:32 pm

Hi Els,

thanks for your quick answer. Unfortunatelly it is not working.

> border:1px solid (color of background);

I changed this to black to see where "he" puts the <div>.
But all I can see is a black line on top of my content ..

I made a <div> with all the CSS you mentioned directly after
the body tag and closed it immediately before the </body>.

Any ideas what I am doing wrong?

Thanks again for your help

Best regards

Thomas

Els

2004-02-26, 3:31 pm

Thomas Elser wrote:

> Hi Els,
>
> thanks for your quick answer. Unfortunatelly it is not working.

Sorry, my fault, see below.

>
> I changed this to black to see where "he" puts the <div>.
> But all I can see is a black line on top of my content ..
>
> I made a <div> with all the CSS you mentioned directly after
> the body tag and closed it immediately before the </body>.
>
> Any ideas what I am doing wrong?

You're not doing anything wrong, it's just that a div
doesn't 'hold' the content inside without you telling it how
high the content is, or else, by adding a clearing element
before the end of the div.
If you add
<div style="clear:both"></div>
just before the closing tag of the container div, it should
then, iirc, stretch to surround the content.

--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Karl Smith

2004-02-26, 9:31 pm

Els <els.aNOSPAM@tiscali.nl> wrote:

> Thomas Elser wrote:
>
>
> You're not doing anything wrong, it's just that a div
> doesn't 'hold' the content inside without you telling it how
> high the content is, or else, by adding a clearing element
> before the end of the div.
> If you add
> <div style="clear:both"></div>
> just before the closing tag of the container div, it should
> then, iirc, stretch to surround the content.

Ahem? The OP has removed all his content by using absolute
positioning, he said, not by using floats.

Els

2004-02-26, 9:31 pm

Karl Smith wrote:

> Els <els.aNOSPAM@tiscali.nl> wrote:
>
>
>
> Ahem? The OP has removed all his content by using absolute
> positioning, he said, not by using floats.

True...
I use it with floats all the time and was wondering if it
might work here too -> wasn't thinking straight :-(
So he'll have to define the height of that div then...
Sorry for the confusion.

--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Thomas Elser

2004-02-27, 5:28 am

Hi Els,

<div style="clear:both"></div>

that didn't work, but manually adding the height to the
<div> made tit work THANK YOU!

Another question: I made the content of my page so that it would
fit in a browser windows at 1024x768 without showing scrollbars.

Now, with the solution you kindly gave me, scrollbars appear.
I tried to set the margin from auto to absolute values to reduce
the margin, but it is still there. Can I tell the surrounding <div>
to reduce the margins to zero if not needed?

Thanks again for your help

Best regards

Thomas

Els

2004-02-27, 6:29 am

Thomas Elser wrote:

> Hi Els,
>
> <div style="clear:both"></div>
>
> that didn't work,

which I could have foreseen if I'd paid more attention, see
my post in reply to Karl's.

> but manually adding the height to the
> <div> made tit work THANK YOU!
>
> Another question: I made the content of my page so that it would
> fit in a browser windows at 1024x768 without showing scrollbars.
>
> Now, with the solution you kindly gave me, scrollbars appear.
> I tried to set the margin from auto to absolute values to reduce
> the margin, but it is still there. Can I tell the surrounding <div>
> to reduce the margins to zero if not needed?

With margin:auto, they _are_ reduced to zero when not needed.
The horizontal scrollbar may come from anything wider than
the inside of the window, but without the url, I can't even
start to guess what that might be.

On the other hand, let me start to guess anyway:
If it used to fit pixelperfect, it might have to do with the
1px border you have now around your page. In that case,
making your containing div 2px narrower should work.

If it's not that, it might have to do with having positioned
everything absolutely. By that, you take the elements out of
their normal flow. But this is not always recognized by the
scrollbars so to say. If you position an element let's say
top:-200px or left:-200px, and it is smaller than 200px high
or wide, it will be off your screen in most browsers,
without showing scrollbars to get there. This may have
prevented you from having scrollbars earlier on, maybe?

And about pixelperfect: I did that once, and it fitted
exactly in a Netscape or IE browser. Until I viewed it on
someone else's computer which had XP. 3 pixels off.
In Mac browsers, it's probably more pixels off, as there is
a sort of sidebar (from which I've seen through browsercam.com).

--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -