Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Micro-Clearfix-Hack

Testen Sie unsere 1870 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Der Micro-Clearfix-Hack bietet die neueste Variante, um ein Bild mit dem umgebenden Absatz innerhalb eines Fließtexts zu umschließen. Dabei arbeitet die Stylesheet-Sprache mit Pseudo-Elementen.

Transkript

Eine weitere Methode zum Umschließen von gefloateten Elementen und die neuste hier in der Reihe von 2011, wie Sie gleich sehen werden, ist der sogenannte Micro-Clearfix-Hack. Das ist mal ein Name. Ausgangspunkt ist wie immer hier diese kuddelmuddel Galerie. Und der New-Micro-Clearfix-Hack vom April 2011 von Nicolas Gallagher ist eine recht simple Sache. Wie man hier sieht beschränkt sich das CSS selbst auf zwei Styles, aber die gedankliche Arbeit dahinter, bis man darauf kommt, dass es so etwas geben könnte, das ist gar nicht so ohne. Ich zeige Ihnen das einmal hier im Editor. Der Micro-Clearfix arbeitet mit Pseudoelementen. Ich vergebe hier die Klasse cf mit dem Pseudoelement :before und direkt darunter wieder die Klasse cf mit dem Pseudoelement :after. Die Klasse kann auch clearfix heißen, dass ist nur länger, die kann auch ganz anders heißen, aber cf ist kurz und bündig und leitet sich von clearfix ab und ist daher gar keine schlechte Wahl. So das ist der Style mit den Pseudoelementen :before und :after. Pseudoelemente sind Elemente, die eigentlich nicht wirklich vorhanden sind also man kann sie nicht direkt ansprechen, sondern nur mit diesen Pseudo-Selektoren hier und die sind im Element vor dem eigentlichen Inhalt bei :before und nach dem eigentlichen Inhalt bei :after. Und dort wird jetzt mit der Eigenschaft content eine Leerstelle eingefügt, Anführungsstrich oben, Leerstelle, Anführungsstrich oben, Semikolon zum Ende. Beachten Sie in der Mitte die Leerstelle, die ist wichtig. Content, die Eigenschaft content fügt eine Leerstelle ein in dieser Anweisung und das Ganze wird auf display:table gesetzt. So, das ist Teil eins. Also vor und nach dem eigentlichen Inhalt wird eine Leerstelle eingefügt und die Pseudoelemente werden auf display:table gesetzt. .cf:after hinten dran noch einmal und das gilt dann nur für das abschließende Pseudoelement nach den Inhalten und da wird gesagt clear:both. Ganz simpel. So, Sie sehen, das hat im Grunde genommen etwas Ähnlichkeit mit der allerersten Methode, ich blende das noch einmal ein, dort wird ein zusätzliches HTML-Element eingefügt und dann gecleart. Im Grunde genommen schließt sich der Kreis wieder nach den ganzen verschiedenen Möglichkeiten zwischendurch, nur das hier das Element nicht manuell eingefügt wird, sondern automatisch hier direkt als Pseudoelement. Und dieses Pseudoelement wird dann gecleart. Einmal speichern, jetzt müssen hier die umgebenden div-Elemente die Klasse cf bekommen. Die Klasse Galerie haben Sie schon, Leerstelle cf und hier auch nochmal Leerstelle cf und jetzt müsste im Browser die Galerie nach einem Neu Laden einigermaßen gut aussehen. So weit, so gut. Es funktioniert. Im Quelltext hier noch einmal zum anschauen, hier ist die Klasse cf und die wird im CSS hier einmal gezeigt, div.galerie da unten kommt sie. Die Pseudoelemente cf:before und cf:after erzeugen eine Leerstelle, die Pseudoelemente bekommen display:table und werden dann gecleart. Die Pseudo Klasse :before , das wird hier erläutert auf der Seite von Nicolas Gallagher. Die Pseudoklasse :before ist eigentlich nicht nötig zum clearen der Floats. Dafür könnte man die auch weglassen, da hätte man nur noch einen Style, aber die ist wichtig, damit die top-margins nicht kollabieren in modernen Browsern und das ist dann genau wie bei den anderen Methode, das beschreibt er hier sehr schön, das stellt sicher, dass wenn man irgendwo anders, aus anderen Gründen eine andere Methode benutzt, wie overflow:hidden, dann sehen sie optisch gleich aus. So, der Micro-Clearfix-Hack hier mit den Pseudoelementen :before und :after und funktioniert und ist einfach in der Benutzung, man muss lediglich den betroffenen, den umgebenen Elementen die Klasse cf zuweisen oder wie immer man das hier genau gennant hat.

Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Sie erfahren, wie HTML-Elemente mit den Eigenschaften "position" und "float" auf Webseiten verschoben werden können und lernen das kontrollierte Zusammenspiel von Float und Clear kennen.

3 Std. 55 min (49 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!