Centre page

[Aq01]

How do i centre this page? i've trying using a table and changeing the left position of the divs to 0 and it wont work.

page

[teedoff]

wrap everything starting INSIDE the body tag with a new div...call is wrapper or container. Then in your stylesheet, set this div with an auto margin rule.

#wrapper{margin: auto;}

[Excavator]

Hello Aq01,
This is one of the problems you run into when using so much absolute positioning. AP is not really needed to accomplish this layout and it's unfortunate that DreamWeaver steers so many new authors toward using it.
Have a quick look at The Pitfalls of AP

Since you've come this far, there is a sort of fix for you instead of a total re-write. teedoff has you started in the right direction but there is more you will need to do to accomodate all your ap elements.

To center an element you need three things:

1. a valid DocType
2. an element with a width
3. that elements left/right margins set to auto

Make a div that encloses all the elements you want centered.
Make sure that div has a width and that is is wide enough to contain the elements that are inside it. Remember that margins and padding are included when figuring total widths.
Set your new divs left and right margins to auto.
Very important! Since you're using so much ap, you will need to make your new div position relative so your ap elements don't position themselves relative to the body of your document like they are now. You will probably have to adjust the positioning on all of them so they are positioned in their new container correctly.


Hope that all made sense... I can do a quick mock-up for you to follow if it didn't.

[Major Payne]

Additionally...

Centering:

Centering anything requires setting a width less than 100% for the container. Example:

body {
width: 950px;
height: 600px;
margin: 0 auto;
background: #fff url(path to non-tiled image) no-repeat center scroll;
}

Change parameters as you need. Set "#fff" to background color you want. Set "scroll" to "fixed" if you want page contents to scroll over background image. CSS was given for an image that does not tile.

Doesn't have to be the body tag, but you should get the idea.

[Aq01]

thanks alot guys, sorted it, Really appreciate it

[Chris Hick]

Aq01, don't forget to read my signature.

[Excavator]

Originally Posted by Aq01

thanks alot guys, sorted it, Really appreciate it

Not quite there yet. Try putting a background color on your #wrapper so you can see what it's doing and you'll notice the contents are more than 600px high. It only works because of your absolute positioning.

You also have content in #wrapper that is wider than 950px.
Narrow up your browser window and you'll see it's not really centered the way it is now. Looks like 978px is closer to the actual width needed.

[Aq01]

Excavator, cheers for the advice. I didnt really notice that. Problem is i have about 60 pages which i have done the same style to. I mainly wanted it to not overstretch (1024x768) and have it centred, which everyone who posted's kind advice gave me simple steps to do it. Is there any problem if i leave it as i say updating 60 pages is quite a faff. It doesnt seem too bad and i think i can get anyway with it. Will it pose any problems?

@Chris Hick Sorry i didnt know, im new here. Will do it, how do i do it?

[Excavator]

Originally Posted by Aq01

Excavator, cheers for the advice. I didnt really notice that. Problem is i have about 60 pages which i have done the same style to. I mainly wanted it to not overstretch (1024x768) and have it centred, which everyone who posted's kind advice gave me simple steps to do it. Is there any problem if i leave it as i say updating 60 pages is quite a faff. It doesnt seem too bad and i think i can get anyway with it. Will it pose any problems?

@Chris Hick Sorry i didnt know, im new here. Will do it, how do i do it?

But that's the beauty of using a linked CSS file!
Change the width of #wrapper in your CSS and all pages linked to that CSS file with <div id="wrapper">'s are changed.

I doubt it's going to cause any trouble anyway, we use ap to place an element outside it's container all the time.

[Chris Hick]

Just go up to your opening post and click edit. Then, in your editing box click go advanced. You will then be given the option before your title to put Solved. ^_^