Jump to content

Centering page, but with minimum coordinates


Recommended Posts

Hi all,I had been using an invisible div I called positioner and setting its x and y to 50%, to get the center of the page so I can put a child div inside and make its position....wait I'll just post the code.

#positioner{	background-color:#00f0f0;	position:absolute;	left:50%;	top:0px;	width:0px;	height:100%;	padding:0px;	margin:0px; }#content{	z-index:1;	border-color:#548395;	border-style:solid;	border-width:3px;	background-color:#ffffff;	width:800px;	height:100%;	position:relative;	right:400px;	bottom:0px;	padding:0px;	margin:32px 0px 32px 0px; }

Really all I want is to be able to center the entire page vertically and horizontally, unless the window is too small, then have the minimum coordinates. In logic terms...

	position:relative;	right:400px;	if (position-x < 32px)	position-x:32px;

I guess. I am a C++ developer so not having access to logical if/the statements confuses me.I am okay if I cannot center vertically, I just didn't want to hard-code the page being at the top (in case someone has a big resolution, like on a Mac.)This page centers like I want, so its centered unless the window is too small for it, but I was not able to find out how this was achieved.This is the site I am working on, if you resize the window you can see it has problems centering when it is too small.Also any critique on the site would be nice :)Help me out?

Link to post
Share on other sites

to center a block level element like a div, use

margin: 0px auto

on it. There are also properties for min and max width. And you really don't need to be using positioning for this kind of stuff. It should only be used in certain situations, but not necessarily for simple layout and positioning.

Link to post
Share on other sites

I'm not sure if you are wanting me to just add that, or replace something I currently have. I also looked up margin before and don't see how it would help. The auto setting is evidently determined by the browser. Your advice seems kind of general and I can't relate it to my code easily. Also I'm wanting to avoid CS3 since I guess it doesn't work for everyone.Edit: this page explained it better, but I still don't see how I would make a minimum coordinate (For the top in my case) Can I specify the top margin and leave the bottom as auto?

Edited by Felix-The-Ghost
Link to post
Share on other sites

by CS3 do you mean CSS3? That's not what I'm proposing. what i was suggesting was on the container div that holding all your content, add margin: 0px auto to it, remove the positioning, the left the top, etc (none of that stuff is valid anyway).example to center a div on the page:

#container{  margin: 0px auto;}

that's it. I haven't moved on to the top and bottom yet until we get this straightened out. And for the content div, also remove the positioning, z-index, top bottom, or anything that's invalid. You can validate CSS here: http://jigsaw.w3.org/css-validator/also, maybe just read over the CSS tutorials so you are aware of what the correct properties are.

Edited by thescientist
Link to post
Share on other sites

P.S. the auto value is not worked out by the browser, and means different things in different contexts. When used in the margin attribute for horizontal values, it means, basically, "use as much space as possible".

Link to post
Share on other sites
by CS3 do you mean CSS3? That's not what I'm proposing. what i was suggesting was on the container div that holding all your content, add margin: 0px auto to it, remove the positioning, the left the top, etc (none of that stuff is valid anyway).example to center a div on the page:
#container{  margin: 0px auto;}

that's it. I haven't moved on to the top and bottom yet until we get this straightened out. And for the content div, also remove the positioning, z-index, top bottom, or anything that's invalid. You can validate CSS here: http://jigsaw.w3.org/css-validator/also, maybe just read over the CSS tutorials so you are aware of what the correct properties are.

I didn't think I had used anything invalid because Komodo Edit tells me if its invalid. I assume you mean the syntax can be valid...but not functionally valid? I'll try that utility later today when I have time. The z-index was used because I had a stretched image as the background called later in the HTML as the very last element in the body tag...it has z-index of -1, but I thought I read somewhere to be sure about it.Have you seen the site yet? I had a link up.Also the same page I gave mentioned vertical centering as well.
margin: 0px auto;

Does that center both ways, or just horizontally? I'll probably end up not using the short version and specify the left and right margins. I really like the sites top and bottom margins as they are (although its not centered, and Google Chrome doesn't render bottom margins.)Also:

(none of that stuff is valid anyway).
Congratulations! No Error Found.
Edited by Felix-The-Ghost
Link to post
Share on other sites

Stay calm, people are trying to help you here. I think thescientist just meant that your original code wouldn't help you achieve your goal.You can't use the margin property by itself to center things - the best (and only AFAIK) way to do that is to use positioning - set its top attribute to 50% and then use a negative margin-top to shift it up.

