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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem with zoom in/out

    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.

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,462
    Thanks
    0
    Thanked 633 Times in 623 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

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