margin top und Hintergrundfarbe
josch
- css
0 Christoph Schnauß0 MudGuard0 josch0 josch
Hallo zusammen.
ich bastle gerade an einer sehr einfachen Seite und stehe vor einem Problem. Wenn ich ein Margin Top für den Kopfbereich vorgebe, zeigt mit der Firefox die Hnitergrundfarbe des bodys aber nicht des wrappers. Wie kann das sein? Normalerweise müsste der Margin top vom Kopfbereich weiss sein und nicht grau. FF zeigt es einfach nicht an, der IE schon. Hier die CSS Codelines:
* {padding: 0; margin: 0; }
body {
color: white;
background-color:#F0F0F0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:small;
}
#wrapper{
color: black;
background-color: #FFFFFF;
width: 800px;
margin-right: auto;
margin-left: auto;
}
#kopfbereich{
height:105px;
color: #FFFFFF;
background-color: #83c600;
background-image: url(header_back.jpg);
padding:20px;
padding-bottom: 0;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 0px;
margin-left: 20px;
}
Danke!
hallo,
Hier die CSS Codelines
Das nutzt nur sehr bedingt etwas, auch wenn es auf einen flüchtigen Blick hin ganz manierlich wirkt. Man müßte nun sehen können, wie du das in deinem HTML-Code verwendest.
Grüße aus Berlin
Christoph S.
Hi,
ich bastle gerade an einer sehr einfachen Seite und stehe vor einem Problem. Wenn ich ein Margin Top für den Kopfbereich vorgebe, zeigt mit der Firefox die Hnitergrundfarbe des bodys aber nicht des wrappers. Wie kann das sein? Normalerweise müsste der Margin top vom Kopfbereich weiss sein und nicht grau. FF zeigt es einfach nicht an, der IE schon. Hier die CSS Codelines:
Die Hintergrundfarbe betrifft nur die border-box (also alles, was sich unter und in der border befindet - der margin-Bereich wird nicht eingefärbt.
Da Dein Kopfbereich als Hintergrundfarbe einen Grünton hat (#83c600), ist unklar, wieso Du weiß als Hintergrundfarbe des Kopfbereichs erwartest.
(Bei margin-top spielt aber immer auch noch die Sache mit den collapsing margins eine Rolle (mit denen der IE manchmal Probleme hat) ...)
cu,
Andreas
<body id="startseite">
<div id="wrapper">
<div id="kopfbereich">
<a href="#textbereich" class="skiplink">Inhalt</a>
<h1>Text</h1>
<p>Text</p>
</div>
<div id="navibereich">
<ul>
<li id="navi01"><a href="index.html">Startseite</a></li>
<li id="navi02"><a href="kontakt.html">Kontakt</a></li>
</ul>
</div>
<div id="textbereich">
<h2>text</h2>
<p>
Text
</p>
</div>
<div id="fussbereich">
<ul>
<li id="navi03"><a href="index.html">Startseite</a></li>
<li id="navi04"><a href="druckversion.html">Druckversion</a></li>
<li id="navi05"><a href="impressum.html">Impressum</a></li>
</ul>
</div>
</div>
</body>
</html>
Die Hintergrundfarbe des Kopfbereiches ist auch grüen, allerdings sollte ja ein Margin diese Farbe nicht übernehmen, Margin übernimmt doch die Farbe der umgebenden Box. Was ist denn da nun falsch? Ich verstehe es einfach nicht.
Danke