CSS Lücke am oberen Rand und überlapende Objekte

nieselfriem

Hallo ich habe folgenden Code aus einem Buch abgetippelt
HTML:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>  
    <title>test</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <script type="text/javascript">  /* <![CDATA[ */    /* ]]> */ </script>
    <link rel="stylesheet" type="text/css" href="css/styles.css" media="screen"/>
  </head>
  <body>	
    <div id="header">		



Kopf</p>	
    </div>	
    <div id="navigation">		



Navigation</p>
     </div>	


    <div id="content">



Inhalt</p>	
    </div>
    <div id="features">



Features</p>	
    </div>
  </body>
</html>

Alles anzeigen

CSS:

Code

html, body{	
background-color: white;	
margin: 0px;	
padding: 0px;
}


#header {	
background-color: rgb(190,215,235);	
width: 100%;	
height: 100px;	
padding: 0px;	
margin: 0px;
}


#navigation 
{	
 	position:absolute;
	background-color:rgb(210,235,255);
	top:100px;
	left:0px;
	width:180px;
	padding: 0px;
margin: 0px;
 }
#content{


	margin-top: 0px;
	margin-left: 180px;
	margin-right: 180px;
	background-color:blue;
        }
#features{	
position: absolute;	
background-color: rgb(210,235,255);	
top: 100px;	
right: 0px;	
width: 180px;	
margin: 0px;	
padding: 0px;
}

Alles anzeigen

Laut Buch sollte der Kopf oben am Rand sein. Die Navigation und features eben drunter exakt abschliessen. Jedoch ist immer ein weißer rand bei mir beim Kopf auf der oberseite. und die Navigation und Features ragen in den Kopf rein und sind zu dick.

ICh habe das CSS exakt abgetippelt. Was ist da verkehrt?

Gruß niesel

Dominikgt

versuch mal im #header auch noch position:absolute;

nieselfriem

nö bringts nicht

gruß niesel

sejuma

Mit diesem Content sollte es klappen:

Code

#content{ 
position:absolute;
   top: 100px; 
 left: 180px; 
 right: 180px; 
   background-color:blue; 
        }

Allerdings: Wenn du z.B. Padding-Werte einfügst, was wegen des optischen Erscheinungsbildes sinnvoll ist (sonst klebt der Text zu sehr an den Rändern) musst du die Breiten oder Positionierungsangaben wegen dem Boxmodell wieder etwas reduzieren.

nieselfriem

thx!!!

Tags