nicht angemeldet
float will nicht clearen
Gunnar BittersmannHi,
im folgenden soll ein Bild um einen Text fliessen, macht es auch. Aber im FF versetzt sich das ganze immer mehr, obwohl ich clear nutze.
img
img
img
img
Aber auch wenn es an der Vererbung läge, dürfte das doch gar nicht sein, weil vererbt wird doch nur innerhalb des Elternelements, oder?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<title>test float</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="expires" content="0" />
<meta http-equiv="pragma" content="no-cache" />
<style type="text/css">
*{font-family:arial;}
body,html{
margin:0;padding:0;
font-size:12px;
margin:0;
padding:0;
background-color:#ffffff;
}
.divres{}
.divres h5{}
.divres p{line-height:160%;font-size:12px;font-weight:bold;margin:0;}
.divres p img{border:1px solid #000000;margin-right:4px;float:left;}
.divres span{clear:left;}
</style>
</head>
<body>
<div class="divres">
<p>
<img src="http://src.selfhtml.org/logo.gif" />
<h5>Artikel</h5>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s,...
</p>
<span>Aktualisiert:Wed, 28.01.2009 | size:31.09kb</span> |Format:text/html</span>
<p>http://forum.de.selfhtml.org/</p>
</div>
<div class="divres">
<p>
<img src="http://src.selfhtml.org/logo.gif" />
<h5>Artikel</h5>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s,...
</p>
<span>Aktualisiert:Mon, 19.01.2009 | size:19.62kb</span> |Format:text/html</span>
<p>http://forum.de.selfhtml.org/</p>
</div>
<div class="divres">
<p>
<img src="http://src.selfhtml.org/logo.gif" />
<h5>Artikel</h5>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s,...
</p>
<span>Aktualisiert:Sun, 18.01.2009 | size:19.81kb</span> |Format:text/html</span>
<p>http://forum.de.selfhtml.org/</p>
</div>
</body>
</html>
Mike
-
Code validieren dürfte das Problem lösen.
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
-
Hi,
stelle zunaechst gueltigen HTML-Code her.
<div class="divres">
<p>
<img src="http://src.selfhtml.org/logo.gif" />
<h5>Artikel</h5>Das ist keiner - P darf keine Hx-Ueberschriften enthalten.
Ein Tag-Soup-Parser schliesst also das P-Element schon hinter dem Bild wieder.
<span>Aktualisiert:Wed, 28.01.2009 | size:31.09kb</span> |Format:text/html</span>
Und hier schliesst du ein Span-Element, welches du zuvor gar nicht geoeffnet hast.
Kurzum - validiere deinen Code. http://validator.w3.org/
MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“ -
Hi, ja war nicht ganz valide ;-)
Aber es ändert nichts auch die valide Version macht das Problem:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Float2</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="expires" content="0" /> <meta http-equiv="pragma" content="no-cache" /> <style type="text/css"> *{font-family:arial;} body,html{ margin:0;padding:0; font-size:12px; margin:0; padding:0; background-color:#ffffff; } .divres{} .divres h5{} .divres p{line-height:160%;font-size:12px;font-weight:bold;margin:0;} .divres p img{border:1px solid #000000;margin-right:4px;float:left;} .divres span{clear:left;} </style> </head> <body> <div class="divres"> <p> <img src="http://src.selfhtml.org/logo.gif" alt="selfhtml" /> <b>Artikel</b><br /> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s,... </p> <span>Aktualisiert:Thu, 22.01.2009 | size:105.12kb|Format:text/html</span> <p>http://forum.de.selfhtml.org/</p> </div> <div class="divres"> <p> <img src="http://src.selfhtml.org/logo.gif" alt="selfhtml" /> <b>Artikel</b><br /> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s,... </p> <span>Aktualisiert:Fri, 23.01.2009 | size:333.35kb|Format:text/html</span> <p>http://forum.de.selfhtml.org/</p> </div> <div class="divres"> <p> <img src="http://src.selfhtml.org/logo.gif" alt="selfhtml" /> <b>Artikel</b><br /> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s,... </p> <span>Aktualisiert:Wed, 28.01.2009 | size:31.09kb|Format:text/html</span> <p>http://forum.de.selfhtml.org/</p> </div> </body> </html>Mike
-
Hi,
Aber es ändert nichts auch die valide Version macht das Problem:
.divres span{clear:left;}
clear
Applies to: block-level elementsMfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“-
Hi,
Applies to: block-level elements
werde zwar nicht schlau warum das so ein soll aber gut ich habe es erweitert um:
.divres span{clear:left;display:block;}
Und so funktioniert es auch. Warum haben die nicht so was erfunden wie
float_once:left; also das clear unnötig macht, immer ärgere ich mich wenn ich gezwungen bin float einzusetzen.Zum Problem selbst:
Also vererbt sich das doch anscheindend, warum? Schliesslich befindet sich das Ganze in einem <p> und dieser in einem geschlossenen <div>. Wie kann sich das dann aus dem Dom heraus in das nachfolgende Div vererben?
Auf jeden Fall schonmal danke für den hinweis mit "nur Blockelement"
Mike-
Hi,
Also vererbt sich das doch anscheindend, warum? Schliesslich befindet sich das Ganze in einem <p> und dieser in einem geschlossenen <div>. Wie kann sich das dann aus dem Dom heraus in das nachfolgende Div vererben?
Was soll sich da bitte vererben?
Wenn du ein Element floatest, sagst du damit, "alle nachfolgenden Inhalte, die keinen Block Formatting Context bilden, sollen bitte um mich herumfliessen".
MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“-
Hi,
Was soll sich da bitte vererben?
»»
Ja eben....
Wenn du ein Element floatest, sagst du damit, "alle nachfolgenden Inhalte, die keinen Block Formatting Context bilden, sollen bitte um mich herumfliessen".
Was hat dann diesen Effekt verursacht, wenns nicht an einer Vererbung liegt? Klar ich weiss jetzt, weil ich kein Clear auf den Span setzen durfte, aber wieso dieser Effekt?
Mike
-
Hi,
Wenn du ein Element floatest, sagst du damit, "alle nachfolgenden Inhalte, die keinen Block Formatting Context bilden, sollen bitte um mich herumfliessen".
Was hat dann diesen Effekt verursacht, wenns nicht an einer Vererbung liegt?
Das, was ich da oben schrieb.
Klar ich weiss jetzt, weil ich kein Clear auf den Span setzen durfte, aber wieso dieser Effekt?
Du wolltest float, du kriegtest float.
MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“-
Hi,
Wenn du ein Element floatest, sagst du damit, "alle nachfolgenden Inhalte, die keinen Block Formatting Context bilden, sollen bitte um mich herumfliessen".
Du wolltest float, du kriegtest float.
Da steh ich nun, ich armer Tor...
Nochmal für Dumme wie mich, ich habe ein <DIV>(Blockelement), darin ein <p>(auch Block) darin ein <img>(inline) und text(inline).
Das <img> wird gefloatet und somit auch der text darum.
Spätestens beim nächsten Blockelement das nicht in dem <p> liegt müsste doch schluss mit lustig(also float) sein, weil dann keine Nachfahrenelemente mehr vorhanden sind. Wo ist mein Denkfehler?
Mike
-
Hi,
Nochmal für Dumme wie mich, ich habe ein <DIV>(Blockelement), darin ein <p>(auch Block) darin ein <img>(inline) und text(inline).
Das <img> wird gefloatet und somit auch der text darum.
Spätestens beim nächsten Blockelement das nicht in dem <p> liegt müsste doch schluss mit lustig(also float) sein, weil dann keine Nachfahrenelemente mehr vorhanden sind. Wo ist mein Denkfehler?
Darin, dass du annimmst, float wuerde sich nur auf die Inhalte von Nachfahrenelementen beziehen. (Nachfahrenelemente von was denn eigentlich? Du hast das Image gefloatet, und das hat gar keine Nachfahren.)
MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“-
Hi,
Darin, dass du annimmst, float wuerde sich nur auf die Inhalte von Nachfahrenelementen beziehen. (Nachfahrenelemente von was denn eigentlich? Du hast das Image gefloatet, und das hat gar keine Nachfahren.)
Das macht die Float-Geschichte dann noch seltsamer für mich. Also es vererbt sich nicht, was macht es dann, das es Auswirkungen hat auf Folgecode?
Mike
-
Hi,
Das macht die Float-Geschichte dann noch seltsamer für mich. Also es vererbt sich nicht, was macht es dann, das es Auswirkungen hat auf Folgecode?
Noch mal: Es besagt, "alle nachfolgenden Inhalte sollen bitte um mich herum fliessen."
So lange, bis Clearing erfolgt.MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“-
Hi,
Noch mal: Es besagt, "alle nachfolgenden Inhalte sollen bitte um mich herum fliessen."
So lange, bis Clearing erfolgt.Das bedeutet:
1. Nachfolgenden != Nachfahren
2. Nachfolgenden == BlockelementSoweit richtig?
Wenn du ein Element floatest, sagst du damit, "alle nachfolgenden Inhalte, die keinen Block Formatting Context bilden, sollen bitte um mich herumfliessen".
"keinen Block Formatting Context" damit meinst du eben die Blocks schon aber eben nicht der inhalt derselben?
Mike
-
Hi,
Noch mal: Es besagt, "alle nachfolgenden Inhalte sollen bitte um mich herum fliessen."
So lange, bis Clearing erfolgt.Das bedeutet:
- Nachfolgenden != Nachfahren
- Nachfolgenden == Blockelement
Soweit richtig?
Nein.
Block Elemente fliessen nicht um das gefloatete Element herum, sondern verhalten sich nach wie vor so, als ob es gar nicht da waere.
Ihre (inline) Inhalte umfliessen das gefloatete Element jedoch.Wenn du ein Element floatest, sagst du damit, "alle nachfolgenden Inhalte, die keinen Block Formatting Context bilden, sollen bitte um mich herumfliessen".
"keinen Block Formatting Context" damit meinst du eben die Blocks schon aber eben nicht der inhalt derselben?
Block Formatting Context war in dem Zusammenhang nicht das richtige Stichwort, deshalb hab ich die Aussage geaendert, s.o.
MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“-
Hi,
oh Mann, wer hats erfunden? Die Schweizer oder W3C im Suff;-)
Ich will deine Hilfe nicht über Gebühr beanspruchen, aber irgendwie wirds immer dunkler anstatt heller.
- Nachfolgenden != Nachfahren
- Nachfolgenden == Blockelement
Soweit richtig?
Nein.
Block Elemente fliessen nicht um das gefloatete Element herum, sondern verhalten sich nach wie vor so, als ob es gar nicht da waere.
Ihre (inline) Inhalte umfliessen das gefloatete Element jedoch.Hier wirds dann wieder sehr seltsam. Klassisch wird Float genutzt um mehrer Blockelemente nebeneinander zu positionieren. Das erkennt man dan besonders gut wenn die Blockelemente einen Border haben.
http://de.selfhtml.org/css/layouts/mehrspaltige.htm#dreispaltig
Nun sagst du "verhalten sich nach wie vor so, als ob es gar nicht da waere" und "Ihre (inline) Inhalte umfliessen das gefloatete Element jedoch"
Hmm, bei mir sieht das so aus als wenn aber die Blöcke nebeneinander sind inklusive natürlich deren Inhalt.
Vielleicht habe ich auch einen Riesendenkfehler, aber nicht umsonst tun sich viele Leute mit Float schwer.
Mike
-
Yerf!
Hmm, bei mir sieht das so aus als wenn aber die Blöcke nebeneinander sind inklusive natürlich deren Inhalt.
Entferne doch bei dem Beispiel mal bei div#inhalt die Margin-Angabe, dann wirds deutlich. (evtl. auch noch etwas mehr Inhalt in den Div stecken, dann sieht man das ganze auch auf der rechten Seite)
Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->
-
-
-
-
-
-
-
-
Wenn du ein Element floatest, sagst du damit, "alle nachfolgenden Inhalte, die keinen Block Formatting Context bilden, sollen bitte um mich herumfliessen".
Das ist etwas unklar ausgedrückt. Alle nachfolgenden Elemente fließen um ein floatendes Element »herum«, auch solche mit Block Formatting Context, sofern sie nicht clear haben. Der Unterschied ist eher, dass die Boxgrenzen bei einem BFC nicht »unterhalb« des Floats liegen, also nicht mit ihm überlappen. Ohne BFC wird nur der Inhalt des nicht-floatenden Elements um die Breite des Floats verschoben, mit BFC die gesamte Box. Das kann bei einem Element mit BFC natürlich zu einem Clearing führen, wenn die Box nicht mehr neben die Float-Box passt.
Mathias
-
Hi,
Wenn du ein Element floatest, sagst du damit, "alle nachfolgenden Inhalte, die keinen Block Formatting Context bilden, sollen bitte um mich herumfliessen".
Das ist etwas unklar ausgedrückt.
Ja, ich weiss - habe versucht, es hier richtig zu stellen.
MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“-
Ja, ich weiss - habe versucht, es hier richtig zu stellen.
Ups, ich sollte nicht einfach in einzelne Postings eines Threads hineinlesen und neunmalklug antworten...
Mathias
-
-
-
-
-
-
-
Hi,
noch eine andere Frage, will nicht extra neuen Thread dafür erstellen.
Beim Validieren fiel mir auf, dass xhtml eine ganze Menge mehr als Deklaration haben will:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">während ich bei HTML lediglich das benötige:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>Muss also wirklich dieser ganze Ballast bei xhtml sein?
Oder anders gefragt, wenn ich HTML 4.01 deklarieren würde, dürfte ich dann nach xhtml Schema auszeichnen, also zb. <br /> ?
Mike
-
@@Mike:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Dass ein public identifier in XHTML 1.0 Pflicht wäre, kann ich aus [XHTML1 §3.1.1] nicht herauslesen. XML verlangt keinen PI. [XML §2.8]
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Zur Angabe des Namensraums siehe 'html' ohne 'xmlns'?
Die Angabe der Textsprache ist nicht Pflicht, sondern good practice. [QA-LANG-WHY]
Wenn du vergleichen willst, dann
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">mit
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en">bzw.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml">mit
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html>Oder anders gefragt, wenn ich HTML 4.01 deklarieren würde, dürfte ich dann nach xhtml Schema auszeichnen, also zb. <br /> ?
Njein. Siehe HTML Validierung: <FOO /> - Fehler
Live long and prosper,
Gunnar--
Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)-
Dass ein public identifier in XHTML 1.0 Pflicht wäre, kann ich aus [XHTML1 §3.1.1] nicht herauslesen. XML verlangt keinen PI.
Auch wenn es nicht ganz explizit dort steht, verstehe ich den Satz »The public identifier included in the DOCTYPE declaration must reference one of the three DTDs ... « durchaus so, dass die drei darauffolgenden DOCTYPEs *mit* PI die einzig zulässigen für Strictly Conforming Documents sind.
Andererseits, wieso muss man unbedingt Strictly Conforming Documents schreiben, wenn diese Regeln weit über das technisch erforderliche hinausgeht. (Namespace-Angabe ist hingegen ein praktisches Erfordernis, wie du schriebst.)
Jedenfalls danke fürs recherchieren, das mit der optionalen PI wusste ich selbst noch nicht.
Mathias
-
@@molily:
Dass ein public identifier in XHTML 1.0 Pflicht wäre, kann ich aus [XHTML1 §3.1.1] nicht herauslesen. XML verlangt keinen PI.
Auweia, da hab ich doch glatt public identifier und system identifier verwechselt.
Was ich eigentlich dsagen wollte: Dass ein _system_ identifier in XHTML 1.0 Pflicht wäre, kann ich aus [XHTML1 §3.1.1]* nicht herauslesen. XML verlangt keinen _system_ identifier.
Auch wenn es nicht ganz explizit dort steht, verstehe ich den Satz »The public identifier included in the DOCTYPE declaration must reference one of the three DTDs ... « durchaus so, dass die drei darauffolgenden DOCTYPEs *mit* PI die einzig zulässigen für Strictly Conforming Documents sind.
Ja natürlich. Und im nächsten Satz heißt es: „The system identifier may be changed […]“
Oder der _system_ identifier kann auch ganz fehlen; darauf wollte ich hinaus.
Live long and prosper,
Gunnar* diesmal das Original verlinkt
--
Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)
-
-
-