Einzelnen Beitrag anzeigen
  #8 (permalink)  
Alt 15.01.2008, 20:37
Benutzerbild von nick
nick nick ist offline
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 01.08.2006
Ort: Rheinland-Pfalz
Beiträge: 386
nick befindet sich auf einem aufstrebenden Ast
Standard

So, das nächste Phenomän

Zitat:
Wenn ein gefloatetes Element sich innerhalb der zweiten Blockbox befindet und wenn diese Containerbox weder Rand noch Polsterung hat, dann wird das Ergebnis genauso aussehen, wie wenn das Float sich zwischen den beiden Blockboxen befindet. Wenn aber die beiden betreffenden Blockboxen von Rändern (oben und unten) auseinander gehalten werden, dann wird die Oberkante des Float-Elements dort beginnen, wo der Rand der einen Box die zweite Box trifft. Im folgenden Screenshot haben die Blockboxen Ränder an der Oberkante, während die Ränder des linken Float-Elements im Vergleich zum vorhergehenden Screenshot entfernt wurden, um das Verhalten eines Floats ohne Rand zu demonstrieren.
Hab nen Beispiel htm kreiert
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="robots" content="no-index, no-follow, no-cache" />
<style type="text/css">
div
{
	background: #696969;
	border: 5px solid #000;
	padding: 3px;
}

div.floatbox
{
	float: left;
	width: 40%;
	background: #696969;
}

p
{
	background: red;
}
</style>
<title>code</title>
</head>
<body>

<div>
	<p>Absatz ausserhalb des Floats.</p>
</div>
<div class="floatbox">
	<p>Floatender Text</p>
</div>
<div>

	<p>Absatz ausserhalb des Floats.</p>
</div>

</body>
</html>
Wie erwartet.
3 Divs.
Das erste in der ersten Reihe / Zeile / Browserabsatz (wie nennt man das?)
Das 2te im nächsten Absatz, weil es halt ein Blockelement ist
und das dritte im selben Absatz, weil das 2te gefloeatet ist.
Das 3te div begintn an der selben Stelle wie das 2te, weshalb man
in der Mitte des 2ten Browseabsatzes nur den Rand einer
div sieht. Der Text der 3ten Box wurde nur ins freie gerückt.

Jetzt will mir der zitierte Text das hier erklären.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="robots" content="no-index, no-follow, no-cache" />
<style type="text/css">
div
{
	background: #696969;
	border: 5px solid #000;
	padding: 3px;
}

div.floatbox
{
	float: left;
	width: 40%;
	background: #696969;
}

p
{
	background: red;
}
</style>
<title>code</title>
</head>
<body>

<div>
	<p>Absatz ausserhalb des Floats.</p>
</div>
<div>
	<div class="floatbox">
		<p>Floatender Text</p>
	</div>

	<p>Absatz ausserhalb des Floats.</p>
</div>

</body>
</html>
Ich glaube auch hier schon zu wissen was los ist.
Die eben genannte 2te div ist nun die dritte im ab jetzt 2ten div.
Sie ist gefloatet und ihre Kante beginnt von links an ihrem Mutterelement.
Wegen dem padding: 3px hat sie auch 3px Abstand halt.
Und der Text des Mutterelementes ist nach rechts ins freie gerückt.
Frage: Muss ich diesen zitierten Text jetzt verstehen
oder erklärt er mir doch nicht das, was ich annehme?

// edit
sorry für das Farbwort. Es ist nur ein Beispielmarkup.
Mit Zitat antworten