Fast geschafft von Hazel, 01.04.2014 00:33

Fast geschafft

Hazel 01.04.2014 00:33

Hallo,

ich hab es mal so umgesetzt:

  
<!DOCTYPE HTML>  
<html>  
<head>  
<meta charset="utf-8">  
<title>Test Seite</title>  
<link href="screen.css" rel="stylesheet" type="text/css">  
</head>  
  
<body>  
  
    <div id="bezahlt">  
    	  
      <div class="titel">  
       	<h1>Neue Unterkünfte</h1>  
      </div>  
  
        <div class="links">  
   	    	<img src="media/aufmacher.jpg" width="590" height="333" alt="Aufmacher">  
        </div>  
  
        <div class="rechts">  
        	  
            <div class="rects_links">  
       	    <img src="media/test_rechts.jpg" width="188" height="106" alt="Test Bild">  
            </div>  
  
            <div class="rechts_rechts">  
       	    <img src="media/test_rechts.jpg" width="188" height="106" alt="Test Bild">  
            </div>  
        	  
            <div class="rects_links">  
       	    <img src="media/test_rechts.jpg" width="188" height="106" alt="Test Bild">  
            </div>  
  
            <div class="rechts_rechts">  
       	    <img src="media/test_rechts.jpg" width="188" height="106" alt="Test Bild">  
            </div>  
        	  
            <div class="rects_links">  
       	    <img src="media/test_rechts.jpg" width="188" height="106" alt="Test Bild">  
            </div>  
            <div class="rechts_rechts">  
       	    <img src="media/test_rechts.jpg" width="188" height="106" alt="Test Bild">  
            </div>  
  
        </div>  
  
    </div>  
  
  
</body>  
</html>

Und mein CSS sieht so aus

  
#bezahlt {  
	width: 1005px;  
	margin: 0 auto;  
	height: 400px;  
}  
  
#bezahlt .titel {  
	border-bottom: 1px solid #666;  
	margin-bottom: 10px;  
}  
  
#bezahlt .titel h1 {  
	margin: 0;  
	padding: 0px;  
	font-size: 34px;  
    line-height: 39px;  
	color: #333;  
}  
  
#bezahlt .links {  
	float: left;  
	width: 590px;  
}  
  
  
#bezahlt .rechts {  
	float: right;  
	width:395px;  
	margin-top:0px;  
}  
  
#bezahlt .rechts .rects_links {  
	float: left;  
	margin-top:3px;  
	width: 188px;  
}  
  
#bezahlt .rechts .rects_links:first-child {  
	float: left;  
	margin-top:0px;  
	width: 188px;  
}  
  
#bezahlt .rechts .rechts_rechts:first-child {  
	float: right;  
	margin-top:0px;  
	width: 188px;  
}  
  
#bezahlt .rechts .rechts_rechts {  
	float: right;  
	margin-top:2px;  
	width: 188px;  
  
}

Die Frage ist nun warum zieht dieses #bezahlt .rechts .rechts_rechts:first-child { nicht? Der Abstand nach oben ist weiterhin 2px (siehe Bild) und wie sieht der Code aus? Kann man diesen so stehen lassen oder gibt es etwas zu verbessern?