Link to post
Share on other sites

Vertical centering is a PITA. You can find many, many write-ups on the topic because it is so challenging and comes with significant cross-browser issues. I gave up on it years ago. The benefit just doesn't outweigh the hassle. YMMV.

Link to post
Share on other sites
Stay calm, people are trying to help you here.
I am calm. :)I'm just a little aggressive and casually sarcastic at times.I'll have to figure the Vertical center later (I have a few leads) but at least the horizontal part is done.Edit: I tried to actually implement the margin auto thing.This happened, though...the objects within #content no longer seem to follow the absolute positioning with the coordinates of #content as its origin...Also, The text tries to readjust to fitting in the page when I stretch it instead of staying how it was and just being hid like I want...Any ideas what happened here?Its like the stuff in #content only aligns to the screen itself...not #content's bounds. Edited by Felix-The-Ghost
Link to post
Share on other sites

maybe post your code or give us a link? I don't think anyone here is keen on downloading random stuff on the internet. All I can say is if you're trying to position with floats, margins, and padding's, then you shouldn't really need to be using absolute positioning.

Link to post
Share on other sites
maybe post your code or give us a link? I don't think anyone here is keen on downloading random stuff on the internet. All I can say is if you're trying to position with floats, margins, and padding's, then you shouldn't really need to be using absolute positioning.
There's a link in this postI need absolute positioning for the things within the container.
Link to post
Share on other sites
There's a link in this postI need absolute positioning for the things within the container.
Why do you have to use absolute positioning? Perhaps if I could visit your site that might clear it up but alas, company policy forbids me from visiting it. So if you could explain it to me that'd be great. There may be better ways to accomplish what you need but if not there are still ways to center your page without all that positioning and that 'positioner' div you use.But like thescientist said, positioning should only be used as a last resort. What you're trying to accomplish can be done with something like this:
#content {   margin: 0px auto;   width: 900px; /*Or whatever you need*/   /*Content styles*/   /*DO NOT use positioning here*/}...<div id='content'>   <!-- Content here --></div>

And you won't need to use that positioner div you have in your original code.

Edited by ShadowMage
Link to post
Share on other sites

unfortunately he's trying to keep a certain div fixed at the top of the page while a user scrolls down.edit: nm, i think I'm thinking of a different thread :)

Edited by thescientist
Link to post
Share on other sites

the site at http://www.golftribe.com/archive/2010/01/0...olf-bag.aspx#10has a fixed width div using margin: 0 auto; to center it, and position relative for the use of position absolute elements within it (blog stats for example).#all {background-color:#FFFFFF;height:100%;margin:auto;padding:0;position:relative;width:680px;}the gap at the top is set using padding:50px 0; /*padding 50px top and bottom*/body {margin:0;padding:50px 0;}EDIT: within div with id="all" is a div which contains most of the content, its padding causes the text to be away from the white edge by 30px #container {margin:auto;min-height:300px;padding:10px 30px;}

Edited by dsonesuk
Link to post
Share on other sites

fixed position means when something is fixed, as in when 'position: fixed' is used, it will stay fixed, and not scroll, position:absolute is not fixed, it is positioned relative to its parent container, and will scroll (well unless you use combination of overflow, height styling in html and body).this all depends if it is within an position relative; container in which case it can be centred, then the position absolute will act within the confines of that element, as used in the website link that was provided.

Link to post
Share on other sites

