...

View Full Version : Centering an entire CSS page



ItsMe
05-08-2007, 06:21 PM
Hi,

I have a page made up of several different css elements. I want the design to sit centered on the page. I have tried using a text-align:center on the main body style and that doesn't move all of the elements, only some of them.

Any suggestions on how i can do this?

Thanks :)

whizard
05-08-2007, 06:29 PM
in your CSS:

body
{
margin: 0px auto;
}

(you can replace 0px with whatever you want your top margin to be if you want a top margin)

HTH
Dan

ItsMe
05-08-2007, 06:33 PM
Thanks a lot for that... but it doesn't seem to have made any difference. If i change the 0 to something else i do get a top margin as expected but the page doesnt center, it stays completely left aligned.

whizard
05-08-2007, 06:35 PM
hmm.. try wrapping the whole page inside a <div> and applying the CSS margin rule to that instead.

HTH
Dan

ItsMe
05-08-2007, 06:38 PM
My whole page is inside a <div> called page and i tried it on that aswell and it didnt change.

whizard
05-08-2007, 06:49 PM
Check out this page and see if it helps:
http://css-discuss.incutio.com/?page=CenteringBlockElement

HTH
Dan

ItsMe
05-08-2007, 06:49 PM
I'll review that link now, thanks!

ItsMe
05-08-2007, 06:56 PM
Hi again - i have looked at that link and tried the centering an entire page but again without success.

The page can be seen at: http://www.andrewthomas.org.uk/dev/index.htm and my CSS is as follows:


html {
height:100%;
width:768px;
}
body {
padding:0;
height:100%;
width:768px;
background-color:#ffffff;
background-image:url(img/bg2.jpg);
margin:0px auto;
}
#page {
min-height:100%;
position:relative;
background-color: #9EA4FC;
}
* html #page {height:100%}
#inner-page {
padding-bottom:30px;
}
#inner-page:after {
display:block;
clear:both;
}
* html #inner-page {
height:1px;
}


#footer {
background: url(img/menu_bar2.jpg) top left repeat;
position:absolute;
bottom:0;
height:30px;
width:768px;
text-align:center;
}

#main_page{
background-color:#9EA4FC;
}

#content {
background-color:#9EA4FC;
min-height:100%;
}

Thanks again.

whizard
05-08-2007, 07:09 PM
try this:

html
{
margin:0px auto;
}

worked for me in FF2..

HTH
Dan

ItsMe
05-08-2007, 07:13 PM
Thanks whizard, It worked in FF as you said, and its also working in IE6... however i need it to work in IE7 aswell, which it isnt. Any suggestions or what to do or as to why this may be the case?

VIPStephan
05-08-2007, 10:05 PM
Remove the part in red and add the part in green:


html {
height:100%;
width:768px;
margin:0px auto;
}
body {
padding:0;
height:100%;
width:768px;
background-color:#ffffff;
background-image:url(img/bg2.jpg);
margin:0px auto;
}
page {
min-height:100%;
position:relative;
background-color: #9EA4FC;
width:768px;
margin: auto;
}


The thing is that the html and body elements are somewhat special and can’t be styled as much as regular divs (at least their behavior is different in different browsers) so you shouldn’t rely on the assumption that complicated styles (like for example margin: auto;) are working in all browsers.
I suppose (without having tried it) that margin: auto; doesn’t work with either the html or the body elements (or both) in IE 7, but a width is working. So setting a width to those elements without margin: auto; working results in the body having a fixed width and being left aligned, and child elements being within the html/body will also be as wide as those elements and centering those won’t have any visible effect.

ItsMe
05-09-2007, 08:49 AM
Thanks again for that suggestion. I changed my code as you said but with no change. FF is still as it should be, but IE7 is still left aligned.

Thanks again.

_Aerospace_Eng_
05-09-2007, 09:35 AM
Thanks again for that suggestion. I changed my code as you said but with no change. FF is still as it should be, but IE7 is still left aligned.

Thanks again.

Someone didn't follow instructions correctly. The advice given to you was remove the parts in red and ADD (keyword add) the parts in green.

ItsMe
05-09-2007, 10:06 AM
Hi. I did follow the instructions properly and added the code, however i added it to a backup of my style sheet rather than the one the page was linked to. My mistake!!

Thanks a lot to you all for your help!!

:thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum