SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    applying text-align rule to html tag

    In "Transcending CSS the fine art of web design" (pp. 159-160) I read that one can apply the css rule text-align:center; to the html element to center the body thus:
    Code:
    html { 
    text-align : center; }
    
    body {
    width : 770px;
    margin : 0 auto;
    text-align : left;
    }
    In this way one can avoid an extra outer container or wrapper div.
    Yet it does not seem to work here:http://www.clickbasics.com/2.0_Plan/...transcend_css/

    What am I missing?
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  2. #2
    SitePoint Enthusiast lkagan's Avatar
    Join Date
    Sep 2007
    Location
    Boca Raton, Florida
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    Silly mistake. You forgot your body tag!
    Larry Kagan
    Lead Web Application Developer
    Superiocity, Inc.

  3. #3
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Please clarify. The <body> tag is in the html immediately after the </head> tag.
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  4. #4
    The Mind's I ® silver trophy Dark Tranquility's Avatar
    Join Date
    Sep 2003
    Location
    KSA - UAE
    Posts
    9,457
    Mentioned
    8 Post(s)
    Tagged
    1 Thread(s)
    Your CSS says
    Code CSS:
    text-align :left;
    and you want to apply
    Code CSS:
    text-align:center;

    Or are you meaning that
    Code CSS:
    text-align :left;
    does not work? may be because you have a space between the : and left

  5. #5
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    html { 
    text-align : center; }
    
    body {
    width : 770px;
    margin : 0 auto;
    text-align : left;
    }
    The html tag is supposed to align what's inside it to the center. Then the body tag is supposed to align what's inside it to the left.
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  6. #6
    SitePoint Enthusiast lkagan's Avatar
    Join Date
    Sep 2007
    Location
    Boca Raton, Florida
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My mistake. Saving the file w/ Firefox changes formatting and modifies the markup:

    Here's the line after saving the html file locally:
    HTML Code:
    <link rel="stylesheet" type="text/css" href="Storyteller_files/layout.css"></head><body>
    Very different from viewing source.
    Larry Kagan
    Lead Web Application Developer
    Superiocity, Inc.

  7. #7
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I shuffled the CSS file and all is working well. Thanks for the suggestions, guys.
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  8. #8
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I also added a line to the CSS:
    Code:
    body {
    width : 770px;
    margin : 0 auto;
    text-align : left;
    }
    It is now:
    Code:
    body { 
    position : relative; 
    width : 770px; 
    margin : 0 auto; 
    text-align : left; }
    and it works at:
    http://www.clickbasics.com/2.0_Plan/...transcend_css/
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  9. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,837
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    If you override text-align:center for html with text-align:left for the body then the html definition is redundant since you can't have text outside of the body to appear on the page in any case.

    So all you really need is:

    Code:
    body { 
    position : relative; 
    width : 770px; 
    margin : 0 auto;}
    Should work even in antiquated browsers like IE6 provided that you use a proper doctype.

    Even the position:relative is only needed if you are overlapping elements in the page using position:absolute.
    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="^$">


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
  •