Header und Content gehen auseinander bei Überschrift oder Absatz

[T!P-TOP]

Hab gearde versucht, in meinen Content inhalt einzufügen. Der Content hat eine Hintergrundgrafik, die mit dem header (der ebenfalls eine hintergrundgrafik hat) genau zusammenstoßt.
Jetzt hab ich im <div id="content"> noch <h4>Home</h4> eingefügt, und aufeinmal trennt sich der header vom Content, eine weiße lücke is aufeinaml zwischen conten und header, wo sie früher noch zusammengestoßen sind. Das Problem hab ich nicht nur bei Überschriften sonder auch bei Absätzen.

Wie kann ich das verhindern, das eben header und content auseinanderschießen?

Hier die html Datei:

<div class="container"><!--///CONTAINER-DIV Anfang - fasst alle Divs zusammen und positioniert sie mittig-->
<div id="header"><!--///HEADER-DIV Anfang-->
<div style="z-index: 1">
<ul>
  <li id="a"><a style="width: 160px; height: 96px;" href="index.htm" title="Home"></a></li>
  <li id="b"><a href="ueberuns.htm" title="Über Uns"></a></li>
  <li id="c"><a href="team.htm" title="Das Team"></a></li>
  <li id="d"><a href="projekte.htm" title="Projekte"></a></li>
  <li id="e"><a href="webdesign.htm" title="Webdesign"></a></li>
  <li id="f"><a href="referenzen.htm" title="Referenzen"></a></li>
  <li id="g"><a href="kontakt.htm" title="Kontakt"></a></li>
</ul>
</div>
</div><!--HEADER-DIV Ende\\\-->
  
<div id="content"><!--///CONTENT-DIV Anfang-->
<div id="Inhalt"></div>
</div><!--CONTENT-DIV Ende\\\-->
</div><!--CONTAINER-DIV Ende\\\-->

Hier das CSS von Container, header und content:

.container {
 width: 800px;
 height: 650px;
 max-height: 650px;
 min-height: 650px;
 max-width: 800px;
 min-width: 800px
 background-color: transparent;
 margin: 30px auto; 
}
#header {
 background-image: url('images/header.jpg');
 width: 800px;
 height: 160px;
 max-height: 160px;
 min-height: 160px;
 max-width: 800px;
 min-width: 800px;
 background-repeat: no-repeat;
 background-position: top center;
 
}
#content {
 background-image: url('images/content.jpg');
 width: 800px;
 height: 490px;
 background-repeat: no-repeat;
 background-position: top center;
 
}

Woran liegt das genau? Wenn ich nur nen div in den div-conten einfüge und in diesen Div Text einfüge, wird nichts auseinandergeschoben, nur sobald ich das ganze mit <p> und den Überschriften sowie CSS formatieren möchte, gehen die beiden Grafikelemente auseinander.

mfg

 

[_Thor_]

Elemente wir p oder hx haben meist einen voreingestellten margin, diesen solltest du zurücksetzen, dann dürfte auch kein Abstand mehr da sein.

 

[T!P-TOP]

Ok, also ich hab da eine CSS Datei wo ich p und hx definiere nun angefertigt.

CSS:

#h4, p {
 margin-top: 0;
 padding-right: 15px;
 padding-left: 15px;
 padding-top: 15px;
 font-family: "Arial";
 
}

Du meintest das so oder?

 

[_Thor_]

Ja, fast. So setzt du nur den oberen Aussenabstand auf 0, mit

h4, p {margin: 0; padding: 0;}

hast du alles auf 0.

 

[T!P-TOP]

Ok, nur dann gibt es das Problem, das der Text an den Seiten anstoßt. Und das sieht beider der 3D Hintergrundgrafik gar net gut aus. Da sieht man die anfangsbuchstaben am Rand nicht mehr. Auf den div kann ich verzichten, oder? Weil h4 und p liegt ja im div-content, der den Inhalt einzäumt.

 

[_Thor_]

Ok, nur dann gibt es das Problem, das der Text an den Seiten anstoßt.

Die Abstände musst du natürlich dann so neu setzen, wie du sie haben möchtest, aber damit alle Browser von den selben Grundwerten ausgehen, musst du sie erst alle auf 0 setzen. Normalerweise macht man das entweder mit dem Universalselektor

* {margin: 0; padding: 0;}

oder man definiert es nur für die Elemente, für die man es braucht.

h1, h2, h3, h4, h5, h6, p, ul, li, ol, dl, dt, dd {margin: 0; padding: 0;}

Auf den div kann ich verzichten, oder? Weil h4 und p liegt ja im div-content, der den Inhalt einzäumt.

Ja, da ist mindestens ein div überflüssig.

 

[T!P-TOP]

Ok margin auf 0 reicht schreinbar. Padding auf 20px, funzt prima.

Danke für die Hilfe!