Hallo zusammen. Ich habe ein Problem bei dem ich den Fehler einfach nicht finde... Vielleicht bin ich im Moment einfach zu blind dazu =)
Ich habe folgenden HTML-Code:
Dazugehörig folgende CSS-Datei:
Wenn ich mir die Seite im Browser (Firefox) ansehe, dann wird durch den Abstand, der in div#teaser {...margin: 25px 0px; ... } definiert wurde nicht nur der Layer #teaser um 25px nach unten verschoben sondern es entsteht auch über #top ein Abstand von 25px... Wieso passiert das?
Ich habe folgenden HTML-Code:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Johannes-Turmair-Gymnasium Straubing</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="top">
<ul class="wrap">
<li><a class="unterstufe" href="">Unterstufe</a></li>
<li><a class="mittelstufe" href="">Mittelstufe</a></li>
<li><a class="oberstufe" href="">Oberstufe</a></li>
<li><a class="kollegstufe" href="">Kollegstufe</a></li>
<li class="right"><a href="">Kontakt</a></li>
<li class="right"><a href="" target="_blank">Anmelden</a></li>
</ul>
<div style="clear:both"></div>
</div>
<div id="teaser">
</div>
</body>
</html>Dazugehörig folgende CSS-Datei:
Code:
* { margin: 0px; padding: 0px; }
body { font-family: "Trebuchet MS"; margin: 0px; padding: 0px; text-align: center; }
a { text-decoration: none; }
.wrap { margin: 0px auto; text-align: left; width: 700px; }
div#top { font-size: 13px; }
div#teaser { background: #e0e0e0; height: 100px; margin: 25px 0px; }
div#top ul li { display: block; float: left; }
div#top ul li.right { background: #f1f1f1; float: right; }
div#top ul li.right a { font-weight: normal; margin: 0px; }
div#top ul li a { color: #555555; display: block; font-weight: bold; margin-right: 6px; padding: 6px 12px; }
div#top ul li a:hover { background: #f6f6f6; }
div#top a.unterstufe { border-bottom: 3px solid #cc0000; }
div#top a.mittelstufe { border-bottom: 3px solid #0066cc; }
div#top a.oberstufe { border-bottom: 3px solid #ffcc00; }
div#top a.kollegstufe { border-bottom: 3px solid #009900; }Wenn ich mir die Seite im Browser (Firefox) ansehe, dann wird durch den Abstand, der in div#teaser {...margin: 25px 0px; ... } definiert wurde nicht nur der Layer #teaser um 25px nach unten verschoben sondern es entsteht auch über #top ein Abstand von 25px... Wieso passiert das?
