page pulls apart when zoomed in

ZacHarney · 03-18-2010, 04:25 PM

hi, i am creating a website for my mum's poetry and stuff, and i am fairly new to css however i do know the basics for css & html.
on my laptop when previewing the site everything looks normal (i think it's a 15 something inch screen)
but when i view on a computer with a different size screen all my divs pull out of place. same with when i zoom the page with ctrl + and ctrl - the css style sheet code is:

Code:

@charset "utf-8";
/* CSS Document 
created by Isaac Harney
zacharney@ymail.com */
body { color: #BAA28A; font-size: 11px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-weight: normal; background-color: transparent; }
div.container {
	position:absolute;
	height:643px;
	width:800px;
	left:231px;
	top:0px;
	z-index:104;
}
div.box {
	position:absolute;
	left:649px;
	top:509px;
	width:142px;
	z-index:102;
	overflow:hidden;
	border:ridge;
	border-color:#8e7d6a;
	height: 212px;
}
div.box_contents {
	background-color:transparent;
	height:163px;
	position:relative;
	width:132px;
	z-index:101;
	padding:2px;
}
div.box_background {
	background-color:black;
	opacity:0.18;
	filter:alpha(opacity=18);
	position:absolute;
	left:0px;
	top:0px;
	width:135px;
	z-index:100;
	height: 205px;
	padding-top:3px;
	padding-bottom:3px;
	padding-left:3px;
	padding-right:3px;
}
#apDiv1 {
	position:absolute;
	left:620px;
	top:739px;
	width:144px;
	height:64px;
	z-index:105;
	overflow:hidden;
	float:right;
/* end of script */

and the html code on the homepage is:

Code:

<html>
<head>
<title>Ponderings | Poetry to think about &raquo; Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
<!--
}
.container .box div .box_background {
	color: #FFF;
}
body {
	background-color: #baa38a;
	background-image: url(images/body-bg1.jpg);
	font-size: 14px;
	color: #fff;
	text-align: center;
	background-repeat: repeat-y;
	background-position: center 0;
	margin: 0;
	padding: 0; 
	text-align: center;
	border-width: 0; 
	}

-->
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div class="container">

<div class="box">
  <div class="box_contents";>
  <div class="box_background">

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ligula massa, eget dignissim velit. Donec at lorem tellus. Ut ultrices vehicula nulla, non tincidunt metus convallis ut. Donec interdum ante eu enim dictum accumsan.
</div></div>
</div>
<!-- Save for Web Slices (Untitled-1.psd) -->
<div id="apDiv1"><br />
<a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-nd/3.0/88x31.png"  onMouseOver="This work is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Unported License. "/></a></div>
<table id="Table_01" width="801" height="1318" border="0" cellpadding="0" cellspacing="0">
<tr>
		<td colspan="11">
			<img src="images/header.jpg" width="799" height="299" alt=""></td>
		<td rowspan="4">
			<img src="images/back_right.gif" width="1" height="384" alt=""></td>

<td>
			<img src="images/spacer.gif" width="1" height="299" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/home.gif" width="195" height="83" alt="home"></td>
		<td>
			<img src="images/home_04.gif" width="1" height="83" alt=""></td>
		<td>

			<img src="images/poems.gif" width="195" height="83" alt="poems"></td>
		<td>
			<img src="images/about.gif" width="193" height="83" alt="about"></td>
		<td colspan="4">
			<img src="images/contact.gif" width="196" height="83" alt="contact"></td>
		<td colspan="2" rowspan="3">
			<img src="images/home_08.gif" width="19" height="85" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="83" alt=""></td>

	</tr>
	<tr>
		<td>
			<img src="images/home-10.gif" width="1" height="1" alt="home"></td>
		<td colspan="5" rowspan="6">
			<img src="images/main_body.gif" width="640" height="729" alt=""></td>
		<td colspan="3">
			<img src="images/contact-12.gif" width="139" height="1" alt="contact"></td>
		<td>

			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
	</tr>
	<tr>
		<td rowspan="6">
			<img src="images/home_12.gif" width="1" height="934" alt=""></td>
		<td colspan="3">
			<img src="images/home_13.gif" width="139" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt=""></td>

	</tr>
	<tr>
		<td colspan="2">
			<img src="images/home_14.gif" width="8" height="113" alt=""></td>
		<td colspan="4">
			<img src="images/display_pic.gif" width="151" height="113" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="113" alt=""></td>
	</tr>

	<tr>
		<td rowspan="3">
			<img src="images/home_16.gif" width="2" height="614" alt=""></td>
		<td colspan="4" rowspan="2">
			<img src="images/sidebar.gif" width="156" height="612" alt=""></td>
		<td>
			<img src="images/display_pic-19.gif" width="1" height="7" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="7" alt=""></td>

	</tr>
	<tr>
		<td rowspan="3">
			<img src="images/back_right-20.gif" width="1" height="813" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="605" alt=""></td>
	</tr>
	<tr>
		<td colspan="4">

			<img src="images/home_20.gif" width="156" height="2" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="2" alt=""></td>
	</tr>
	<tr>
		<td colspan="9">
			<img src="images/footer.png" width="796" height="206" alt=""></td>
		<td>
			<img src="images/home_22.gif" width="2" height="206" alt=""></td>

		<td>
			<img src="images/spacer.gif" width="1" height="206" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="194" height="1" alt=""></td>
		<td>

			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="195" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="193" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="57" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="2" height="1" alt=""></td>

		<td>
			<img src="images/spacer.gif" width="6" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="131" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="17" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="2" height="1" alt=""></td>
		<td>

			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
		<td></td>
	</tr>
</table>
<!-- End Save for Web Slices -->
</div> 
</body>
</html>

you can view the website at http://www.ponderingspoetry.com/home.htm

you help is appreciated.

thanks,
Zac Harney

Excavator · 03-18-2010, 06:07 PM

Hello ZacHarney,
First thing you need is a DocType - see the link in my sig about DocTypes. I would suggest an HTML 4.01 Strict.

Then, your #container is set to be 643px high but your content is taller than that. Just remove that height and let #container behave naturally, which is to expand to contain whatever you put in it.
(you may need to clear floats in #container and you cannot put something in it that is wider than the 800px width you have it set to)

All that absolute positioning is not really needed either. See the pitfalls of absolute positioning.

You should also check out the other links in my sig. You should know that tables are not for layout and how validating can help you.

A quick fix would be to make .box relative so your ap elements will follow it instead of the body of your document. Try this -

Code:

div.box {
	position:relative;
	left:649px;
	top:509px;
	width:142px;
	z-index:102;
	overflow:hidden;
	border:ridge;
	border-color:#8e7d6a;
	height: 212px;
}

You will probably need to adjust your ap elements positions.

ZacHarney · 03-18-2010, 10:20 PM

hey excavator,
thanks for the quick response!!!
i'm gonna go change that stuff now and hope it works.
also my .box div only contains my lorem ipsum which is where in future i will be inputing a sample of about page!!
again, thanks
Zac Harney.
(p.s. will let you know how it goes.)