How to centre page

HTML & CSS
1

I would like to centre my web page at the moment it’s aligned to the left and I would prefer it to be in the middle.
Can anybody help me?

The page is at Photo Renovate - Professional Photo Restoration and Retouching Services

thank you

2

I’m afraid to say you’ve gone about this layout “all wrong” (to put it rather ungrammatically :smiley: ).

Using position: absolute to lay out page elements is a bad idea, as it’s very inflexible and hard to work with. Anyhow, as a quick fix, you could try this:

  1. Wrap a div around everything on the page, like so:
<body>
[COLOR="Red"]<div id="wrapper">[/COLOR]
 all other content here
[COLOR="Red"]</div>[/COLOR]
</body>
  1. Then in your style sheet, put this:
#wrapper {
  width: 960px;
  margin: 0 auto;
  position: relative;
}

It may need a little tweaking, but that’s the normal method for centering a web page. You put everything in a container div, give it a width, and set its left and right margins to “auto”, which centers it.

3

thank you, as you can see I’m much better at restoring photos than webpage designing. :slight_smile: This was a template and I’ve been fiddling with it and probably messing it up. I was going to do a whole new page but I simply don’t have the time to spend learning the right way to do it.
So thank you again, I appreciate the help.

4

No worries, I understand. Have a go at that method I showed above, as it should center the page. If you have any problems, just post back. :slight_smile:

Indeed! That’s nice-looking work. :slight_smile:

5

Should I change every thing that says absolute to relative?

6

No, to start with, just try adding the code I gave with no other changes and see what happens. Because the wrapper has position:relative, hopefully the other elements will all be positioned in relation to that rather than to the viewport. If any problems arise, we can address them as they come up.

7

OK, did all that then had a few brain waves and made a few other changes to the site. I think it looks better but I have a couple of things I would like to change I would like the links in the left column to be a bit closer togeather and when they fly out ie slidshows the background could be a bit wider. I would laso like to put some think below the navigation menu in the left colum but every time I try it doesn’t work. I still have the other version, I could always go back to.

let me know what you think and how to I fix those little things?

the new page is at
No3

Thank you

8

fixed the flyout part.

9

I have managed to fix most of the problems with the page with a lot of trial and error.

10

your link is 404

11

Thanks, I don’t know why it was 404 but I have fixed the problems I was saking about now Im moving on to the new problem of how to make the text area expand and contact with the amoutn of text. Any suggestions welcome.

12

Is the no3 link the current version? It’s quite broken. The content part is inside the menu part (probably because of an unclosed div) so the HTML needs some tidying.

13

thanks for you help
the current one is no8
I’m trying to learn how to position things with out using non breaking spaces but struggling at the moment. Sometimes I feel like giving up.

14

OK, well that page is broken to pieces. This stuff isn’t really too hard, but you need to understand how HTML works. There are elements within elements there that make no sense, so possibly there are just some typos there, as I doubt that’s what you intended.

One thing that can help is to run the page through the Validator. However, if you want to do more of this work, it’s worth putting aside some time (say with an HTML/CSS book) to make sure you understand the basics. You will find it easy to proceed after that. :slight_smile:

15

I was trying to do things the easy way by adapting an old page, I’m thinking I might go back to square one and redo the page from the beginning instead of trying to patch up something that somebody else did a few years ago. If I start from the beginning I might have a better understanding of what is going on

Thank you for your help I may need to ask for help along the way if I get stuck.

16

Starting from the ground up sounds better to me, so good choice.

Please do! That’s what we’re here for. Good luck! :slight_smile:

PS:
Make sure to test the site in as many browsers as possible as you go, testing each element as you build, if need be. Then if you hit a snag, you can ask a question at that point, which is much more effective.