Helft mir. Ich habe voll die Leseschwäche

nick · #1 (**permalink**) 15.01.2008, 15:49

Ich lese mir gerade diese Dokumentation durch
Float: Die Theorie

Und lese jeden Absatz mindestens 100 Mal, um endlich zu verstehen,
was er mir sagen will.

Zitat:

Es ist ein verbreitetes Missverständnis, dass Block-Elemente, die auf ein gefloatetes Element folgen, ebenfalls entlang der Seite des Floats angeordnet werden. Das stimmt nicht. Es sind in der Tat nur die Zeilenboxen (lineboxes) innerhalb der Block-Elemente, die sich so verhalten. (Siehe den ersten Screenshot).

Es ist also ein verbreitetes Misverständnig, dass Blockelemente, die nach
einem gefloateten Element kommen, ebenfalls gefloatet sind?
Meinen die mit der linebox den p (Absatz) oder die div, die
den Absatz enthält?

Will mir der Text bloß sagen, dass hier

Zitat:

<!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.floatbox
{
float: left;
width: 40%;
background: #696969;
}
</style>
<title>code</title>
</head>
<body>

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

</body>
</html>

das 2te div nicht mitgefloatet ist und das war's auch schon?
Also, ich habe das jetzt schon verstanden, dass gefloatete Elemente
aus dem normalen html Textfluss raus sind aber dort positioniert sind,
wo sie es wären, wären sie nicht gefloatet. Und gefloatete Elemente
sind automatisch Blockelemente.
Trotzdem werden Elemente, die vom markup her nach diesem gefloateten
Element kommen, nicht unter das gefloatete Element geschoben.
Sie werden so weit nach rechts geschoben, dass sie frei liegen.

Zitat:

Die Spezifikation verlangt, dass Zeilenboxen, die hinter ein Float rutschen würden, soweit verkürzt werden, dass sie "im Freien" bleiben.

wtf verkürzt? Nach rechts geschoben doch wohl!?

Zitat:

Das bedeutet, dass Text und Inline-Grafiken niemals von einem Float zugedeckt werden können, außer wenn sich gefloatetes Element und Inline-Element in separaten Containern befinden.

DAS VERSTEH ICH ABSOLUT NICHT!
Erklärt mir doch bitte mal einer, was mit dem dick markierten Text gemeint ist.

Zitat:

Ein verbreitetes Problem mit gefloateten Elementen ist, wie man den Text, der entlang des Floats fließt, davon abhält, die Seiten des Floats zu berühren. Es funktioniert nicht, dem Text Polsterung (padding) oder Rand (margin) zuzuweisen, weil diese Eigenschaften auf der linken Seite der Zeilenbox zum tragen kommen und die befindet sich ja hinter dem gefloateten Element.

Funktioniert bei mir im ff einwandfrei

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.floatbox
{
	float: left;
	width: 40%;
	background: #696969;
	margin-right: 10px;
	padding: 10px;
}
</style>
<title>code</title>
</head>
<body>

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

</body>
</html>

Und wieso jetzt Rand? Außenabstand doch wohl!?

// edit
Ach das ist das Problem!

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">
html, body
{
	background: #666fff;
	margin: 0;
	padding: 0;
}

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

div.text
{
	margin: 10px;
}
</style>
<title>code</title>
</head>
<body>

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

</body>
</html>

Zitat:

Die richtige Vorgehensweise ist, dem Float selbst einen Rand zu geben und dadurch die Zeilenboxen davon zu überzeugen, dass das gefloatete Element "größer" ist, als es erscheint.

heiko_rs · #2 (**permalink**) 15.01.2008, 16:10

Wenn ein div floatet und das andere nicht, überlappen sie (das siehst Du, wenn Du dem Non-Float eine Hintergrundfarbe gibst). Aber im Non-Float enthaltener Text oder Grafiken weichen dem Float aus.

nick · #3 (**permalink**) 15.01.2008, 16:18

Dann wird das im markup nachstehend platzierte Element
ja doch unter das floatierende Element geschoben.
Nur die inline-Elemente darin werden ins freie geschoben.

heiko_rs · #4 (**permalink**) 15.01.2008, 16:26

Zitat:

Zitat von nick

Dann wird das im markup nachstehend platzierte Element
ja doch unter das floatierende Element geschoben.

"Unter" heißt in diesem Falle allerdings nicht vertikal darunter, sondern dreidimensional betrachtet: So wie 2 Blätter Papier übereinander liegen.

Zitat:

Zitat von nick

Nur die inline-Elemente darin werden ins freie geschoben.

Nicht ins Freie - sie bleiben immer Inhalt ihres Eltern-divs. Ist dieses genauso breit wie der Float, liegen die Inhalte vertikal unter dem Float.

mantiz · #5 (**permalink**) 15.01.2008, 16:34

