Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Mar 2005
    Location
    UK
    Posts
    79
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Centering an entire CSS page

    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
    Andrew,
    AKA ItsMe

  • #2
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    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
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #3
    New Coder
    Join Date
    Mar 2005
    Location
    UK
    Posts
    79
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.
    Andrew,
    AKA ItsMe

  • #4
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    hmm.. try wrapping the whole page inside a <div> and applying the CSS margin rule to that instead.

    HTH
    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #5
    New Coder
    Join Date
    Mar 2005
    Location
    UK
    Posts
    79
    Thanks
    1
    Thanked 0 Times in 0 Posts
    My whole page is inside a <div> called page and i tried it on that aswell and it didnt change.
    Andrew,
    AKA ItsMe

  • #6
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    Check out this page and see if it helps:
    http://css-discuss.incutio.com/?page...ngBlockElement

    HTH
    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #7
    New Coder
    Join Date
    Mar 2005
    Location
    UK
    Posts
    79
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I'll review that link now, thanks!
    Andrew,
    AKA ItsMe

  • #8
    New Coder
    Join Date
    Mar 2005
    Location
    UK
    Posts
    79
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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:

    Code:
    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.
    Andrew,
    AKA ItsMe

  • #9
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    try this:

    html
    {
    margin:0px auto;
    }

    worked for me in FF2..

    HTH
    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #10
    New Coder
    Join Date
    Mar 2005
    Location
    UK
    Posts
    79
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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?
    Andrew,
    AKA ItsMe

  • #11
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,701
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Remove the part in red and add the part in green:
    Code:
    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.

  • #12
    New Coder
    Join Date
    Mar 2005
    Location
    UK
    Posts
    79
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.
    Andrew,
    AKA ItsMe

  • #13
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by ItsMe View Post
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #14
    New Coder
    Join Date
    Mar 2005
    Location
    UK
    Posts
    79
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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!!

    Andrew,
    AKA ItsMe


  •  

    Posting Permissions

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