Markup-loses clearing von Spalte3: Hinweis auf die Rolle der Pseudoklasse :after

[Andreas-L]

Lieber Herr Jesse, liebe Community,

seit kurzer Zeit bin ich dabei, mich mit YAML zu beschäftigen und freue mich über die neuen Möglichkeiten, die sich dadurch ergeben werden. In der Dokumentation habe ich mich etwas schwer damit getan, die clear-Methode (clearfix, Abschnitt 2.6 und 2.7) zu verstehen; insbesondere für die statische Spalte 3.
Mir war unklar, weshalb sich der Container der statischen Spalte 3 (wo das clear ja global wirkt) einerseits bis unter die längste float Spalte ausdehnt, aber andererseits der Inhalt von Spalte 3 trotzdem wie gewollt ganz normal oben zwischen den beiden float Spalten beginnen kann.
Wenn ich es nun doch endlich recht verstanden habe, liegt das an der im clearfix benutzten Pseudoklasse :after, durch die der clear Effekt eben erst nach dem Inhalt des Spalten3-divs ausgeführt wird (und zwar für den als unsichtbar definierten "Punkt").
Wenn dem wirklich so sein sollte, dann fände ich es hilfreich, auf diese wichtige Rolle der :after Pseudoklasse in der Doku noch deutlicher und expliziter als bisher hinzuweisen. Nicht nur Neulingen dürfte die :after Pseudoklasse relativ unbekannt sein. Denn gerade die Tatsache, dass der Inhalt von Spalte 3 trotzdem richtig positioniert ist, ist doch der Clou an der Sache! Eine geignete Stelle könnte hierfür der erste Absatz in 2.7 oder aber der Text unter dem clearfix code in 2.6 sein.
Sollte ich mich irren und die richtige Positionierung des Inhalts in Spalte 3 nichts mit der :after Pseudoklasse zu tun haben, so bitte ich auch hier gerne um Rückmeldung!

Vielen Dank

Andreas

[djesse]

Hallo Andreas,

Wenn ich es nun doch endlich recht verstanden habe, liegt das an der im clearfix benutzten Pseudoklasse :after, durch die der clear Effekt eben erst nach dem Inhalt des Spalten3-divs ausgeführt wird (und zwar für den als unsichtbar definierten "Punkt").

Das ist korrekt.

Wenn dem wirklich so sein sollte, dann fände ich es hilfreich, auf diese wichtige Rolle der :after Pseudoklasse in der Doku noch deutlicher und expliziter als bisher hinzuweisen. Nicht nur Neulingen dürfte die :after Pseudoklasse relativ unbekannt sein. Denn gerade die Tatsache, dass der Inhalt von Spalte 3 trotzdem richtig positioniert ist, ist doch der Clou an der Sache! Eine geignete Stelle könnte hierfür der erste Absatz in 2.7 oder aber der Text unter dem clearfix code in 2.6 sein.

Der Hinweis auf die Verwendung der Clearfix-Methode erfolgt in der Doku bereits in Abschnitt 2.3 ...
http://www.yaml.de/de/dokumentation/...lgemeines.html

Dort wird sowohl auf den englischsprachigen Originalartikel "How To Clear Floats Without Structural Markup" als auch auf die deutsche Übersetzung verlinkt.

[en] http://www.positioniseverything.net/easyclearing.html
[de] http://jassesnee.de/easyclear/

In beiden Artikeln wird die Rolle von :after ausführlich besprochen.

Viele Grüße
Dirk Jesse

[Andreas-L]

Hallo Herr Jesse,

danke für die schnelle Antwort. Danke auch für den Hinweis auf den Artikel, in dem die passenden Informationen stehen.
Wäre es aber nicht trotzdem eventuell möglich, einen ganz kurzen Satz in der Doku zu diesem Thema zu schreiben?

In 2.3 wäre dies eventuell zu früh, da hier ja noch nicht ins Detail gegangen wird. Ginge es unter Umständen in 2.6 am Ende des ersten Absatzes nach dem clearfix code?

Wie man sieht, kommt auch beim Clearfix-Hack clear:both; zum Einsatz. Innerhalb der float-Spalten #col1 und #col2 wirkt die Eigenschaft clear daher nur lokal. Genau, wie man es sich wünscht. Innerhalb des statischen Containers #col3 wirkt clear:both jedoch global und sorgt somit dafür, dass der Container #col3_content bis zum unteren Ende der längsten float-Spalte verlängert wird. Auch dieses Verhalten ist innerhalb des YAML-Frameworks ausdrücklich erwünscht.

