Guest FirefoxRocks Posted April 8, 2007 Share Posted April 8, 2007 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 More sharing options...
real_illusions Posted April 8, 2007 Share Posted April 8, 2007 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 More sharing options...
jlhaslip Posted April 8, 2007 Share Posted April 8, 2007 .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 More sharing options...
Guest FirefoxRocks Posted April 9, 2007 Share Posted April 9, 2007 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 More sharing options...
real_illusions Posted April 9, 2007 Share Posted April 9, 2007 you should only need to put #container, without the div in front of it in the css. Link to comment Share on other sites More sharing options...
pulpfiction Posted April 9, 2007 Share Posted April 9, 2007 you should only need to put #container, without the div in front of it in the cssthat should not be the problem.... [if id="container" is a DIV]div#container {....} is same as #container {.....} Link to comment Share on other sites More sharing options...
real_illusions Posted April 9, 2007 Share Posted April 9, 2007 yeah..i know it shouldn't be the problem..just pointing it out, i dont like un-needed code Link to comment Share on other sites More sharing options...
Guest FirefoxRocks Posted April 9, 2007 Share Posted April 9, 2007 I tried both ways, still doesn't appear correctly in Internet Explorer. Any other ideas? Link to comment Share on other sites More sharing options...
msd Posted April 10, 2007 Share Posted April 10, 2007 Try: *{margin:0 auto;} Link to comment Share on other sites More sharing options...
Guest FirefoxRocks Posted April 10, 2007 Share Posted April 10, 2007 Is that supposed to be valid CSS? Link to comment Share on other sites More sharing options...
roondog Posted April 10, 2007 Share Posted April 10, 2007 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 More sharing options...
Nim199 Posted April 10, 2007 Share Posted April 10, 2007 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 More sharing options...
Guest FirefoxRocks Posted April 10, 2007 Share Posted April 10, 2007 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 More sharing options...
Jammy_Stuff Posted April 10, 2007 Share Posted April 10, 2007 Here. I've made a few minor changes but I didn't see much wrong with it in the first place. This sort of thing is working on my site so it should on yours too. Try it and let me know. Link to comment Share on other sites More sharing options...
chemo Posted April 11, 2007 Share Posted April 11, 2007 }. 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 More sharing options...
msd Posted April 11, 2007 Share Posted April 11, 2007 Is that supposed to be valid CSS?Check this http://iamntz.com/portfolio/exigo/1/styles/screen.css with the W3 CSS Validator: http://jigsaw.w3.org/css-validator/ Link to comment Share on other sites More sharing options...
Guest FirefoxRocks Posted April 11, 2007 Share Posted April 11, 2007 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 More sharing options...
S@m Posted April 11, 2007 Share Posted April 11, 2007 I'm probably way late and a beer behind, so I apologize if my input is useless.This works like a champ for centering layout:http://www.simplebits.com/notebook/2004/09/08/centering.html Link to comment Share on other sites More sharing options...
pdfreires Posted April 13, 2007 Share Posted April 13, 2007 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 More sharing options...
Guest FirefoxRocks Posted April 13, 2007 Share Posted April 13, 2007 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 More sharing options...
S@m Posted April 13, 2007 Share Posted April 13, 2007 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 More sharing options...
the_scyphe Posted April 15, 2007 Share Posted April 15, 2007 You can do it with html!<html><head><title></title></head><body><center></center></body></html> Link to comment Share on other sites More sharing options...
Guest FirefoxRocks Posted April 15, 2007 Share Posted April 15, 2007 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 More sharing options...
dcole.ath.cx Posted April 16, 2007 Share Posted April 16, 2007 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 More sharing options...
the_scyphe Posted April 16, 2007 Share Posted April 16, 2007 margin: 0 auto Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now