Jump to content

Centering the whole page


Guest FirefoxRocks

Recommended Posts

Guest FirefoxRocks

I cannot believe that I still don't have this done! It looks easy, but is actually extremely hard.A lot of people make their web pages 780px wide to support monitor resolution of 800x600.So I decided to make it 780px wide (or something close) and to center the entire body.These are the steps that I have tried:1. Just centering the <html> element and left-aligning the <body> element.So my CSS code for the <html> and <body> elements are:

html {width:779px;color:#000;background-color:#00007d;text-align:center}body{text-align:left;background-color:#1ebcff;color:#000;padding:0px;width:778px}

2. It didn't work, so then I tried the recommended margin:0 trick.

html {width:779px;color:#000;background-color:#00007d;text-align:center}body{margin:0;text-align:left;background-color:#1ebcff;color:#000;padding:0px;width:778px}

3. My next method was to use a container <div>.

html {width:779px;color:#000;background-color:#00007d}div#container {text-align:center;margin:0}table#page {background-color:#1ebcff;padding:0;text-align:left;margin:0;width:778px}body{margin:0;text-align:center;background-color:#1ebcff;color:#000;padding:0px;width:778px}

4. Since I use a table for layout (bad habit), I tried centering everything. I also tried incorporating the container <div> into this method.

html {width:779px;color:#000;background-color:#00007d;text-align:center}div#container {text-align:center;margin:0}table#page {background-color:#1ebcff;padding:0;text-align:left;margin:0;width:778px}body{margin:0;text-align:center;background-color:#1ebcff;color:#000;padding:0px;width:778px}

AND

html {width:779px;color:#000;background-color:#00007d;text-align:center}table#page {background-color:#1ebcff;padding:0;text-align:left;margin:0;width:778px}body{margin:0;text-align:center;background-color:#1ebcff;color:#000;padding:0px;width:778px}

I have no clue how I am going to center the entire page without the use of <center>, which is disallowed in XHTML 1.1 (application/xhtml+xml) and XHTML 1.0 Strict (for IE).How does http://msn.com get the whole page centered in IE, Firefox and Opera?!? I tried deciphering their CSS and XHTML code but it was no use. Many sites just leave it at the left, but I prefer it being centered.

Link to comment
Share on other sites

easyyou'll be kicking yourself probablyCreate an outer div and call it 'outer'in the css put.outer{margin:auto 0px;width:780px;}Then put all the content into there, best split the sections into divs. Then use text-align:center; to align some text in some paragraphs to the center if need be.Have a look at my site (link in siggie), the way i've done it is using the explanation above.:)

Link to comment
Share on other sites

.outer{margin: 0px auto ;width:780px;}
notice the position of auto has been switched?Your third example above was close:
div#container {text-align:center;margin:0 auto; }
Link to comment
Share on other sites

Guest FirefoxRocks

Ok, please take a look at http://portal.trap17.com/wdl/styles.css and tell me what I am doing wrong here.I even copied the CSS for div#outer off of real_illusions site. It works on Mozilla Firefox and Internet Explorer.Mine only works in Firefox and other browsers but not Internet Explorer! :)

Link to comment
Share on other sites

i find this works best for centering pages.body{text-align:center;}#container{width: ??px;margin 0 auto;}replace ?? with a number and bob's your uncle.

Link to comment
Share on other sites

This probably will not work, and is a bit 'retro', but have you tried the center tag?<center>

Link to comment
Share on other sites

Guest FirefoxRocks
This probably will not work, and is a bit 'retro', but have you tried the center tag?<center>
Try:
*{margin:0 auto;}

Didn't you read the initial post (bottom part)?Anyways, the *{margin:0 auto} thing DOES NOT work in XHTML.
Link to comment
Share on other sites

}. outer_wrap{ width: 780px ; hight: auto ; position: relative ; padding: 0px ; margin: 0px auto ; display: table ;This works for me with display: table; being the important part it will not work without this.

Link to comment
Share on other sites

Guest FirefoxRocks

Both of those suggestion didn't work because:Jammy_Stuff -> There was no changes made to the CSS file other than the ending semicolon.chemo -> Don't know why it didn't work.Keep in mind that the document is being served with true XHTML, or application/xhtml+xml, for Firefox and other browsers that handle it and text/html (or backwards-compatibility mode) for browsers (like IE) that can't handle true XHTML.

Link to comment
Share on other sites

The solution I'm posting works just fine to me... It's a solution based in absolute positioning, though.You should use a div to wrap all the content you want to be centered. Make its position absolute and move the left edge to 50%. Then use a negative left-margin to center the div. If you're left margin is minus the half of the box's width, then its center will be positioned at 50% of the page (the left-edge), a.k.a centered. Example:

div#container {position:absolute;width:760px;left:50%;left-margin:-380px;}

Following the same logic, you can vertically center any content. If don't want to wrap all the content in a box, you can fix body's width (or height) and just center the body. I got this solution here. If you want to center with auto-width, check this one instead. That's it.

Link to comment
Share on other sites

Guest FirefoxRocks

Nope, they didn't work.I think that application/xhtml+xml is special in this, using the <html> and <body> elements in CSS. boen_robot could really help with this I think.

Link to comment
Share on other sites

If you are having this much trouble getting both browsers to work, I would suggest starting over and use the method I posted.It will take about 5 min. to set up and all your problems will be solved. Don't make it harder than it needs to be. :)

Link to comment
Share on other sites

Guest FirefoxRocks
You can do it with html!<html><head><title></title></head><body><center></center></body></html>
That's nice, but I need XHTML 1.1/XHTML 1.0 Strict, not HTML 4.01 Transitonal/HTML 3.2. <center> is so depreciated!
Link to comment
Share on other sites

Why not use S@m's idea... because it works. That's the same code I would have posted and it's both XHTML and CSS valid. You also can't say it doesn't work because I've personally tested it in IE 6, IE 7, FF 1.5, FF 2, Opera 9.1 and Opera 9.2.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...