How can i center my whole webpage?

Discussion in 'HTML & Website Design' started by dubs89, May 20, 2007.

  1. #1
    whats the code i can use to center my entire webpage? i dont like it being stuck to the left all the time.

    thankyou
     
    dubs89, May 20, 2007 IP
  2. gopher292

    gopher292 Peon

    Messages:
    64
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    In HTML file:

    (Header section of html document)
    <div class="container">
    (Main site content)
    </div>
    (</body></html>)

    Then in your CSS file:

    body {text-align: center;}
    .container {margin: 0 auto; text-align: left;}

    The margin part is for compliant browsers, the text-align is for IE. (If you use center alignment for everything, change the .container to .container {margin: 0 auto; text-align: center;} )

    That should do it.
     
    gopher292, May 20, 2007 IP
  3. Sepehr

    Sepehr Peon

    Messages:
    568
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #3
    you can also put a <center> after <body> tag and </center> before </body> tag in your html page!
     
    Sepehr, May 20, 2007 IP
  4. dubs89

    dubs89 Peon

    Messages:
    231
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Thankyou very much i will see which way works best for me :)
     
    dubs89, May 20, 2007 IP
  5. dubs89

    dubs89 Peon

    Messages:
    231
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    neither of these seemed to work...

    the <center> command just centerd my text and the other didnt seem to do anything... thanks for the trys got any other ideas lol
     
    dubs89, May 20, 2007 IP
  6. -bank-

    -bank- Well-Known Member

    Messages:
    674
    Likes Received:
    37
    Best Answers:
    0
    Trophy Points:
    120
    #6
    Create a div wrap around your main site, ie: <div id="container">your main website here</div>

    Then in your css, enter

    #id {
    margin-left:auto;
    margin-right:auto;
    width:your websites page width;
    }

    Replace the text for your websites page width with either the percentage size or in pixels, remember if you use pixels write px after the width ie: "72px" rather than "72"

    Hope that Helps
     
    -bank-, May 20, 2007 IP
  7. zinruss

    zinruss Notable Member

    Messages:
    3,288
    Likes Received:
    237
    Best Answers:
    0
    Trophy Points:
    270
  8. dubs89

    dubs89 Peon

    Messages:
    231
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    dubs89, May 20, 2007 IP
  9. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #9
    For some silly reason, you're using absolute positioning (AP) in a manner that is poor practice. AP pages cannot be centered in a robust manner. Without a fixed width, AP elements cannot be centered at all. Plus, you have this: " position: absolute; top: 0; left: 0; " which obviates any attempt at centering.

    There are a number of critical markup errors, including no DTD which sets the browsers to quirks mode, where IE, especially, is more screwy than normal. You even have multiple body tags, a no-no.

    Use the W3 validator to find all your errors, and then correct them. Better yet, start over and mark up the content correctly to begin with. Do not use the inline style attribute. Put all style rulesets within style tags in the head, or put them in a separate file. Do not, as someone suggested, use the center tag. Do not use the font tag. Both have been deprecated since 1999. There is no align attribute, not since 1999, anyway.

    You must nest properly, you can't do <tr><td>...</tr></td>, for one egregious example.

    cheers,

    gary
     
    kk5st, May 20, 2007 IP
  10. dubs89

    dubs89 Peon

    Messages:
    231
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    hey, lol my coding isnt very good i totaly taught myself through veiwing other page sorces and stuff and just using what worked... im going to try my best to make the page more "HTML legit", but what can i use to place my text in the correct places... if not div commands?
     
    dubs89, May 21, 2007 IP
  11. ajsa52

    ajsa52 Well-Known Member

    Messages:
    3,426
    Likes Received:
    125
    Best Answers:
    0
    Trophy Points:
    160
    #11
    ajsa52, May 21, 2007 IP
  12. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #12
    That's both the best and worst way to learn. :) It's good, because you can experience other people's ideas. It's bad, because the vast majority of pages are poorly marked up. As a beginner, you'd have no standards to judge good from bad.

    Try HTMLDog's tutorials. Work through them in order. They provide very good training.

    The <div> is not magical. It is an aggregating element, grouping other elements to provide a styling context.

    Absolute positioning is a method full of gotchas and should be avoided by the neophyte. Learn about using the flow, Luke, and floating elements to get things where you want them to be.

    cheers,

    gary
     
    kk5st, May 21, 2007 IP
  13. dubs89

    dubs89 Peon

    Messages:
    231
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #13
    Yea kinda sucks having to re-learn stuff but thanks for the help and if i run into any errors i will just ask :)
     
    dubs89, May 21, 2007 IP
  14. nikholas

    nikholas Peon

    Messages:
    70
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #14
    <center>
    :)
     
    nikholas, May 22, 2007 IP