zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Helft mir. Ich habe voll die Leseschwäche

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.01.2008, 14:49
Benutzerbild von nick
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 Helft mir. Ich habe voll die Leseschwäche

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.

Geändert von nick (15.01.2008 um 14:58 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 15.01.2008, 15:10
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.869
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 15.01.2008, 15:18
Benutzerbild von nick
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

Dann wird das im markup nachstehend platzierte Element
ja doch unter das floatierende Element geschoben.
Nur die inline-Elemente darin werden ins freie geschoben.
Mit Zitat antworten
  #4 (permalink)  
Alt 15.01.2008, 15:26
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.869
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von nick Beitrag anzeigen
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 Beitrag anzeigen
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.

Geändert von heiko_rs (15.01.2008 um 15:28 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 15.01.2008, 15:34
Benutzerbild von mantiz
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.02.2007
Beiträge: 2.845
mantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 15.01.2008, 18:07
Benutzerbild von nick
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

@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!

Geändert von nick (15.01.2008 um 18:13 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 15.01.2008, 18:17
Benutzerbild von mantiz
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.02.2007
Beiträge: 2.845
mantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz sein
Standard

Genau richtig.
Mit Zitat antworten
  #8 (permalink)  
Alt 15.01.2008, 19:37
Benutzerbild von nick
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
  #9 (permalink)  
Alt 15.01.2008, 20:02
Benutzerbild von mantiz
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.02.2007
Beiträge: 2.845
mantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz sein
Standard

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?
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 15.01.2008, 20:20
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.088
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

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
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


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


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:14 Uhr.