YAML – Clearing von Fließumgebungen mit .floatbox

Heute habe ich mal wieder in der Dokumentation des CSS-Frameworks YAML gestöbert und hatte ein absolutes AHA!-Erlebnis beim Lesen des Abschnitts “Beispiele zum Clearing von Fließumgebungen mit .floatbox“.

Um Floats auf einen Text-Absatz oder den Text bis zur nächsten Überschrift zu beschränken, bedarf es nur der Zuweisung der CSS-Klasse .floatbox für den Textabsatz oder einen DIV-Container, der die Float-umgebung umschließt und an dessen Ende alle gefloateten Elemente automatisch ge”cleart” werden.

Zwei Beispiele (übernommen aus der YAML-Dokumentation):

<p class="floatbox">
  <img src="bild.jpg" style="float:left;" alt="" />
  Hier folgt der Text des Absatzes, welcher das Bild umfliesst ...
</p>

<p>Hier ist der Textfluss zu Ende. Dieser Absatz beginnt immer unterhalb des Bildes.</p>

<h2>Teilüberschrift 1</h2>
<div class="floatbox">
  <img src="bild.jpg" style="float:left;" alt="" />
  <p> ... viel viel Fließtext ...</p>
  <p> ... noch mehr Fließtext ...</p>
  <p> ... und noch ein letzter Absatz im Textfluss</p>
</div>

<h2>Teilüberschrift 2</h2>

Mehr dazu auf den YAML-Seiten »

Tja, keine Ahnung, warum ich das immer überlesen hatte – auf jeden Fall kann ich es hier auf der Netzspielwiese (die ja glücklicherweise auf YAML gebaut ist) richtig gut gebrauchen.
Und damit ich es nicht wieder vergesse, hab´ ich es hier fest gehalten.

Kommentare & Trackbacks

Kommentar von Stefan Asemota:

danke Franziska…will come in handy soon!

6. Juli 2006 um 12:54
Kommentar von Dom:

Hi, wie hast du YAML in Wordpress integriert? Ich bin Neuling auf dem Gebiet und bekomm es einfach nicht hin. Immer fehlt was anderes. Zuest das StyleSheet, dann das Tmplate….
Wär echt super wenn du mir schreiben könntest wie du das gemacht hast…
So long
Dom

28. Juli 2006 um 11:42
Kommentar von Franziska:

Hallo Dom,
also eigentlich habe ich nicht YAML in Wordpress integriert, sondern Wordpress in YAML.
Zuerst habe ich mit Hilfe von YAML ein normales HTML/CSS-Website-Layout erstellt.
Anschließend habe ich mir das Wordpress-Standard-Template angeschaut und das YAML-Layout dementsprechend angepasst.
Dazu zuerst das Layout in 4 Teile geteilt – Header, Inhalt, Sidebar, Footer …
Und dann die im Standard-Template enthaltenen Seiten inclusive Wordpress-Tags und Befehle meinem Layout entsprechend ein- und nachgebaut.

Wünsch´ Dir dabei viel Erfolg!
Franziska

28. Juli 2006 um 12:22
Kommentar von Dom:

Ok, ist anscheinend doch recht kompliziert *g*. Also ich erstelle auf meinen Rechner ein “fertiges” Layout nach meinem Geschmack. Dann schau ich was für Templates das Layout benötigt und füge sie in meine Vorlage ein. So ungefähr richtig? Wie sieht es mit der Dateistruktur aus (Einteilung in Ordner usw.) gibts da was besonderes zu beachten, oder kann man sich an bestehenden Themes orientieren?
Danke für die Hilfe…

28. Juli 2006 um 12:55
Kommentar von Franziska:

Ja, ungefähr richtig.
Dein HTML-Layout nach Deinem Geschmack unterteilst Du am besten schon mal per Kommentaren in die o.g. Teile. Diese sollten möglichst sinnvolle Einheiten bilden, also z.B. Dein div mit der id #footer als Footer ausklammern etc.

Dann nimmst Du am besten die Template-Dateien eines fertigen Wordpress-Templates Deiner Wahl.
Den Ordner kopierst Du und gibst ihm den Namen Deines Templates.
Dann schaust Du Dir die einzelnen Dateien an.

Beim Wordpress-default-Template fügst Du Deinen Header in die Datei header.php ein, Deine Sidebar in die Datei sidebar.php, den Footer in footer.php. Dabei unbedingt darauf achten, dass Du definierte Wordpress-Anweisungen in Deinen Code übernimmst und nicht einfach überschreibst.

Die meisten anderen Dateien erstellst Du dann aus dem Bereich der übrig ist. Das sollte der Inhalts-Bereich sein.

Naja, was soll ich sagen … schau Dir die Vorlagenseiten der Templates an. Dann müsstest Du eigentlich verstehen, was an welche Stelle muss.

Vielleicht schreib ich ja mal einen ausführlichen Artikel darüber.
Hab leider im Moment nicht so viel Zeit, das hier jetzt detailliert darzulegen.

Alles Gute!
Franziska

28. Juli 2006 um 13:11
Kommentar von Dom:

Ok, vielen Dank. Jetzt weiß ich wenigstens wie ich Anfangen und was ich Beachten muss. Ich schreibe Dir nochmal wenn ich ein wenig weiter bin.
Danke
So long
Dom

28. Juli 2006 um 13:16
Kommentar von Michael Cvachovec:

Obwohl der Artikel schon älter ist habe ich ihn mir gleich mal gebookmarkt, bin mir gerade ein neues layout mit yaml und wp am Basteln und versuche zusätzlich über css-klassen auf gallery-plugins zu verzichten zu können.
Eine schöne Umsetzung im Layout ist dir da gelungen.
Viele Grüße
Michael

20. Juni 2008 um 21:02