Jump to content

Creating a centered page with restricted dimensions.


cfalcon

Recommended Posts

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

Link to comment
Share on other sites

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 by Eric
Link to comment
Share on other sites

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 by BeeDev
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

<!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 by BeeDev
Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...