SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Jan 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    centering homepage-layout in strict 1.0

    Hi
    I finish my homepage layout.html page. what i want to do is just centering my web page and the whole site. but it doesn' t center.

    I'm doing a site and following the directive in sitepoint book "standard compliant website using dreamweaver 8" using strict 1.0 and includes.

    i want to center the homepage-layout html before i create the include files.
    i want the site to be 900px wide, not 100% wide.

    How do i go about this?

    thanks!

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,812
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Assign the following CSS to the wrapper:

    width : 900px; margins : 0 auto;
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Member
    Join Date
    Jan 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    im a little css illiterate so please bear with me,

    where do i put the wrapper? i tried creating a wrapper div right under the <body> tag, applied the css you advised, and put its </div> right over the </body> tag, it still don't work.

    thanks for quick reply

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Do you mean something like this?
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    body {
        text-align:center
    }
    #wrapper {
        width:900px;
        margin:auto;
        text-align:left;
        border:1px solid #000;
    }
    h1 {
        text-align:center
    }
    </style>
    </head>
    <body>
    <div id="wrapper">
        <h1>Centred Container</h1>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
    </div>
    </body>
    </html>

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,812
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Paul,

    are there really enough IE5 users still around to make it worth including those text-align commands in new web sites?
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You'd be surprised.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by felgall View Post
    Paul,

    are there really enough IE5 users still around to make it worth including those text-align commands in new web sites?
    No Stephen, you are probably right and we shouldn't really bother with ie5 but old habits die hard

    Sometimes I find myself automatically typing the ie5mac nested backslash/comment hack without thinking also

    I think its fair to let ie5 die now and I don't specifically cater for it but I do still find myself automatically doing the box model hacks because I know its something simple I can do at the time even if I do never check what it looks like in ie5 these days.

  8. #8
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    I just had a look at my largest website (which is not tech-related), and only about 0,18 percent of the hits were from Internet Explorer versions below 6. Personally, I can live with ignoring layout problems with 0,18 percent of my visitors (especially since I doubt I can do anything for those still using Internet Explorer 2 and Netscape Navigator 0.6 ).
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  9. #9
    SitePoint Member
    Join Date
    Jan 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    Assign the following CSS to the wrapper:

    width : 900px; margins : 0 auto;
    My mistake is that i put a pixel width in the body tag. i put back to blank and now it centered. i really appreciate you replying to my inquiry, thanks.

    But i have another question, again regarding doing a site with XHTML 1.0 Strict. the way it is taught in Sitepoint's book "making website with Dreamweaver 8".

    How do i place a footer div that will appear on every page? In content ID or nav ID (you know, the sidebar). In which includes should it be in?

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by walldon View Post
    How do i place a footer div that will appear on every page?
    Some options would be:
    - manually place the footer code on each page (inefficient)
    - place it in Library item (or whatever it's called) in Dw
    - use a PHP include (best option)


Tags for this Thread

Bookmarks

Posting Permissions

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