How do you Auto Center while Resizing

ProjectMafia · #1 11-05-2009, 09:23 PM

Hello All

I have been around the net and back looking for help with my problem. I have basically taught myself basic CSS and HTML in about 4 days now and finally found the best program for me to use. Why is this relevant because I'm new and need easy to follow instructions!

www.ProjectMafia.com

I would like my whole page to center in your browser and slide left or right when you expand it until finally you minimize it so much the site hits the left wall and then stays absolute but the background, just black empty space goes away.

Originally I was able to use this code to center a picture how I wanted to but anything I placed on top would stay absolute and I could not adapt my code.

Code:

<p align="center"><img width:"90%"; margin:"auto"; min-width:"600px"; max-width:"2000px" border="0" src="homepageBG.jpg" width="1000" height="2000"></p>

I'm using CSS code here is just my container (which all of the site is in) and some min margin code I tried to use.

Code:

#Container {
	width: 100%;
	min-width: 950px;
	margin: 0px auto 0px auto;
	height: 0px;
	z-index: -5;
	position: static;
}
#Body {
	position: absolute;
	width: 1190px;
	height: 0px;
	background-color: #000000;
	z-index: -4;
}
#layoutSpacer {
  width: 700px; /* For IE >:( */
}

/* For Moz and the Boyz :) */
html>body #layoutSpacer {
  display: none;
}
</style>
</head>


<div id="Container" class="container" style="height: 1986px; left: -10px; top: -15px">
	<div id="layoutSpacer"></div>
	<body id="Body">

I was basically trying to make container the container for the whole site and have everything sit in it in hopes that it would move as one solid piece. I know I'm doing something wrong but hey I didn't know any of this 4 days ago

- The Admin

mordauk · #2 11-05-2009, 11:40 PM

There are a couple of things you need to change. First of all, I really don't see why you are using positioning for your main containers.

Do it like this:

Code:

<div id="container">
   <div id="main-content">

  </div>
  <div class="clear"></div>
</div>

Your CSS code looks like this:

Code:

body  {
   background: #000;
}
#container {
   margin: 0 auto;
   width: 960px;
}
#main-content   {
   padding: 10px;
}
.clear   {
    clear: both;
}

This will give you a page width of 960 pixels that automatically aligns center, regardless of browser size. There is a ten pixel padding around the main-content div to prevent content from floating right up next to the edge, and there is a clear element to ensure everything displays correctly.

ProjectMafia · #3 11-06-2009, 10:46 PM

Well that is not all my code. I used position absolute because all those dives are floating content layers for my graphics and links. I designed my whole page in Photoshop then chopped it up and pieced it back together on my site each in their own div and absolute so I could move them just right. I will try to adapt what you have given me but I fear if I used it, it would mess my whole page up here is all my code.

Code:

<title>PrøjectMafia™</title>
<style type="text/css">
#header {
	position: absolute;
	background-image: url('Top Layer.png');
	background-repeat: no-repeat;
	z-index: 1;
	padding: 0px;
}
#logo {
	position: absolute;
	z-index: 1;
	background-image: url('logo.png');
	background-repeat: no-repeat;
}
#ScriptLink {
	background-image: url('ScriptsLink.png');
	background-repeat: no-repeat;
	position: absolute;
	z-index: 10;
	background-attachment: inherit;
}
#TutorialLink {
	background-image: url('TutorialLink.png');
	background-repeat: no-repeat;
	position: absolute;
	z-index: 4;
}
#contentpage {
	position: absolute;
	z-index: auto;
}
#footer {
	position: absolute;
	z-index: auto;
}
#navbar {
	position: absolute;
	z-index: 1;
	background-image: url('navbar.png');
	background-repeat: no-repeat;
}
#BGlayout {
	position: absolute;
	z-index: -1;
	background-image: url('BG W Space.png');
	background-repeat: no-repeat;
	background-position: center center;
	overflow: auto;
	background-color: #000000;
	width: 1190px;
	height: 0px;
}
#WikiLink {
	background-image: url('WikiLink.png');
	background-repeat: no-repeat;
	position: absolute;
	z-index: 4;
}
#BlackmarketLink {
	background-image: url('BlackmarketLink.png');
	background-repeat: no-repeat;
	position: absolute;
	z-index: 2;
}
#TwoRectangles {
	background-repeat: no-repeat;
	position: absolute;
	z-index: 1;
	background-image: url('TwoRectangles.png');
}

.style1 {
	border-width: 0;
}

#Container {
	width: 100%;
	min-width: 950px;
	margin: 0px auto 0px auto;
	height: 0px;
	z-index: -5;
	position: static;
}
#Body {
	position: absolute;
	width: 1190px;
	height: 0px;
	background-color: #000000;
	z-index: -4;
}
#layoutSpacer {
  width: 700px; /* For IE >:( */
}

/* For Moz and the Boyz :) */
html>body #layoutSpacer {
  display: none;
}
#Construction {
	background-image: url('Underconstruction.png');
	background-repeat: no-repeat;
	position: absolute;
	z-index: 5;
}
.style2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: large;
	color: #FFFFFF;
}
#AdsenseSearch {
	padding: 5px;
	margin: 5px;
	position: absolute;
	z-index: 2;
}
</style>
</head>


<div id="Container" class="container" style="height: 1986px; left: -10px; top: -15px">
	<div id="layoutSpacer"></div>
	<body id="Body">
	
	<div id="BGlayout" align="center" style="left: 2px; top: 1px; width: 1191px; height: 2007px">
		</div>
	<div id="TwoRectangles" style="left: 112px; top: 325px; width: 925px; height: 215px">
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br />
&nbsp;&nbsp; <span class="style2">ProjectMafia is underconstruction but still 
		has content&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
		ProjectMafia is for Zynga's Facebook Mafia Wars<br />
&nbsp; Check out the scripts and tutorial links and stay tuned.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
		Search all things Mafia Wars in a new window<br />
		<br />
&nbsp;&nbsp;&nbsp; -Planned Content<br />
&nbsp;&nbsp;&nbsp; - More Guides for example how to approach Moscow<br />
&nbsp;&nbsp;&nbsp; - More Info and updates on the game itself<br />
&nbsp;&nbsp;&nbsp; - Black Market where you can buy Loot!</span></div>
	<div id="BlackmarketLink" style="left: 876px; top: 215px; width: 128px; height: 55px">
		</div>
	<div id="header" align="center" class="style1" style="left: 113px; top: -23px; width: 945px; height: 79px">
		</div>
	<div id="logo" class="style2" style="left: 114px; top: 124px; height: 45px; width: 330px">
		</div>
	<div id="navbar" style="left: 113px; top: 209px; width: 919px; height: 73px; z-index: 1" class="style1">
		</div>
	<div id="contentpage" style="left: 105px; top: 748px; width: 998px; height: 164px; z-index: 1">
		</div>
	<div id="footer" style="left: 301px; top: 928px; width: 647px; height: 37px; z-index: 1">
		Footer</div>
	<div id="TutorialLink" style="left: 224px; top: 218px; width: 121px; height: 51px; right: 826px;">
			<a href="http://projectmafia.com/wordpress/?page_id=18">
			<img alt="Mafia Wars - Tutorials @ Project Mafia" class="style1" height="49" src="TutorialLink.png" width="120" /></a></div>
	<div id="ScriptLink" style="left: 104px; top: 218px; width: 121px; height: 51px">
			<a href="http://projectmafia.com/wordpress/?page_id=3">
			<img id="Test" alt="Scripts and Scripting for Mafia Wars @ Project Mafia" class="style1" height="49" src="ScriptsLink.png" width="121" /></a></div>
	<div id="WikiLink" style="left: 344px; top: 218px; width: 121px; height: 51px">
			<a href="http://projectmafia.com/mediawiki/index.php?title=Main_Page">
			<img alt="Wikipedia for Project Mafia" class="style1" height="49" src="WikiLink.png" width="121" /></a></div>
	<div id="Construction" style="left: 329px; top: 9px; height: 44px; width: 480px">
		</div>
	<div id="AdsenseSearch" style="left: 663px; top: 396px; width: 286px; height: 83px">
	
