Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10

Thread: Centre page

  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Centre page

    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

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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;}

  • Users who have thanked teedoff for this post:

    Aq01 (11-11-2010)

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    831
    Thanks
    10
    Thanked 79 Times in 77 Posts
    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.
    ☠ ☠RON☠ ☠

  • Users who have thanked Major Payne for this post:

    Aq01 (11-11-2010)

  • #5
    New Coder
    Join Date
    Nov 2010
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts
    thanks alot guys, sorted it, Really appreciate it

  • #6
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts
    Aq01, don't forget to read my signature.
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Aq01 View Post
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Aq01 (11-11-2010)

  • #8
    New Coder
    Join Date
    Nov 2010
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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?
    Last edited by Aq01; 11-11-2010 at 10:47 PM.

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Aq01 View Post
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts
    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. ^_^
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •