cfalcon Posted March 9, 2011 Report Share Posted March 9, 2011 <p>So I'm still learning, but I was attempting to create a page with the width and height of the page restricted to 1026 x 768 pixels. Ok, I got the page to center up and had a fixed pixel layout. I was able to expand and contract the browser and it stayed horizontally centered no problem (using the info I learned on fixed pixel layouts.) But what I am wishing to accomplish is the same affect vertically. </p> <p>So lets say you have a screen resolution of 1900 x 1200 pixels but my page is only 1026 x 768 pixels; instead of that page sticking to the top of the browser as it does by default, I wish for it to be centered in the browser. I tried setting the Margins to auto and Positioning to relative for Top and Bottom but it doesn't want to take. I know I'm missing something, any suggestions? Here is the CSS that I am satisfied with. ------------------------------------------------- @charset "utf-8"; /* CSS Document */ * {padding:0px; margin:0px;} body { text-align: center; background-color: #FFFFFF; background-image: url(stand.jpg); background-position: center; background-repeat: no-repeat; margin-top: 30px; } #container { text-align: left; position: relative; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; height: 768px; width: 1024px;} ------------------------------------------------------ Thanks! Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted March 9, 2011 Report Share Posted March 9, 2011 (edited) Vertical centering with CSS is less than easy. Here is the way these guys all suggest http://www.sitepoint.com/forums/css-53/how-center-elements-inside-fixed-height-div-739534.html Alt you coule try inline block. Never tried it myself. http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ Edited March 9, 2011 by Eric Quote Link to comment Share on other sites More sharing options...
BeeDev Posted March 9, 2011 Report Share Posted March 9, 2011 (edited) How about Absolute positions: top: 50%; left: 50%; And with negative margins: margin-left: -512px; /* Because width is 1024px; */ margin-top: -384px; /* because height is 768px; */ So: body { text-align: center; background-color: #FFFFFF; background-image: url(stand.jpg); background-position: center; background-repeat: no-repeat; margin-top: 30px; position:relative; } #container { text-align: left; position: absolute; top: 50%; left: 50%; margin-top: -384px; margin-left: -512px; height: 768px; width: 1024px; } I haven't tried/tested this but I imagine this should work in any decent browser... except Internet Explorer 6. Edited March 9, 2011 by BeeDev Quote Link to comment Share on other sites More sharing options...
Wickham Posted March 9, 2011 Report Share Posted March 9, 2011 I haven't tried/tested this but I imagine this should work in any decent browser... except Internet Explorer 6. The 50% and negative margin method does work in IE6. The problem with it is that if you make the window smaller than the content, the content disappears up over the top where you can't scroll to see it (same if you use the method for centering width, the content goes off to the left where you can't scroll). See http://www.wickham43.net/centerphotolink.php So the method is useful if you have a small content width and height which is unlikely to exceed the window size. Quote Link to comment Share on other sites More sharing options...
cfalcon Posted March 9, 2011 Author Report Share Posted March 9, 2011 The 50% and negative margin method does work in IE6. The problem with it is that if you make the window smaller than the content, the content disappears up over the top where you can't scroll to see it (same if you use the method for centering width, the content goes off to the left where you can't scroll). See http://www.wickham43.net/centerphotolink.php So the method is useful if you have a small content width and height which is unlikely to exceed the window size. I tried it and it didnt seem to work for me. I just copy and pasted. was there something else? Quote Link to comment Share on other sites More sharing options...
grabenair Posted March 9, 2011 Report Share Posted March 9, 2011 I am new at this also, but I would try to set the top margin to push the container down to where you want it. This may be wrong I do not know. Quote Link to comment Share on other sites More sharing options...
BeeDev Posted March 11, 2011 Report Share Posted March 11, 2011 (edited) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> html { height:100%; } body { text-align: center; background-color: #FFFFFF; background-image: url(stand.jpg); background-position: center; background-repeat: no-repeat; margin: 0; position:relative; height:100%; } #container { text-align: left; position: absolute; top: 50%; left: 50%; margin-top: -384px; margin-left: -512px; height: 768px; width: 1024px; background:#000000; color:#FFFFFF; } </style> </head> <body> <div id="container"> <p>This is a vertically and horizontally centered div</p> </div> </body> </html> This should work. But yea as Wickham says, you shouldn't use this technique unless you're certain that your #container will fit on any size screen. But you can set certain element's dimensions depending on the user's screen size: <link rel="stylesheet" media="screen" href="../default.css" type="text/css" /> <link rel="stylesheet" media="only screen and (max-device-width: 800px)" href="../800.css" type="text/css" /> <link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../1024.css" type="text/css" /> Within these CSS documents u can set different widths for #container. So on default.css you have the normal size for all screens, in 800.css you can put #container width and height as 600px by 400px or something, and so on ... More info: http://thomasmaier.me/blog/2010/03/04/howto-css-for-the-ipad/ Edited March 11, 2011 by BeeDev Quote Link to comment Share on other sites More sharing options...
pb1uk Posted March 11, 2011 Report Share Posted March 11, 2011 I haven't tried/tested this but I imagine this should work in any decent browser... except Internet Explorer 6. You're implying IE 6 is a decent browser! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.