<style type="text/css">
@import url(http://www.google.com/cse/api/branding.css);
#AdsenseBanner {
	position: absolute;
	z-index: 2;
}
</style>
<div class="cse-branding-bottom" style="background-color:#000000;color:#FFFFFF">
  <div class="cse-branding-form">
    <form action="http://www.google.com/cse" id="cse-search-box" target="_blank">
      <div>
        <input type="hidden" name="cx" value="partner-pub****:uoj3w0-jny0" />
        <input type="hidden" name="ie" value="ISO-8859-1" />
        <input type="text" name="q" size="31" />
        <input type="submit" name="sa" value="Search" />
      </div>
    </form>
  </div>
  <div class="cse-branding-logo">
    <img src="http://www.google.com/images/poweredby_transparent/poweredby_000000.gif" alt="Google" />
  </div>
  <div class="cse-branding-text">
    Custom Search
  </div>
</div>
</div>
	<div id="AdsenseBanner" style="left: 528px; top: 122px; height: 64px; width: 488px">
	
<script type="text/javascript">
google_ad_client = "pub-****";
/* 468x60, created 11/6/09 Homepage Banner */
google_ad_slot = "7084141055";
google_ad_width = 468;
google_ad_height = 60;
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
	</div>
</div>
</body>

</html>

ProjectMafia · #4 11-06-2009, 10:56 PM

I used your code and there was no change whatsoever to the webpage. Funny you can add random stuff and nothing happens. It would be best if someone could see what I did in my posted code above. Like I said I didn't even know what CSS was until 3 days ago so just giving me template code might confuse me even more.

mordauk · #5 11-07-2009, 12:34 AM

Did you try adding my code to yours, or mine by itself? Because, unless I misunderstand what you are really trying to do, the code I pasted will definitely give you a page that is 960px wide that will always sit in the middle of the page, with a content area of 940px inside of it.

Try this by itself and look at the results:

Code:

body  {
   background: #000;
}
#container {
   margin: 0 auto;
   width: 960px;
   background: #fff;
}
#main-content   {
   padding: 10px;
   height: 500px;
}
.clear   {
    clear: both;
}

And your html code:

Code:

<div id="container">
   <div id="main-content">

  </div>
  <div class="clear"></div>
</div>

ProjectMafia · #6 11-07-2009, 01:02 AM

I put the code in just like you typed it and nothing changed

Eye for Video · #7 11-07-2009, 10:17 AM

I agree with Mordauk, don't use positioning for your main containing elements. The rules for using positioning are not as straight forward as they may seem.
The thing missing from your positioning is that unless the parent element also has a declared position, the child will do 1 of 2 things.
If position:relative, it will position as desired but space will be left as though that element was still in the natural flow. So you may move the 500 X 100 element down and over, but a 500 X 100 space will be left, as though it was still there.
If position:absolute, child is positioned relative to browser window and that position does not change even if window contracts or expands.
So if you are infact using:

Code:

#Body {
	position: absolute;

The body will always align with the left side and not be centered, since it has no parent.
But, I'm not sure how you are handling #Body because it's spelled with a cap and the actual page <body> opening tag is missing anyway, but it does have the closing </body>. So check spelling and opening tag.
My suggestion, follow the instructions above in a new html doc with no content, just use a background color and declare a width & height for your main contanining divs. Get all your positioning correct for various monitor widths before adding any content. I think you'll find that method much easier than trying to correct all the stuff you have there now.
Here's a sample to center a main container

Code:

body {
	background-color: #320d07;	
	border: 0px;
	margin: 0px;
	padding: 0px;	
}
#container {
	width: 1000px;
/*	height: 550px; */
	background-color: #7ac0f0; 
/*	background-image:url(../images/10x.jpg);  */
	background-repeat:repeat;
	border:none;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
}

Good luck,
EfV

mordauk · #8 11-07-2009, 11:16 AM

What EFV said is good advice. I know it can be daunting starting with a blank slate again, but in this case doing that rather than trying to fix large amounts of code will be easier.

Once you have the basics working using our example codes, begin filling in your own content and graphics.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)