SitePoint Sponsor |
|
User Tag List
Results 1 to 9 of 9
-
Sep 7, 2007, 15:15 #1
- 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; }
Yet it does not seem to work here:http://www.clickbasics.com/2.0_Plan/...transcend_css/
What am I missing?
-
Sep 7, 2007, 17:44 #2
- 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!
-
Sep 7, 2007, 18:17 #3
- 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.
-
Sep 7, 2007, 18:30 #4
- 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;
Code CSS:text-align:center;
Or are you meaning that
Code CSS:text-align :left;
-
Sep 7, 2007, 18:56 #5
- 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; }
-
Sep 7, 2007, 19:01 #6
- 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>
-
Sep 7, 2007, 19:26 #7
- 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.
-
Sep 7, 2007, 19:30 #8
- 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; }
Code:body { position : relative; width : 770px; margin : 0 auto; text-align : left; }
http://www.clickbasics.com/2.0_Plan/...transcend_css/
-
Sep 7, 2007, 20:08 #9
- Join Date
- Sep 2005
- Location
- Sydney, NSW, Australia
- Posts
- 16,875
- 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;}
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