centreing a whole page with layers

Gerry · #1 Aug 31st, 2007, 23:28

Hi gang,
I know I should know this, but this late at night it's got me on a go slow.
I've built a page in dreamweaver with layers (divs) and now I want the whole page to centre in the browser, but it wont do it.

I have hand coded another div in the code

Code: Select all

 
<body>
<div class="container" id="container">
 
whole page content here
 
</div>
</body>

then, with css, styled the container as follows

Code: Select all

 
.container {
 text-align: center;
 margin: 0 auto;
 padding: 0px;
}

I have layers/divs within the main body that have absolute positions, but didn't think that would be a problem as they are all within the container....could it be they are positioning themselves absolutely to the top and left even though the containing div is centred as a whole?

any suggestion would be very welcomed
much appreciated

(I'd rather not turn it into tables and cells, and it needs to work as a template with regions added to numerous pages, as it will be edited via contribute eventually)

alexgeek · #2 Sep 1st, 2007, 00:19

this is css not html

why do you have a class and id defined for container
you only need one

pa007 · #3 Sep 1st, 2007, 00:50

I don't think this will work if it's absolutely positioned. Absolute positioning (like all other positioning) takes the elements it is applied to out of the flow of the document. The thing is with absolute positioning is that it is just that, absolute. It won't move anywhere, that's the point.

Pete.

hschmitz · #4 Sep 1st, 2007, 13:14

To make the layer centred on the page you need to put the text-align: center in the CSS of the body.

Quote:

Originally Posted by Gerry

I have layers/divs within the main body that have absolute positions, but didn't think that would be a problem as they are all within the container....could it be they are positioning themselves absolutely to the top and left even though the containing div is centred as a whole?

If you want those layers to be absolute but relative to the container, you need to specify position:relative in the container. So the whole thing should look like this

Code: Select all

 
body {
  text-align: center;
}

.container {
 position: relative;
 margin: 0 auto;
 padding: 0px;
}

Hardbyte · #5 Sep 4th, 2007, 11:17

Dont need to text align anything centered!

You would need 2 wrappers. One being width:100%; and the other inside this being the width of the site and margin 0 auto (width:600px; margin:0 auto

moojoo · #6 Sep 4th, 2007, 15:25

You can't center an object if it has no width. Add a width and margin:0 auto; will work. And you certainly don't need to contain the div in another 100% wrapper. All you need is the container and then put everything in that.

The only reason you would need text-align:center; on the body is for IE 5.x as it won't read margin:0 auto;

IE 5.x compatible.

Code: Select all

body {
text-align:center;
}

.container {
text-align:left;
width:770px;
margin:0 auto;
}

Correcting your existing code.

Code: Select all

.container {width:770px;text-align: center;margin: 0 auto;padding: 0px;}

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Real problem centreing images in Firefox/Safari...	JamesHatter	Web Page Design	2	Apr 10th, 2008 15:14
How to create a centered page with layers.	sgbrix	Web Page Design	7	Mar 11th, 2008 15:36
Layers that go the entire Height of the page.	briandina	Web Page Design	0	Dec 31st, 2006 21:01
Need help with layers	davidsnave	Web Page Design	0	Aug 29th, 2005 23:26
Centering layers in a page	gwx03	Web Page Design	9	Nov 26th, 2003 19:55

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
centreing a whole page with layers