CSS "auto" - Abstand zu oberem Container

[webdesigner09]

Hallo,
ich habe ein Problem. Undzwar wird, wenn unter einen Container ein Container mit automatischer Höhe gesetzt wird, ein Abstand zwischen den beiden gelassen.

HTML:

	<div id="content">
		<div id="content-top">
		</div>
		<div id="content-text">
		<p>TEST</p>
		</div>
	</div>

CSS:

#content {
	width: 540px;
	height: auto;
	float: left;
	margin-left: 15px;
	margin-top: 15px;
	margin-bottom: 15px;
}

#content-top {
	width: 540px;
	height: 190px;
	background-image: url(images/content-top.png);
	background-repeat: no-repeat;
}

#content-text {
	width: 540px;
	height: auto;
	background-image: url(images/content-text.png);
	background-repeat: repeat-y;
}

Was muss ich beachten damit keine Lücke mehr vorhanden ist?

Viele Grüße
Yannick

[wildmieze]

Hmm .. ganz am Anfang ein css-reset drin? also sowas wie

* {padding:0; margin:0;}

wenn nicht, könnte ich mir zB vorstellen, daß das <p> noch ein margin hat, was den Container drumrum mit "runterziehen" könnte .. heißt dann wohl collapsing margins .. ist aber auch nur ins Blaue geschossen ..

[MrMurphy]

Hallo,

Undzwar wird, wenn unter einen Container ein Container mit automatischer Höhe gesetzt wird, ein Abstand zwischen den beiden gelassen.

Den Abstand verursachen nicht die Container, sondern der Absatz mit dem Wort "TEST". Wenn du den rausnimmst ist auch der Abstand weg.

Das ist natürlich nicht Sinn der Sache. Du kannst statt dessen auch im CSS-Teil folgendes einfügen:

p {
padding: 0px;
border: 0px;
margin: 0px;
}

Das ist natürlich nur ein Beispiel, um dir die Ursache zu zeigen, die Absätze werden bei mehr Text mit der Einstellung nicht mehr so schön aussehen. Es wird dir bei html/css aber noch sehr häufig passieren, das die Ursache für ein unerwartetes Verhalten ganz woanders liegt als der erste Augenschein verheißt.

Im IE 6.0 werden die Container übrigens auch ohne das p-css wie von dir gewünscht dargestellt.

Hintergrund ist, das die Browser für bestimmte Elemente automatisch Abstände einfügen, sofern keine definiert sind. Und zwar jeder andere.

Deshalb ist es in der Regel sinnvoll, grundsätzlich alle Abstände / Einstellungen erst einmal grundsätzlich mit Werten vorzubelegen und anschließend den einzelnen Elementen erforderliche Abstände zuzuweisen, falls dies erforderlich wird.

Gruss

MrMurphy

[MrMurphy]

Hallo wildmieze,

dein Ansatz mit dem css-reset ist schon genau richtig und das, was ich meine. Siehe auch

http://www.webmasterpro.de/coding/ar...rvorgaben.html

oder

http://www.professorweb.de/css/reset...u-stellen.html

Mit den collapsing-margins wird aber ein anderes Phänomen beschrieben.

Einige Browser (meiner Erinnerung nach auf jeden Fall ältere IEs) lassen Außenabstände (margins) oben und unten ineinanderfließen.

Wenn also ein Element einem martin-bottom von 5px und das nachfolgende ein margin-top von 5px bekommen, zeigen die einen Abstand von 5px an. Alle anderen Browser zeigen aber wie in der Regel auch gewüscht 10px an.

Gruss


MrMurphy

[wildmieze]

Ah, danke Ergibt vom Begriff her auch mehr Sinn^^ .. gibt es denn auch ein Wort für den Effekt, daß sich ein Top-Margin quasi auf den Elterncontainer "überträgt" ..? Hier hat sich ja nicht nur der Text entsprechend des <p>-margins verschoben, sondern (vermutlich) auch das Hintergrundbild von #content-text .. so habe ich zumindest die Aussage "da is ne Lücke" verstanden

[webdesigner09]

Hey,
das mit dem css-reset hat funktioniert.
Danke euch beiden!

Viele Grüße
Yannick