"Die Verwendung der Pseudoklasse :after im Clearfix-Hack bewirkt hierbei, daß der Inhalt des Containers #col3_content NICHT nach unten bis zum unteren Ende der längsten float-Spalte verschoben wird, sondern weiterhin wie erwünscht zwischen #col1 und #col2 floated."

In etwa so? Könnte das passen?


Viele Grüße und vielen Dank für das tolle framework!

Andreas

[makcie]

Hallo Andreas,

"Die Verwendung der Pseudoklasse :after im Clearfix-Hack bewirkt hierbei, daß der Inhalt des Containers #col3_content NICHT nach unten bis zum unteren Ende der längsten float-Spalte verschoben wird, sondern weiterhin wie erwünscht zwischen #col1 und #col2 floated."

Diese zusätzliche Formulierung ist nicht exakt.

In dem von Dir angeführten Zitat aus Abschnitt 2.6 http://www.yaml.de/de/dokumentation/...on-floats.html
wird erklärt, warum die statische Spalte #col3 bis zum untersten Ende der längsten float-Spalte verlängert wird - weil in einer statischen Spalte clear: both global (und nicht lokal wie in float-Spalten) wirkt.

In den YAML-Beispielen wird clear:both sowohl in den float-Spalten als auch in der statischen Spalte #col3 mit der Clearfix-Methode eingefügt - diese Methode wird in der Doku nicht im Detail erläutert, Dirk Jesse verweist auf den entsprechenden Originalartikel und auf die deutsche Übersetzung. In seinem Buch "CSS-Layouts" hat er die Clearfix-Methode ausführlich erklärt ( 2. Auflage, Seite 108ff).

Was bewirkt das Pseudoelement : after?
siehe hierzu
http://de.selfhtml.org/css/eigenscha...m#before_after
Mit dem Pseudoelement :after wird nach einem Element automatisch Inhalt eingefügt.
Der generierte Inhalt erscheint auf der Webseite, als wäre er ein echtes HTML-Element.

Was bewirkt :after im Zusammenhang mit der Klasse .clearfix?
Dirk Jesse schreibt dazu in seinem Buch:

"Über die Pseudoklasse :after (CSS2) wird zunächst in allen modernen Browsern das automatische Clearing am Ende des Elements, welches diese Klasse zugewiesen bekommt, aktiviert."

siehe dazu noch einen zusätzlicher Link: http://little-boxes.de/?p=149
Peter Müller erläutert hier die Clearfix-Methode Zeile für Zeile. Anschließend fasst er das Ganze kurz zusammen:
"Mit der Pseudoklasse :after wird am Ende des zu clearenden Elements ein ganz simpler Punkt erzeugt, der anschließend geblockt, gecleart und unsichtbar gemacht wird."

Der Punkt wird in den YAML-Beispielen am Ende von
<div id="col1_content" class="clearfix">.....</div>
<div id="col2_content" class="clearfix">.....</div>
<div id="col3_content" class="clearfix">.....</div>]
erzeugt.
Wenn Du diesen Punkt sehen willst, dann ändere mal die base.css (nur zum Testen) und gib ein--> height: auto und visibility: visible.
Du kannst dann diesen mickrigen Punkt in seiner ganzen Pracht und Schönheit bestaunen! Vergiss nicht, diese Änderungen wieder rückgängig zu machen.

Nur nebenbei:
In den YAML-Beispielen 2-1-3 und 3-1-2 (neue Fassung) ist auch #col3 eine float-Spalte. Die Klasse clearfix wirkt dann nicht mehr global, sondern nur lokal. Damit ist nicht mehr gewährleistet, dass #col3 zur längsten Spalte wird. In diesen Beispielen kommt die Methode "Clearing mittels eines zusätzlichen floats" zum Einsatz, die Dirk Jesse in seinem Buch auf den Seiten 112/113 erläutert:
Um die drei floatenden Spalten einzuschließen, wird für #main float: left und width: 100% definiert. Zusätzlich wird dem direkt nach #main folgenden Element (#footer) clear: both zugewiesen. Die Zuweisung von clear:both erfolgt in der base.css, in der vorsorglich eingefügt wurde:
/* (de) Absicherung korrekte Positionierung */
#header, #nav, #main, #footer {clear: both; }


Gruß, makcie

PS: Ist :after eine Pseudoklasse oder ein Pseudoelement?
Meine Recherche hat ergeben -->:after ist ein Pseudoelement.
Für das Verständnis der Clearfix-Methode ist das allerdings eher unwichtig.