www.webdeveloper.com
Page 3 of 3 FirstFirst 123
Results 31 to 43 of 43

Thread: How do I centre a webpage?

  1. #31
    Join Date
    Oct 2009
    Location
    urgh! sometimes even he doesn't know :S
    Posts
    12
    Quote Originally Posted by cfajohnson View Post

    For a start, put this inside the HEAD element of your page:

    Code:
    <style type="text/css">
    body
    {
     width: 90&#37;;
     max-width: 37em;
     margin: 0 auto;
    }
    </style>
    Done

    Now it has no background colour.

    Also, I think the previous settings are now showing... i.e. the page is out of whack...

    EDIT: BTW, I did remove the contents of the previous HEAD contents...

  2. #32
    Join Date
    Sep 2009
    Location
    Toronto, Ontario, Canada
    Posts
    163
    Quote Originally Posted by isa View Post
    Done

    Now it has no background colour.

    If you didn't change anything else , that wouldn't remove the background colour.

    If you need it, add one:

    Code:
    background-color: #ffd;
    Chris F.A. Johnson
    http://cfajohnson.com/

  3. #33
    Join Date
    Oct 2009
    Location
    urgh! sometimes even he doesn't know :S
    Posts
    12
    Got it

    Thank you

    So, now how would one remove its 'out of whack'ness?

  4. #34
    Join Date
    Sep 2009
    Location
    Toronto, Ontario, Canada
    Posts
    163
    Quote Originally Posted by isa View Post
    So, now how would one remove its 'out of whack'ness?

    What does "'out of whack'ness" mean?

    Have you tried whacking it back into whack?
    Chris F.A. Johnson
    http://cfajohnson.com/

  5. #35
    Join Date
    Oct 2009
    Location
    urgh! sometimes even he doesn't know :S
    Posts
    12
    The image is sitting to the right.

    It used to be smack bang centered before...

    by out of whack, that is what I had meant

  6. #36
    Join Date
    Sep 2009
    Location
    Toronto, Ontario, Canada
    Posts
    163

    Please post a URL so we can see what's what.
    Chris F.A. Johnson
    http://cfajohnson.com/

  7. #37
    Join Date
    Oct 2009
    Location
    urgh! sometimes even he doesn't know :S
    Posts
    12
    http://www.kocogludesign.com

    And LoL @ whacking it back into whack

    Nice one

    I tried to remove all the values in the table part of the html code, hoping it would do just that... This only made all the images disappear.

    So, I put them back in.

    I appreciate the help you are providing cfajohnson.

  8. #38
    Join Date
    Oct 2009
    Posts
    15
    Quote Originally Posted by cfajohnson View Post

    The authoritative source is http://www.w3.org. For example, see http://www.w3.org/QA/2002/04/valid-dtd-list.html

    My pages always begin with:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
      <head>
        <title></title>
        <link href="" rel="stylesheet" type="text/css">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      </head>
      <body>
        <h1></h1>
    (I use an emacs macro to insert it when I start a new HTML page.)
    cool this is usually what i start with anyway^^ just the meta and link are swapped and nothing in html (<html...>)
    Last edited by Jerm993; 10-19-2009 at 05:21 AM.

  9. #39
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Actually, the HTML attributes are to become deprecated, especially in strict HTML and in XHTML Doctypes. The modern web development has to follow the separation between the content (HTML) and the presentation (CSS). This is the reason why a HTML attribute like align does not pass the W3C validation.

    The horizontal centring of a HTML element is to be done in CSS, using the margin CSS attribute, and the values auto for left and right margins:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>untitled</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <style type="text/css">
    .container {
    width:800px;
    height:400px;
    background:#ff0000;
    margin-left:auto;
    margin-right:auto;
    }
    </style>
    </head>
    <body>
    <div class="container">
    </div>
    </body>
    </html>

  10. #40
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by Jerm993 View Post
    cool this is usually what i start with anyway^^ just the meta and link are swapped and nothing in html (<html...>)
    You are wrong. The Doctype is required. You don't have to use a XHTML doctype, unless you intend to work with XML files. HTML 4.01 strict is all you need.

  11. #41
    Join Date
    Oct 2009
    Posts
    15
    well at least all the pages i've made havn't been for someone else then^^ ill look into how i should do it, just one more thing for me to learn. Fyi i already told them to do the margin: 0px auto; thing but instead i think i said pagewrap trick.

  12. #42
    Join Date
    Jan 2014
    Location
    Calgary, Canada
    Posts
    29
    Step One: HTML

    Declare a DOCTYPE. Create an initial "wrap" DIV that will be the website's wrapper.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>My Site</title>
    </head>
    <body>
    <div id="wrap">

    <!-- WEBSITE GOES HERE -->

    </div>
    </body>
    </html>


    Step Two: CSS


    Declare the wrap ID -- you MUST declare a width (otherwise, how would you center it?) Use left and right margins of "auto."

    /* "auto" makes the left and right margins center the wrapper */
    #wrap {
    width: 900px;
    margin: 0 auto;
    }

  13. #43
    Join Date
    Jan 2014
    Location
    Calgary, Canada
    Posts
    29
    You can centre a webpage using CSS method

    Watch video :
    http://www.youtube.com/watch?v=CFFHHelvs8c

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles