Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Mar 2010
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question page pulls apart when zoomed in

    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

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    ZacHarney (03-23-2010)

  • #3
    New to the CF scene
    Join Date
    Mar 2010
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thumbs up

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


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •