Creating a centered page with restricted dimensions.

Creating a centered page with restricted dimensions. Newb question I bet.

#1 cfalcon

Group: New Members
Posts: 6
Joined: 05-August 10

Posted 09 March 2011 - 11:11 AM

<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!

#2 Eric

Group: Advanced Member
Posts: 2,430
Joined: 19-December 08
LocationCarlsbad, CA

Posted 09 March 2011 - 11:49 AM

Vertical centering with CSS is less than easy. Here is the way these guys all suggest http://www.sitepoint...div-739534.html

Alt you coule try inline block. Never tried it myself. http://foohack.com/2...-block-styling/

This post has been edited by Eric: 09 March 2011 - 11:50 AM

www.websitecodetutorials.com/

#3 BeeDev

Group: Member
Posts: 336
Joined: 30-April 09

Posted 09 March 2011 - 12:01 PM

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.

This post has been edited by BeeDev: 09 March 2011 - 12:02 PM

Web Design and Development in London, UK : Pedalo Limited

#4 Wickham

Group: Advanced Member
Posts: 1,731
Joined: 20-December 08
LocationSalisbury UK

Posted 09 March 2011 - 03:16 PM

BeeDev, on 09 March 2011 - 05:01 PM, said:

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...erphotolink.php
So the method is useful if you have a small content width and height which is unlikely to exceed the window size.

#5 cfalcon

Group: New Members
Posts: 6
Joined: 05-August 10

Posted 09 March 2011 - 03:31 PM

Wickham, on 09 March 2011 - 02:16 PM, said:

I tried it and it didnt seem to work for me. I just copy and pasted. was there something else?

#6 grabenair

Group: Member
Posts: 340
Joined: 27-February 11
LocationIowa

Posted 09 March 2011 - 04:11 PM

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.

Standards will change. But your website needs to remain in serving its audience.
My Portfolio site

#7 BeeDev

Group: Member
Posts: 336
Joined: 30-April 09

Posted 11 March 2011 - 07:55 AM

<!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.m...s-for-the-ipad/

This post has been edited by BeeDev: 11 March 2011 - 08:01 AM

Web Design and Development in London, UK : Pedalo Limited