Thread: Odd left values

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

    Join Date
    Jul 2010
    Location
    DK
    Posts
    3
    Rep Power
    0

    Odd left values


    Hi!

    The odd thing is in the textdiv layer. I have to put the value 20px to get space between add1 and textdiv and 30px between textdiv and add2 to get the same space as the previous space. I don't understand why as the layers are relative to each other.

    Can someone please explain what is going on?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Svendborg-info</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style>
    body{
        background-image: url(svg-info-menu-top.jpg);
    	background-repeat: repeat-x;
    	width:100%;
    	text-align:center; /* centers in ei8 */
    }
    #bgTopDiv{
    	background-image: url(svg-info-upper-left.jpg);
    	position: absolute;
    	left: 0px;
    	width: 321px;
    	height: 248px;
    	margin:0;
    	padding:0;
    	top: 0px;
    }
    #addheader {
        width: 220px;
        height: 31px;
        padding-top: 0px;
        padding-bottom: 0px;
        position: relative;
        top: 0px;
        left: 0px;
        background:white;
        text-align:center;
    	z-index:1;
    	margin:0;
    	background-image: url(top.gif); 
    }
    #addfooter {
    	bottom: 0px;
    	left: 0px;
    	text-align: center;
    	width: 220px;
    	position: relative;
    	height: 31px;
    	background:white;
    	padding-top: 0px;
    	z-index:1;
    	margin:0;
    	background-image: url(bund.gif);
    }
    #add2 {
    	position:relative;
    	text-align:center; 
    	height: auto; 
    	width:220px; 
    	margin:0px;
    	overflow: visible; 
    	z-index:1; 
    	top: 10px; 
    	float:left;
    	left:30px;
    	background-image:  url(sider.gif); 
    }
    #add1 {
    	position:relative;
    	text-align:center; 
    	height: auto; 
    	width:220px; 
    	margin:0px;
    	overflow: visible; 
    	z-index:1; 
    	left: 10px; 
    	top: 10px; 
    	float:left;
    	background-image: url(sider.gif); 
    }
    #addcontent {
    	text-align: left;
    	width: 180px;
    	position: relative;
    	background:white;
    	padding: 0px;
    	overflow: visible;
    	height: 100%;
    	z-index:1;
    	margin:auto;
    	border:0px solid black;
    }
    
    p {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 16px;
    	color: #666666;
    	font-weight: normal;
    	font-style: normal;
    	line-height: normal;
    	font-variant: normal;
    	text-transform: none;
    	text-decoration: none;
    	margin-top: 10px;
    	padding-top: 0px;
    }
    
    
    .menu {
    	position: relative;
    	height: auto;
    	width: auto;
    	left: 883px;
    	top: 37px;
    	margin: 20px;
    	padding: 0px;
    	float: left;
    	border-top-style: none;
    	border-right-style: none;
    	border-bottom-style: none;
    	border-left-style: none;
    }
    
    h1 {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 24px;
    	font-style: normal;
    	line-height: normal;
    	font-weight: normal;
    	font-variant: normal;
    	text-transform: none;
    	color: #333333;
    	text-decoration: none;
    	padding: 0px;
    	margin: 0px;
    }
    #textdiv {
    	position: relative;
    	top: 20px;
    	margin:0px;
    	padding: 10px;
    	width: 709px;
    	height: 257px;
    	z-index:1;
    	background-color: #F3F3F3;
    	text-align: left;
    	float:left;
    	left: 20;
    }
    #content {
    	position:absolute;
    	text-align:center; 
    	height: auto; 
    	width:1260px; 
    	overflow: visible; 
    	z-index:1; 
    	left: 80px; 
    	top: 300px; 
    
    }
    
    #Layer2 {
    	position:absolute;
    	width:216px;
    	left: 1151px;
    	top: 86px;}
    .midt {
    	background-image:  url(sider.gif);
    	border: 1px none #000000;
    	background-position:left center;
    }
    .bund {
    	background-image:  url(bund.gif);
    	background-position:left bottom;
    	background-repeat: no-repeat;
    	}
    .top {
    	background-image:  url(top.gif);
    	background-position:left top;
    	background-repeat: no-repeat;
    }
    p {
    padding-left:20;
    padding-right:20;
    margin:0;
    }
    </style>
    </head>
    
    <body>
        
    <div id="bgTopDiv"> </div>
    <div id="Layer3" style="position:absolute; width:675px; height:119px; z-index:4; left: 329px; top: 73px;"> 
      <img src="home.jpg" width="104" height="104"> <a href="mailto:"><img src="kontakt.jpg" width="104" height="104" border="0" title="Kontakt"></a> 
      <a href="links.htm"><img src="links.jpg" width="104" height="104" border="0" title="Links"></a> 
      <img src="home.jpg" width="104" height="104"><img src="home.jpg" width="104" height="104"> 
      <a href="index.htm"><img src="home.jpg" width="104" height="104" border="0" title="Forside"></a> 
    </div>
    
    <div id="Layer2"> 
      <div class="top">&nbsp;</div>
         <div class="midt">
            <p>fwqlkefjhwlkef lqkwuefh qwlieufh qlwidkujfh wleiuf lwkefh qlwekuf </p>
         </div>
    <div class="bund">&nbsp;</div>
    
    
    <div id="content">
    
    <div id="add1"> 
      <div id="addheader"></div>
      	
      <div id="addcontent"> 
        <div align="center"> 
    khkjhk kljhlkj pij Šo Šlk Šlk ŠlkŠlk 
        </div>
      </div>
    	
      <div id="addfooter"></div> 
    </div>
      
    	<div id="textdiv"> 
    	  <h1 align="left">Headline</h1>
    	  <p align="left">cont entjhgjh gjgjjh kjhk haksdhakshd aksdhaks daksdaksh 
    		daksd haksdh aksd haksd haksjdhaksdha kshda ksdha ksjdh aksd haksdhcont entjhgjh 
    		gjgjjh kjhk haksdhakshd aksdhaks daksdaksh daksd haksdh aksd haksd haksjdhaksdha 
    		kshda ksdha ksjdh aksd haksdhcont entjhgjh gjgjjh kjhk haksdhakshd aksdhaks 
    		cont entjhgjh gjgjjh kjhk haksdhakshd aksdhaks daksdaksh daksd haksdh aksd 
    		haksd haksjdhaksdha kshda ksd p end skjdfsk skdjfh ksdjfh woief soids flsidf </p>
    	</div>
      
    	<div id="add2"> 
    	  <div id="addheader"></div>
    		
    	  <div id="addcontent"> cont entjhgjh gjgjjh kjhk haksdhakshd aksdhaks daksdaksh 
    		daksd haksdh aksd haksd haksjdhaksdha kshda ksdha ksjdh aksd haksdhcont entjhgjh 
    		gjgjjh kjhk haksdhakshd aksdhaks daksdaksh daksd haksdh aksd haksd haksjdhaksdha 
    		kshda ksdha ksjdh aksd haksdhcont entjhgjh gjgjjh kjhk haksdhakshd aksdhaks 
    		cont entjhgjh gjgjjh kjhk haksdhakshd aksdhaks daksdaksh daksd haksdh aksd 
    		haksd haksjdhaksdha kshda ksd p end skjdfsk skdjfh ksdjfh woief soids flsidf 
    	  </div>
    		
    	  <div id="addfooter"></div> 
    	</div>
    </div>
      
    
    
    </div>
    <div id="Layer1" style="position:absolute; width:709px; height:46px; z-index:2; left: 259px; top: 851px;"> 
      <div align="center">page footer</div>
    </div>
    
    </body>
    </html>
    Last edited by Kravvitz; March 28th, 2013 at 09:04 AM. Reason: added [code] tags

IMN logo majestic logo threadwatch logo seochat tools logo