How do I center the whole page?

Discussion in 'Web Design and Development' started by jive, Mar 24, 2007.

  1. jive macrumors 6502a

    Joined:
    Apr 14, 2006
    Location:
    Scotland
    #1
    How do I center the whole page? Through some googling it's been suggested that I should cover the whole page in one table and then center that... But err, it didn't seem to work (or I was doing it all wrong)...


    http://www.dougallan.com/mock.html


    Cheers for any help :]


    Make it as basic as possible please - I'm useless as coding - it's all been made using Dreamweaver so far...
     
  2. pengu macrumors 6502a

    Joined:
    Mar 20, 2005
    Location:
    Diddily Daddily...
    #2
    wrap the whole content (ie everything inside the <body>) in a <div> with either an ID or a class that you havent used.
    then give that ID or class left and right margins of "auto", and a width of whatever u want.
    then (to fix it for MSIE) give the <body> a text-align style of center.

    example:

    HTML:
    css:
    body
    {
    text-align: center;
    margin: 0;
    padding: 0;
    }
    
    div#contentBox
    {
    margin: 0 auto 0 auto;
    width: 800px;
    }
    
    <body>
    <div id="contentBox">
    <ul><li>Nav item 1</li></ul>
    <div class="content">Moo hello there!</div>
    </div>
    </body>

    oh. and take all the absolute positioning out of your css, OR make the centered box position: relative;
     
  3. epochblue macrumors 68000

    epochblue

    Joined:
    Aug 12, 2005
    Location:
    Nashville, TN
    #3
    What you looked up is the best way to do it. Wrap the entire page (everything inside <body></body>) inside a div, and give that div an id (for example, "container").

    Then, you'll add some CSS to center the div.

    Code:
    HTML:
    <body>
      <div id="container">
         ...rest of page here...
      </div>
    </body>

    Code:
    CSS:
    body {
      text-align: center; /* for ie6- */
    }
    
    div#container {
      text-align: left; /* fix alignment for ie */
      margin: 0 auto;
      width: 500px; /* if you want the width to be fixed, set to whatever you want */
    }
    Edit: pengu kinda beat me to it :)
     
  4. pengu macrumors 6502a

    Joined:
    Mar 20, 2005
    Location:
    Diddily Daddily...
  5. j26 macrumors 65832

    j26

    Joined:
    Mar 30, 2005
    Location:
    Paddyland
    #5
    It's years since I did any coding, but looking at the source, your layers in the style are set for absolute positons.

    If the whole thing is wrapped in table tags an centred, then changing it to relative and playing about with the positions should do it.
     
  6. pengu macrumors 6502a

    Joined:
    Mar 20, 2005
    Location:
    Diddily Daddily...
    #6
    :eek:
    gahhh!

    tables are NOT for layout. they are for (suprise suprise) TABULAR data.


    oh yeah. epochblue is right. you should set the text-align of the centered div to either left or justified.
     
  7. j26 macrumors 65832

    j26

    Joined:
    Mar 30, 2005
    Location:
    Paddyland
    #7
    I said it was years :D
     
  8. jive thread starter macrumors 6502a

    Joined:
    Apr 14, 2006
    Location:
    Scotland
    #8
    What do I replace the absolute positioning with? Of do I just get rid of it all together?
     
  9. pengu macrumors 6502a

    Joined:
    Mar 20, 2005
    Location:
    Diddily Daddily...
    #9
    either take it out (it will revert to the default, "static") OR set the new DIV to position: relative (and leave the absolute positioning in), if you need to use absolute positions for the content within.
     
  10. jive thread starter macrumors 6502a

    Joined:
    Apr 14, 2006
    Location:
    Scotland
  11. emorydunn macrumors 6502

    emorydunn

    Joined:
    Jun 5, 2006
    Location:
    Austin Texas
    #11
    If you don't want to use CSS use the <center> HTML tag, so it would look like this:

    <body>
    <center>
    The content of the page
    </center>
    </body>
     
  12. zimv20 macrumors 601

    zimv20

    Joined:
    Jul 18, 2002
    Location:
    toronto
    #12
    <center> has been deprecated. i believe its non-CSS replacement is:
    Code:
    <div align="center">
    </div>
    
     
  13. pengu macrumors 6502a

    Joined:
    Mar 20, 2005
    Location:
    Diddily Daddily...
    #13
    not only is <center> deprecated, the align="" attribute of <div> is deprecated, AND they are both intended to align the TEXT CONTENT of the object, not the object itself.

    why the hell are people so scared of css. it makes life EASIER.

    here are some tips (i am a professional web developer btw)
    step 1. quit dreamweaver.
    step 2. move Dreamweaver.app to Trash.
    step 3. Download one of many great editors: TextMate, skEdit, Komodo, SubethaEdit, etc.
    step 4. check out http://www.w3.org and http://www.w3schools.com, and learn xhtml and css.
    step 5.
    step 6. Profit!
     
  14. epochblue macrumors 68000

    epochblue

    Joined:
    Aug 12, 2005
    Location:
    Nashville, TN
    #14
    Yes, it makes life easier for those people who understand it, and a lot of people have a difficult time with CSS at first.

    And, yes, align="center" is deprecated in XHTML, but if the OP is using an HTML or maybe even an XHTML Transitional DOCTYPE, then align="center" should be just fine.
     
  15. zimv20 macrumors 601

    zimv20

    Joined:
    Jul 18, 2002
    Location:
    toronto
    #15
    ah, did not know that.

    for the record, i love css.
     
  16. pengu macrumors 6502a

    Joined:
    Mar 20, 2005
    Location:
    Diddily Daddily...
    #16
    actually both (the tag and the attribute) were deprecated in html 4.01
     
  17. epochblue macrumors 68000

    epochblue

    Joined:
    Aug 12, 2005
    Location:
    Nashville, TN
    #17
    Huh...so it was :) I haven't used it for so long, I just assumed it was still kosher in 4.01. Oops, color me embarrassed. :eek:
     
  18. Nicolasdec macrumors 65816

    Nicolasdec

    Joined:
    Dec 7, 2006
    Location:
    São Paulo
  19. edjay macrumors newbie

    edjay

    Joined:
    Apr 27, 2008
    Location:
    North Wales
    #19
    Centralizing web-page

    I typed "how to centre whole page" into the Googlebox, and this is where I ended up. So I thought I would join and say thanks for making my first attempt at making a site actually look a bit like a site now. This is how I etched it into my text-editor:

    <div id="centrepin">
    <body> :):p:D:apple::rolleyes: </body>
    </div>

    css:body {
    text-align: center;
    margin: 0;
    padding: 0; }

    #centrepin {
    margin: 0 auto 0 auto;
    width: 920px; }

    ........and not an Apple in sight unfortunately. However, I have a good friend in Northumberland who is teetering on the edge of The Orchard, so I will pass on a link to your site with compliments. Thanks for the code.

    All the best! :)
     

Share This Page