Jump to content


Photo

Creating a centered page with restricted dimensions.


  • Please log in to reply
7 replies to this topic

#1 cfalcon

cfalcon

    New member

  • New Members
  • 6 posts

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

#2 PicnicTutorials

PicnicTutorials

    Eric

  • Advanced Member
  • PipPipPipPip
  • 2,431 posts
  • 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/

Edited by Eric, 09 March 2011 - 11:50 AM.

  • 0

#3 BeeDev

BeeDev

    Advanced Member

  • Member
  • PipPipPipPip
  • 336 posts

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.

Edited by BeeDev, 09 March 2011 - 12:02 PM.

  • 0

#4 Wickham

Wickham

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 1,732 posts
  • LocationSalisbury UK

Posted 09 March 2011 - 03:16 PM

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.
  • 0

#5 cfalcon

cfalcon

    New member

  • New Members
  • 6 posts

Posted 09 March 2011 - 03:31 PM

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.



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

#6 grabenair

grabenair

    Advanced Member

  • Member
  • PipPipPipPip
  • 361 posts
  • 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.
  • 0
Standards will change. But your website needs to remain in serving its audience.
My Portfolio site

#7 BeeDev

BeeDev

    Advanced Member

  • Member
  • PipPipPipPip
  • 336 posts

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/

Edited by BeeDev, 11 March 2011 - 08:01 AM.

  • 0

#8 pb1uk

pb1uk

    Member

  • Member
  • PipPipPip
  • 74 posts

Posted 11 March 2011 - 08:05 AM

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! :unsure:
  • 0




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users