Schau Dir mal dieses Beispiel an:

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" xml:lang="de" lang="de">

	<head>
		<title>[ untitled ]</title>
		
		<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
		
		<style type="text/css">
			
			div  { float: left; height: 100px; width: 100px; border: 2px solid #00F; }
			p    { background: #0F0; line-height: 1.5em; }
			span { background: #F00; }
			
		</style>
		
	</head>

	
	<body>
		
		<div>
		</div>
		<p>
			<span>
				Text Text Text Text Text Text Text Text Text Text Text Text Text 
				Text Text Text Text Text Text Text Text Text Text Text Text Text 
				Text Text Text Text Text Text Text Text Text Text Text Text Text 
				Text Text Text Text Text Text Text Text Text Text Text Text Text 
				Text Text Text Text Text Text Text Text Text Text Text Text Text 
				Text Text Text Text Text Text Text Text Text Text Text Text Text 
				Text Text Text Text Text Text Text Text Text Text Text Text Text 
				Text Text Text Text Text Text Text Text Text Text Text Text Text 
				Text Text Text Text Text Text Text Text Text Text Text Text Text 
				Text Text Text Text Text Text Text Text Text Text Text Text Text 
				Text Text Text Text Text Text Text Text Text Text Text Text Text 
				Text Text Text Text Text Text Text Text Text Text Text Text Text 
				Text Text Text Text Text Text Text Text Text Text Text Text Text 
				Text Text Text Text Text Text Text Text Text Text Text Text Text 
				Text Text Text Text Text Text Text Text Text Text Text Text Text 
				Text Text Text Text Text Text Text Text Text Text Text Text Text 
				Text Text Text Text Text Text Text Text Text Text Text Text Text 
				Text Text Text Text Text Text Text Text Text Text Text Text Text 
				Text Text Text Text Text Text Text Text Text Text Text Text Text 
				Text Text Text Text Text Text Text Text Text Text Text Text Text 
				Text Text Text Text Text Text Text Text Text Text Text Text Text 
				Text Text Text Text Text Text Text Text Text Text Text Text Text 
				Text Text Text Text Text Text Text Text Text Text Text Text Text 
				Text Text Text Text Text Text Text Text Text Text Text Text Text 
			</span>
		</p>
		
	</body>
	
</html>

Da siehst Du, wie der Absatz hinter dem div liegt (anhand des Hintergrundes), aber der Text, der sich im Absatz befindet, am div ausgerichtet wird.

Ich denke, wenn Du Dir das hier ansiehst, dann ist klar, was gemeint ist.

nick · #6 (**permalink**) 15.01.2008, 19:07

@heiko_rs
So habe ich es gemeint.

@mantriz
Danke, das habe ich ja jetzt verstanden.

Zitat:

Während die Zeilenboxen verkürzt werden, bleiben die Blockboxen wie sie sind und werden vom gefloateten Element verdeckt

Zeilenboxen - Das sind also die Boxen, in denen Text automatisch liegt.
Also was ich meine.

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" xml:lang="de" lang="de">

	<head>
		<title>[ untitled ]</title>
		
		<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
		
		<style type="text/css">
			
			div  { float: left; height: 100px; width: 100px; border: 2px solid #00F; }
			p    { background: #0F0; line-height: 1.5em; }
			span { background: #F00; }
			
		</style>
		
	</head>

	
	<body>
		
		<div>
			hallo
		</div>
		
	</body>
	
</html>

hallo ist in einer Zeilenbox, damit ist aber nicht das div gemeint.
Die Zeilenbox liegt in der div.

In html sind alles Boxen, selbst der Text ist ne Box mit Aufschrift?

Danke für eure Hilfe.
Ich wüsste nicht, wo ich ohne xhtmlforum.de rumkriechen würde!

mantiz · #7 (**permalink**) 15.01.2008, 19:17

Genau richtig.

nick · #8 (**permalink**) 15.01.2008, 20:37

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.

mantiz · #9 (**permalink**) 15.01.2008, 21:02

hm, den Text verstehe ich jetzt leider nicht.

Dass Deine beiden Beispiele sich so verhalten ist ganz klar, kommt aber vom padding.

Was jetzt aber genau in dem Text gemeint ist ... kein Plan, sorry, evtl. jmd. anders?

hubspe · #10 (**permalink**) 15.01.2008, 21:20

hi,

Zitat:

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.

Erinnert mich an eine 300seitige Funktionsbeschreibung eines Videorecorders, wo man nach zwei Seiten verwirrt das Handtuch wirft.

Da hab ich auch voll die Leseschwäche.

Mal im Ernst, hast du mal andere Quellen zum Verständnis versucht?

Das hier und das Forum hier haben mir persönlich am besten beim Verständnis des Ganzen geholfen.

Gruß
Klaus

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Wer hilft mir beim Bau einer Navigation	jimmiis	CSS	5	19.04.2005 13:35
Mal was von mir	nicmare	Site- und Layoutcheck	16	06.04.2005 13:30
Helft mir ^^	Cybertronic	CSS	6	26.02.2005 16:54
Fixierter Hintergrund-Kein Code funktioniert bei mir!! Hilfe	Triforce	CSS	4	16.12.2004 14:44
Kann mir jemand Helfen beim Beispiel anpassen?	MisterSonic	CSS	7	09.07.2004 16:46