Hi!Try This Code:site.html

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">    <head>        <title>3 Good Shots - Improve your golf through positive memories and practice</title>                <link rel="stylesheet" type="text/css" href="mystyle.css" />        <!--[if IE 6]>        <style type="text/css">        html { overflow-y: hidden; }        body { overflow-y: auto; }        #background { position:absolute; z-index:-1; }        #content { position:static; }        </style>        <![endif]-->            </head>        <body>    <div id = "positioner">            <div id = "header">                <div id = "logo">        	<a href="http://www.3goodshots.com"><img src="resources/logo.png" border="0" vspace="0" hspace="0"/></a>        </div>              	<div id="snetworks">        	<a href="http://www.twitter.com/3goodshots" class="twitter"></a>        	<a href="http://www.facebook.com/pages/3-Good-Shots/126627384034594" class="facebook"></a>        	<a href="http://feeds.feedburner.com/3GoodShots" class="RSS"></a>            <div class="clear"></div>        </div>                <div id="login_register">        	<a href="http://www.3goodshots.com/Account/LogOn" class = "register">Login / Register >></a>          </div>                <div id="menus">          	<a href="http://www.3goodshots.com/" class="home"></a>            <a href="http://www.3goodshots.com/Home/About" class="about_us"></a>            <a href="http://www.3goodshots.com/Round/Create" class="add_round"></a>            <a href="http://www.3goodshots.com/Par18/Create" class="add_par"></a>            <a href="http://www.3goodshots.com/Article/Useful-Golfing-Websites" class="links"></a>        	<div class="clear"></div>        </div>                <div id="slogan">        	Describe Your Good Shots... Remember Your Good Shots...   Play Better Golf...        </div>                <div class="clear"></div>              </div>                <div id = "content">                <div id="content_left">                <p class = "title">About 3 Good Shots</p>                <p> If you talk to any Golf Mental Coach one of the things they will<br />            suggest you do is keep diary of good shots.<br />            This encourages you to recall these good shots while on the<br />            course and play with a positive frame of mind.<br />            <br />            Writing down the good shots is easy enough,<br />            but remembering them is the difficult bit.<br />          </p>                <p class = "subtitle">This is where 3 Good Shots comes into play...</p>                <p class = "italic pl_20">        	1. Enter your best 3 shots after playing a round of golf...<br />            <br />            2. Each day you receive an email with the information about<br />            your shots for you to read and re-live...<br />            <br />            3. Go out and play golf with a great memory of your good shot<br />            and a positive attitude!        </p>                <p> What are you waiting for? <a href="http://www.3goodshots.com/account/logon">Register on the site</a> and start<br />            recording your good shots now!        </p>                        </div>                <div id = "divider"><img src="resources/divider.png" /></div>                <div id="content_right">                <p class = "title">Latest Articles...</p>                	<a href="http://www.3goodshots.com/article/scoring-well-in-golf">Scoring Well In Golf</a>            <br />            <a href="http://www.3goodshots.com/article/well-done-justin-rose">Well Done Justin Rose</a>            <br />            <a href="http://www.3goodshots.com/article/june-site-stats">June Site Stats</a>            <br />            <a href="http://www.3goodshots.com/article/golf-club-distances-how-far-do-you-hit-yours">Golf club distances - how far do you hit yours?</a>            <br />            <a href="http://www.3goodshots.com/article/americans-dont-like-mcdowell-winning">Americans do not seem to like Graeme McDowell Winning!</a>                	<p align="right"><a href="http://www.3goodshots.com/Article/All">More >></a></p>                </div>                <div class="clear"></div>            </div>          </div>        <img src="resources/gradient.png" id="background" />        </body></html>

mystyle.css

