Hi guys..
I 've started designing a site at an 800 x 600 screen resolution. However I was wondering if it would be possible to use css to centralise the content if it was viewed at a higher resolution. Looking at different sites it appears possible and no doubt it is probably quite simple.
Is it something to do with setting the body margins to auto?
Thanks
Dave
There should be a sticky about this topic, since it's been gone over at least 1,000 times.
First, set the text alignment in the BODY tag to center. This centers the layout in IE-Win, most importantly in IE5-Win. Your layout then must be contained in one wrapper DIV. Give this DIV an ID, I usually give it an ID of "wrapper." Give the wrapper DIV the width you want for your page, realign the text left (or right for the Hebrew language
) and set the wrapper DIV's left and right margins to auto.
Internet Explorer incorrectly centers block level boxes using text-align: center. This property and value is only meant to center inline content within a block level box. The auto left and right margins are the Standard way for centering block level boxes within another block level box.Whoops....sorry to be the 1001st to ask this question.
Thanks for responding anyway. I did as you said and it didnt work. However if i added the position: relative; it worked.
body{background:red;
text-align:center;}
#wrapper {width: 750px;
text-align: left;
margin-left: auto;
margin-right: auto;
position:relative;}
So Thanks again and I will try not to ask silly questions in future.
DaveIf relative positioning worked, you're either trying to compensate for an error in your HTML, or compensating for a quirky browser. The solution is three-fold:
1. Use a proper doctype to put browsers into Standards Compliance Mode. (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/doctype">http://www.alistapart.com/articles/doctype</a><!-- m -->)
2. Validate your markup. (<!-- m --><a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a><!-- m -->)
3. Validate your CSS. (<!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/">http://jigsaw.w3.org/css-validator/</a><!-- m -->)
You shouldn't need relative positioning to get auto left and right margins to work. Following the three steps above ensures that you are at least accounting for a browser quirk and not your own mistakeThanks again.
I will have to check those out.
I must admit I only added the position:relative; because I came across it in a CSS book written by someone called Eric Meyer.
I think I need more practice with CSS for sure but even at this early stage it appears a lot more adaptable than messing with tables etc...
Dave.
I 've started designing a site at an 800 x 600 screen resolution. However I was wondering if it would be possible to use css to centralise the content if it was viewed at a higher resolution. Looking at different sites it appears possible and no doubt it is probably quite simple.
Is it something to do with setting the body margins to auto?
Thanks
Dave
There should be a sticky about this topic, since it's been gone over at least 1,000 times.First, set the text alignment in the BODY tag to center. This centers the layout in IE-Win, most importantly in IE5-Win. Your layout then must be contained in one wrapper DIV. Give this DIV an ID, I usually give it an ID of "wrapper." Give the wrapper DIV the width you want for your page, realign the text left (or right for the Hebrew language
) and set the wrapper DIV's left and right margins to auto.Internet Explorer incorrectly centers block level boxes using text-align: center. This property and value is only meant to center inline content within a block level box. The auto left and right margins are the Standard way for centering block level boxes within another block level box.Whoops....sorry to be the 1001st to ask this question.
Thanks for responding anyway. I did as you said and it didnt work. However if i added the position: relative; it worked.
body{background:red;
text-align:center;}
#wrapper {width: 750px;
text-align: left;
margin-left: auto;
margin-right: auto;
position:relative;}
So Thanks again and I will try not to ask silly questions in future.
DaveIf relative positioning worked, you're either trying to compensate for an error in your HTML, or compensating for a quirky browser. The solution is three-fold:
1. Use a proper doctype to put browsers into Standards Compliance Mode. (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/doctype">http://www.alistapart.com/articles/doctype</a><!-- m -->)
2. Validate your markup. (<!-- m --><a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a><!-- m -->)
3. Validate your CSS. (<!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/">http://jigsaw.w3.org/css-validator/</a><!-- m -->)
You shouldn't need relative positioning to get auto left and right margins to work. Following the three steps above ensures that you are at least accounting for a browser quirk and not your own mistake
Thanks again.I will have to check those out.
I must admit I only added the position:relative; because I came across it in a CSS book written by someone called Eric Meyer.
I think I need more practice with CSS for sure but even at this early stage it appears a lot more adaptable than messing with tables etc...
Dave.