Centering 800x600 page in higher res screens.

Howard Martin

I have a page at http://www.no1hastings.com.au/new/index.html designed
for 800 x 600 resolution and where nearly all the elements are
positioned using CSS. The elements are lined up to the left margin
but the client wants the page to appear in the middle of the screen at
higher resolutions but maintaining the fixed 800px width..

I've gone through the HTML Utopia : Designing Without Tables book and
there seems to be no clue there on how to do it. Has anybody tried to
achieve this and succeeded?

TIA.

Howard

Jul 21 '05 #1

Els

Howard Martin wrote:
[color=blue]
> I have a page at
> http://www.no1hastings.com.au/new/index.html designed for
> 800 x 600 resolution and where nearly all the elements are
> positioned using CSS. The elements are lined up to the left
> margin but the client wants the page to appear in the
> middle of the screen at higher resolutions but maintaining
> the fixed 800px width..
>
> I've gone through the HTML Utopia : Designing Without
> Tables book and there seems to be no clue there on how to
> do it. Has anybody tried to achieve this and succeeded?[/color]

Wrap the entire page in a div (with position:relative because
you used absolute positioning), and center it like this:
http://locusmeus.com/html-css/centeringpage.html

But have another little test on your page: open it in Netscape,
Mozilla or Firefox, and press ctrl and + a couple of times...

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Jul 21 '05 #2

brucie

In comp.infosystems.www.authoring.stylesheets Howard Martin said:
[color=blue]
> I have a page at http://www.no1hastings.com.au/new/index.html designed
> for 800 x 600 resolution a[/color]

http://allmyfaqs.com/faq.pl?AnySizeDesign


--


v o i c e s

Jul 21 '05 #3

Faz

"Howard Martin" <css@koalanet.com.au> wrote in message
news:gru6n09cisdji8og07kd73v962lurur4e9@4ax.com...[color=blue]
> I have a page at http://www.no1hastings.com.au/new/index.html designed
> for 800 x 600 resolution and where nearly all the elements are
> positioned using CSS. The elements are lined up to the left margin
> but the client wants the page to appear in the middle of the screen at
> higher resolutions but maintaining the fixed 800px width..
>
> I've gone through the HTML Utopia : Designing Without Tables book and
> there seems to be no clue there on how to do it. Has anybody tried to
> achieve this and succeeded?
>
> TIA.
>
> Howard
>[/color]



#container {
position:relative;
width:???px;
margin-left:auto;
margin-right:auto;
}

Then place your entire page in

<div id="container>
........
[page]

</div>

where ??? is the width of you content. Hope that helps, the auto margins
allow the div to centre the containing elements.

Faz

Jul 21 '05 #4

Howard Martin

On Mon, 18 Oct 2004 08:14:46 GMT, Howard Martin <css@koalanet.com.au>
wrote:
[color=blue]
>
>I've gone through the HTML Utopia : Designing Without Tables book and
>there seems to be no clue there on how to do it. Has anybody tried to
>achieve this and succeeded?
>[/color]
Many thanks to all and especially for the links. Example 3 at
http://locusmeus.com/html-css/centeringpage.html centres the page in
IE6, Opera and Mozilla

Jul 21 '05 #5