#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2012
    Posts
    1
    Rep Power
    0

    My div tag move their position when I zoom in/out


    ok

    in my site I have set the header and the menu as absolute because I want the header to go over the container and the menu to go over the header

    but my problem is that when I zoom in or out my header and menu move position to the left

    is there a way to make them not move their position but still have them one on top of the other

    this is my site for now (it's my course at uni and I have to include all those pages in it) http://padrewa.comeze.com

    this is my css code for:

    Code:
     body {
        background-color: #FFF;
        }
    
        #wrapper {
        background-color: #FFF;
        }
    
    
        #header {
     * border:#999 0px solid;
       position: absolute; 
       opacity: 0.50; filter:alpha(opacity=50);
        }
    
    
        #menu {
    *  border:#999 0px solid;
       position:absolute;
       padding-top:80px;
       padding-left:180px;
        }
    
    
         #content {
        border:#999 0px solid;
        background-color:#FFFF99;
        width:1050px;
        padding-top:110px;
        padding-bottom:70px;
        margin-left: auto;
        margin-right: auto;
        }
    
    
         #footer {
        border:#999 0px solid;
        background-color:#FFFF99;
        width:1050px;
        margin-left: auto;
        margin-right: auto;
    
        }

    and this is my header template I included it in my page using php:
    Code:
    <div id="header"><table>
    <tr>
    <td><a href="index.php"><img src="style/logo.jpg" alt="Logo" height="100" /></a></td>
    </tr>
    </table>
    </div>
    <link rel="stylesheet" href="style/style.css" type="text/css" media="screen" />
    
    
    <div id="menu" >
    <a href="index.php"><b>Home Page</b></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="gallery.php"><b>Gallery</b></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="biography.php"><b>Biography</b></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="draw.php"><b>Draw</b></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="write.php"><b>Write</b></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="contact.php"><b>Contact Me</b></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    
    </div>
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2012
    Posts
    3
    Rep Power
    0

    Give the absolute style to the top div element


    If you are using absolute for 1 element, you should give relative to the appropriate container element.

    If you are using within header container means menu {
    position: absolute;
    }

    You should give header {
    position: relative;
    width: xxxpx;
    }

    Hope it will help.

    Thanks
    - - -
    Mani

IMN logo majestic logo threadwatch logo seochat tools logo