Problem with zoom in/out

momo19 · 04-14-2012, 07:01 AM

Hi everyone! I have a problem when i zoom in or zoom out, elements of my page are misplaced all over the page.
That's how it looks without zoom: http://www.freeimagehosting.net/zis1u
And that's how it looks when i zoom in: http://www.freeimagehosting.net/u9xi1

my code:

Code:

<!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" />
<link rel="stylesheet" type="text/css" media="screen" href="styleHome.css" />
<title>Catering Services</title>
</head>

<body>
	<div id="header">
    <h1>Catering in Malaysia</h1>
    	<div id="logo">
    		<a href="index.html"><img src="Logo3.png"></img></a>
          </div>
          
         <div id="welcome"><img src="wlc.png"/></div>
    </div>
    
    <div id="content">
    
        <div id="home_pic">
        <img src="home_pic.jpg" />
        </div>
    	
        <div id="main">
        
        <p>Whether you are planning for a Corporate Event, a Celebration or a Party, we get the finer details right to ensure that your
        event is a memorable one.
		For a simple meal with your family and friends, or a treat for your colleagues, step into our Restaurant for a satisfying and fabulous meal. <strong><font color="red">Mehron Catering</font></strong> is your perfect choice.</p>
        </div>
        
        <div id="navigation"> 
        	<li><a href="index.html">Home</a></li>
            <li><a href="AboutUs.html">About us</a></li>
        	<li><a href="Catering.html">Catering</a></li>
        	<li><a href="menu.html">Our Menus</a></li>
        	<li><a href="contact_us.html">Contact us</a></li>
            
        </div>
       
	</div>
    
    <div id="footer">
    <p><font color="#CC0000">Planning for an Event or a Function?</font></br>
	We would love to hear from you.  Call us at 03-5555442 / 012-1144331 or <a href= "mailto:catering@mehroncatering.com">send </a>us an email</p>
    
    <img src="halal_lg.gif.png" />
    </div>
    
</body>
</html>

CSS:

Code:

@charset "utf-8";
/* CSS Document */

body {
	background-color: rgb(255,245,230);
	margin-top:auto;
}

#logo {
	position:absolute;
	top:3px;
	float:left;
	left:17%;
}

#welcome {
	position:absolute;
	top:3px;
	left: 36%;
}

#navigation {
	position:absolute;
	top:180px;
	margin-left:18%;
	margin-right:18%;
}
#header h1 {
	display:none;
}
#navigation li {
	display:block;
	margin-right:20px;
	float:left;
	width:150px;
}
#navigation a {
	background-image:url(Button1.png);
	display:block;
	width:150px;
	height:50px;
	text-align:center;
	line-height:50px;
	color: #fff;
	text-decoration:none;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:22px;
}


#navigation a:hover {
	background-position:left bottom;
}

#navigation a:active {
	background-position: left center;
}

#home_pic{
	display:inline;
	position:absolute;
	float:right;
	top:40%;
	left:43%;
	width:auto;
	border-style:ridge;
	border-width:5px;
	border-color:#009;
}

#main {
	position:absolute;
	display:block;
	font-family:Calibri;
	font-size:19px;
	top:39%;
	width:305px;
	height:auto;
	margin-left:250px;
	margin-right:100px;
	float:left;
}

#footer p{
	display:block;
	margin-top:750px;
	text-align:center;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:18px;
}

#footer img {
	position:absolute;
	margin-left:950px;
}

Any advices, comrades?

P.S. If you think that my code is **** - no need to say it. I know it. I am a beginner.

felgall · 04-15-2012, 12:00 AM

The problem is all those position:absolute references that position content relative to their container which since you don't have them inside position:relative elements is the viewport itself. So they stay positioned the same irrespective of zoom.

You should only use position:absolute inside position:relative except for hidden elements that will be made visible and moved about with JavaScript.

The easiest way to set out a web page where you don't need to overlap elements is to use widths and then float the elements left or right.