issues with site resizing

**timski08** · Jun 2, 2011 15:37

hi there guys i am trying to design this site that will retain its position ie when you expand the browser window the site will remain centred. The issue i am experiencing at the moment is that the page seems to move right if i expand it, i was wondering if there is a javascript or css fix to keep my site centred, so that if you have it on full screen or custom its stays in the same place.

site :
=====

http://test-bench.99k.org

Html code:
=======

Code HTML4Strict:

<!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>
<link rel="stylesheet" type="text/css" href="style.css"  />
</head>
 
<body>
<div id="top">
<img src="http://www.sitepoint.com/forums/images/mfoam_logo.png" width="312" height="96" alt="mfoam logo" />
</div>
<div id="left_content">
test text
</div>
<div id="right_content">
test right text
</div>
 
<div id="left__bottom_content">
left bottom content!
flresent Opera (version 10.5 onward), Safari (version 5 onward) and Chrome (version 5 onward) all support the individual border-*-radius properties and the border-radius shorthand property as natively defined in the current W3C Specification (although there are still outstanding bugs on issues such as border style transitions, using percentages for lengths, etc.).
 
    Mozilla Firefox (version 1.0 onward) supports border-radius with the -moz- prefix, although there are some discrepancies between the Mozilla implementation and the current W3C specification (see below).
 
 
</div>
<div id="center_content">
  <p>At p</p>
  <p>flresent Opera (version 10.5 onward), Safari (version 5 onward) and Chrome (version 5 onward) all support the individual border-*-radius properties and the border-radius shorthand property as natively defined in the current W3C Specification (although there are still outstanding bugs on issues such as border style transitions, using percentages for lengths, etc.).
 
    Mozilla Firefox (version 1.0 onward) supports border-radius with the -moz- prefix, although there are some discrepancies between the Mozilla implementation and the current W3C specification (see below).
 
    Update:Recent Firefox nightly versions support border-radius without the -moz- prefix.
 
    Safari and Chrome (and other webkit based browsers) have supported border-radius with the -webkit- prefix since version 3 (no longer needed from version 5 onward), although again with some discrepancies from the current specification (see this article for further details of how older versions of Webkit handle border-radius).
 
    Even Microsoft have promised, and demonstrated in their recent preview release, support for border-radius from Internet Explorer 9 onward (without prefix). </p>
</div>
<br />
<div id="footer">
text for footer
</div>
</body>
</html>

Css code:
=======

Code CSS:

@charset "UTF-8";
/* CSS Document */
 
body,td,th {
	font-family: Eurostile;
	font-size: 12px;
}
body {
	background-image: url(images/FR_Web_Background.jpg);
}
#top { 
	padding: 10px 10px 3px 10px;
	 width: 600	px;
	 margin:20px auto;
	 background: #fff;
	 -moz-border-radius: 1em 1em 1em 1em;
	border-radius: 1em 1em 1em 1em;
	   }
#left_content { 
	padding: 100px 30px 3px 30px;
	position:absolute;
 	top: 130px;
	 left: 0;
	 width: 200px;
	 margin: 10px;
	 background: #fff;
	 -moz-border-radius: 1em 1em 1em 1em;
	border-radius: 1em 1em 1em 1em;
	   }
#left__bottom_content { 
	padding: 100px 30px 30px 30px;
	position:absolute;
 	top: 247px;
	 left: 0px;
	 width: 200px;
	 margin: 10px;
	 background: #fff;
	 -moz-border-radius: 1em 1em 1em 1em;
	border-radius: 1em 1em 1em 1em;
	   }
#center_content {
	padding: 50px 30px 30px 30px;
	position:absolute;
 	top: 257px;
	right: 10px;
	width: 858px;
	height: 200px;
	float: right;
	margin: auto;
	background: #fff;
	-moz-border-radius: 1em 1em 1em 1em;
	border-radius: 1em 1em 1em 1em;
	z-index: auto;
	   }
#right_content { 
	padding: 100px 30px 3px 30px;
	position:absolute;
 	top: 130px;
	right: 0;
	width: 860px;
	margin: 10px;
	background: #fff;
	-moz-border-radius: 1em 1em 1em 1em;
	border-radius: 1em 1em 1em 1em;
	   }
#footer { 
	padding: 30px 30px 3px 30px;
	position:absolute;
 	top: 60fetch0px;
	 left: 0;
	 width: 1155px;
	 margin: 10px;
	 background: #fff;
	 -moz-border-radius: 1em 1em 1em 1em;
	border-radius: 1em 1em 1em 1em;
}

**ralph.m** · Jun 2, 2011 17:15

Your link isn't working, but the trick here is to wrap the site content in a div, say 960px wide, and then apply auto left and right margins. E.g.

Code:

<div class="wrapper">

</div>

CSS

Code:

.wrapper {width: 960px; margin: 0 auto;}

EDIT: OK, fixed the link. So yes, place a wrapper around all the other code and decide on a width.

**ralph.m** · Jun 2, 2011 17:25

Looking further at your site, I see that you have placed each item with position: absolute. That is not a good way to lay out a site, as it's very inflexible. So, remove all of those position:absolutes. Then, when you want elements to sit side by side, give them an appropriate width and float them. So, elements to the left, set to float: left, and those on the right set to float: right. Since you have two elements left and two right, the best strategy is to wrap the left item in a div and float that left, and wrap the right items in another div and float that right. Then you don't need to float the inner elements, as they will just move with their container.

**timski08** · Jun 6, 2011 08:20

ok i did the float left to left and right to right as you advised, i did however not get the bit about putting the left in a div and right in a div all the containers are already div's very confused... what i wanted to achieve was a centred layout where when the user increases or decreases the browser window the boxes move as the browser window resizes. as i am new at this i need to get to grips with this bit

thanks for all the help ;-)

**deathshadow60** · Jun 6, 2011 08:50

I think you've failed to grasp how a LOT of those CSS elements even work -- and you've got some classic early blunders. (ones we've all made starting out)

Just going through the CSS:

Code:

body,td,th {
	font-family: Eurostile;
	font-size: 12px;
}

No fallback family for your fonts on a font that's not even available on most people's machines... and pixels should NEVER be used on a font declaration for BODY, especially an absurdly undersized 12px; effectively useless for large font/120dpi users like myself -- made even worse by it defaulting to a serif font here.

Code:

#top { 
	padding: 10px 10px 3px 10px;
	 width: 600px auto;
	 margin:20px;
	 float: inherit;
	 background: #fff;
	 -moz-border-radius: 1em 1em 1em 1em;
	border-radius: 1em 1em 1em 1em;
	   }

I would NEVER declare inherit on a float, since the parent element isn't recieving any that doesn't even make sense, and there is no such thing as BOTH 600 and auto on width... did you mean margin? I'd also advise that if you're gonna use the CSS3 properties, you include the -webkit- prefix version too... and if all four corners are getting the same value you only need to say it once! Also a good rule of thumb is to never declare padding or border the same time as width.

Code:

#left_content { 
	padding: 100px 30px 3px 30px;
	float: left;
 	top: 130px;
	 left: 0px;
	 width: 200px;
	 margin: 10px;
	 background: #fff;
	 -moz-border-radius: 1em 1em 1em 1em;
	border-radius: 1em 1em 1em 1em;
}

Still have the top/left which may or may not be ignored, padding+width is just asking for it to break... and margin + float could cause IE rendering issues without setting display:inline.

It's kind-of lather, rinse, repeat from there. Do you have a picture of what it is you are trying to accomplish for a layout?

... and when you say "boxes move" do you mean move, or resize? The former makes no sense unless you're talking something like a McSwitchy layout... if the latter then you need to STOP declaring widths on everything and only declare it on SOME elements.

Though in general that you are worrying about layout before you have semantic markup of the full content (or a reasonable facsimile) could be contributing to your layout woes. Content should dictate layout, not the other way around.

This is evident in your class names saying where/how things should look, instead of describing what they ARE. I'd also suggest switching to writing modern STRICT code, instead of being in "transition" from 1997 to 1998.

**ralph.m** · Jun 6, 2011 08:59

This is a rough tidy up and more what I was talking about. (I left your IDs as they were, though I wouldn't use them myself.)

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<title>mfoam</title>
<style type="text/css" media="all">
body {
	font: 75% Eurostile, sans-serif;
	background: #5a74a5 url(http://test-bench.99k.org/images/FR_Web_Background.jpg) repeat-x 50% 0;
}

#top, #left_content, #left_bottom_content, #center_content, #right_content, #footer {
	background: #fff;
	-moz-border-radius: 1em;
	border-radius: 1em;
	padding: 10px;
	margin: 0 0 10px;
}

.wrapper {width: 940px; margin: 0 auto; overflow: hidden; margin-top: 20px;}
.content-left {width:200px; float: left;}
.content-right {width: 730px; float: right;}
#footer {clear:both;}
</style>
</head>

<body>
<div class="wrapper">
	<div id="top">
		<img src="http://test-bench.99k.org/images/mfoam_logo.png" width="312" height="96" alt="mfoam logo">
	</div>
	<div class="content-left">
		<div id="left_content">
		<p>test text</p>
		</div>
		
		<div id="left_bottom_content">
		<p>left bottom content!</p>
		<p>flresent Opera (version 10.5 onward), Safari (version 5 onward) and Chrome (version 5 onward) all support the individual border-*-radius properties and the border-radius shorthand property as natively defined in the current W3C Specification (although there are still outstanding bugs on issues such as border style transitions, using percentages for lengths, etc.).</p>
		<p>Mozilla Firefox (version 1.0 onward) supports border-radius with the -moz- prefix, although there are some discrepancies between the Mozilla implementation and the current W3C specification (see below).</p>
		</div>
	</div><!-- end content-left -->
	<div class="content-right">
		<div id="right_content">
			<p>test right text</p>
		</div>
		<div id="center_content">
		  	<p>At p</p>
		  	<p>flresent Opera (version 10.5 onward), Safari (version 5 onward) and Chrome (version 5 onward) all support the individual border-*-radius properties and the border-radius shorthand property as natively defined in the current W3C Specification (although there are still outstanding bugs on issues such as border style transitions, using percentages for lengths, etc.).</p>
			<p>Mozilla Firefox (version 1.0 onward) supports border-radius with the -moz- prefix, although there are some discrepancies between the Mozilla implementation and the current W3C specification (see below).</p>
			<p>Update:Recent Firefox nightly versions support border-radius without the -moz- prefix.</p>
			<p>Safari and Chrome (and other webkit based browsers) have supported border-radius with the -webkit- prefix since version 3 (no longer needed from version 5 onward), although again with some discrepancies from the current specification (see this article for further details of how older versions of Webkit handle border-radius).</p>
			<p>Even Microsoft have promised, and demonstrated in their recent preview release, support for border-radius from Internet Explorer 9 onward (without prefix).</p>
		</div>
	</div><!-- end right-content -->
	<div id="footer">
		<p>text for footer</p>
	</div>
</div><!-- end wrapper -->
</body>
</html>

Save that code as a .html file, open it in your browser, and see if it's more like what you want.

**deathshadow60** · Jun 6, 2011 10:03

I went a bit further than Ralph did...

http://www.cutcodedown.com/for_other.../template.html

as with all my examples the directory:

Index of /for_others/timski08

is unlocked for easy access to it's bits and pieces.

I took a good deal of liberties in the code adding a few div to clean up the behaviors -- meaning it will work just fine all the way back to IE 5.5 (only thing it loses are of course the CSS3 bits). I cleaned up that background image and the logo image into more reasonable pngs... the latter losing that alpha transparency for nothing stuff, the former recreated so that the jpeg artifacting (resulting in ugly striping) is nowhere to be seen.

It re-uses the same class for most of the subsections since, well... they all are pretty much the same thing. Each column also gets it's own div to simplify making columns. I fixed the width of the side columns in EM so that large font/120dpi users get wider fonts, and I added min-width and max-width code so that you don't have excessively wide and difficult to read body text.

The logo is changed into a H1, so that you have a proper heading for all your various subsections H2's (assuming you are going to have a logical document structure). I styled it so that it resembles the logo for people browsing with images disabled and the presence of text makes it useful for screen readers and search engines -- I then use a "gilder-levin image replacement" over it to apply the image. Said image as already mentioned lost it's alpha transparency to reduce it's size by a factor of ten and to make it compatible with the gilder-levin method of building a page.

Though admittedly I'm guessing wildly based on what you had.

**ralph.m** · Jun 6, 2011 16:39

Nice work, Jason. I was too lazy to go that far.

User Tag List

Thread: issues with site resizing

Thread Tools

Display

issues with site resizing

Bookmarks

Bookmarks

Posting Permissions