html, body{    margin: 0;    padding: 0;}a:link, a:visited, a:active{    color: #39b54a;}a:hover{    color: #00aeef;}p, a{    line-height:14px;    font:bold 12px Arial;}p.title{    font-family:"Arial Black";    font-size:25px;}p.subtitle{    font-family:"Arial Black";    font-size:18px;}p.italic{    font-style:italic;}img#background{    z-index:-1;    position:fixed;    top:0;    left:0;    width:100%;    height:100%;}#positioner{    background:#fff;	width: 800px;	margin: 0px auto;	margin-top: 40px;}#header{    border:3px solid #548395;	border-bottom: 0px;    width:774px;	padding: 10px;}#logo{    width: 240px;	height: 138px;	float: left;}#snetworks{	width: 500px;	float: right;}#snetworks .twitter, #snetworks .facebook, #snetworks .RSS{	display: block;	float: right;	margin: 0px 0px 0px 10px;}#menus{    width: 500px;	float: right;}#menus .home, #menus .about_us, #menus .add_round, #menus .add_par, #menus .links{	display: block;	float: right;	margin: 0px 0px 0px 5px;}#gradient{    position:absolute;    left:0px;    top:153px;}#slogan{	width: 500px;	float: right; 	font: bold 13.3px arial;	text-align: right;}.twitter, .twitter:visited, .twitter:active{    background-repeat: no-repeat;    background-image: url("resources/twitter.png");    width: 32px;    height: 32px;    display: inline-block;}.twitter:hover{    background-repeat: no-repeat;    background-image: url("resources/twitter2.png");    width: 32px;    height: 32px;}.facebook, .facebook:visited, .facebook:active{    background-repeat: no-repeat;    background-image: url("resources/facebook.png");    width: 32px;    height: 32px;    display: inline-block;}.facebook:hover{    background-repeat: no-repeat;    background-image: url("resources/facebook2.png");    width: 32px;    height: 32px;}.RSS, .RSS:visited, .RSS:active{    background-repeat: no-repeat;    background-image: url("resources/RSS.png");    width: 32px;    height: 32px;    display: inline-block;}.RSS:hover{    background-repeat: no-repeat;    background-image: url("resources/RSS2.png");    width: 32px;    height: 32px;}#login_register{	width: 500px;	float: right;	text-align: right;	padding: 10px 0px 10px 0px;}a.register{    color:#40557f;}a.register:hover{    color: #00aeef;}#home{    position:absolute;    left:295px;    top:82px;    width: 61px;    height: 50px;    margin: 0;    padding: 0;}.home, .home:visited, .home:active{    background-repeat: no-repeat;    background-image: url("resources/home.png");    width: 61px;    height: 50px;    display: block;}.home:hover{    background-repeat: no-repeat;    background-image: url("resources/home2.png");    width: 61px;    height: 50px;}#about_us{    position:absolute;    left:362px;    top:80px;    width: 85px;    height: 50px;    margin: 0;    padding: 0;}.about_us, .about_us:visited, .about_us:active{    background-repeat: no-repeat;    background-image: url("resources/about_us.png");    width: 85px;    height: 50px;    display: inline-block;}.about_us:hover{    background-repeat: no-repeat;    background-image: url("resources/about_us2.png");    width: 85px;    height: 50px;}#add_round{    position:absolute;    left:453px;    top:82px;    width: 115px;    height: 50px;    margin: 0;    padding: 0;}.add_round, .add_round:visited, .add_round:active{    background-repeat: no-repeat;    background-image: url("resources/add_round.png");    width: 115px;    height: 50px;    display: block;}.add_round:hover{    background-repeat: no-repeat;    background-image: url("resources/add_round2.png");    width: 115px;    height: 50px;}#add_par{    position:absolute;    left:573px;    top:82px;    width: 157px;    height: 50px;    margin: 0;    padding: 0;}.add_par, .add_par:visited, .add_par:active{    background-repeat: no-repeat;    background-image: url("resources/add_par.png");    width: 157px;    height: 50px;    display: block;}.add_par:hover{    background-repeat: no-repeat;    background-image: url("resources/add_par2.png");    width: 157px;    height: 50px;}#links{    position:absolute;    left:736px;    top:82px;    width: 56px;    height: 50px;    margin: 0;    padding: 0;}.links, .links:visited, .links:active{    background-repeat: no-repeat;    background-image: url("resources/links.png");    width: 56px;    height: 50px;    display: block;}.links:hover{    background-repeat: no-repeat;    background-image: url("resources/links2.png");    width: 56px;    height: 50px;}#content{    border:3px solid #548395;	border-top: 2px;    background: url(resources/gradient2.png) repeat-x;    width:774px;	padding: 25px 10px 10px 10px;	}#content_left{	width: 460px;	padding: 0px 0px 100px 20px;	float: left;}#divider{	padding: 10px 0px 0px 0px;	float: left;}#content_right{	width: 250px;	float: right;}#about{    position:absolute;    left:36px;    top:185px;}#about_1{	position:absolute;	left:34px;	top:232px;}#about_2{    position:absolute;    left:36px;    top:353px;}#three_steps{    position:absolute;    left:50px;    top:393px;}#stop_waiting{    position:absolute;    left:36px;    top:509px;}#latest_articles{    position:absolute;    left:556px;    top:185px;}#articles{    position:absolute;    left:545px;    top:239px;}#more{    position:absolute;    left:729px;    top:478px;}.clear{	clear: both;}.pl_20{	padding-left: 20px;}

Link to post
Share on other sites
Hey! That worked! But what exactly did you do...?
This is precisely why I don't approve of people just printing a bunch of code and not explaining anything.
Link to post
Share on other sites

Hi!He's Right, I Just Removed Fixed Or Absolute Positions, Like Defined Top Or Left...U Just See My HTML & CSS Structure... And Find Differences...If You Are Using Fixed Positions Like Top Or Left...So U Can't Use margin; 0 auto For Centering Div, Because It's Already Fixed By Top Or Left...If U Ar Making Your Site Div Based.I Just Noticed That margin; 0 auto; And clear:both; Are Most Important Part Of It.<!-- Sorry 4 Bad English :) --!>

Link to post
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.

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