Idee automatisches Clearing beim Grid-System

[lomex]

Hallo,

mache mir gerade Gedanken zum Grid-System, welches bei mir einwandfrei läuft. Jetzt möchte ich den Kunden aber nicht mit den manuellen Clearings belasten.

Nach diversen Experimenten mit zusätzlichem Markup in den mod_article.tpl sowie in den ce_XX.tpl habe ich jetzt folgende Zeile in allen Content-Elementen (ce_XXX.tpl) am Ende (nach dem letzten div) eingefügt.

<?php if (preg_match('/ omega/',$this->class)) echo '<div class="clear"></div>'; ?>

Ist das Overkill? Kann man das auch irgendwie als Modul einbauen, ggfls irgendein Hook ausnutzen?

Was haltet ihr von meiner Idee mit dem Script?


Voraussetzung ist, dass man statt gr sein Grid auf alpha und omega eingestellt hat, da man ja wissen muss, nach welchem Element ein Clearing erfolgen soll.

Habe es bei mir erfolgreich so umgesetzt. Das Problem ist, es ist nicht updatesicher. Kann man sowas irgendwie als Modul umsetzen, das ein Hook oder ähnliches ausnutzt? Quasi ein Häkchen im Backend zur Verfügung stellt?

Oder bin ich komplett auf dem Holzweg?

[Friedhelm]

Wäre das eine Option für Dich?
Clearfix-Methode
Angepasst auf die Klasse .omega

/* Der Kern von Clearfix */
.omega:after {
  content: ".";
  display: block;
  clear: both;
  font-size: 0;
  height: 0;
  visibility: hidden;
}

/* IE-Patch für IE 7*/
*:first-child+html .omega { min-height: 1px; }

/* IE-Patch für IE 6*/
* html .omega{ height: 1%; }

Ich habe allerdings keine Ahnung von Deinem eingesetzten Grid-System - und das Clearing damit klappt.
Wäre, falls das taugt, eine einfache Methode

[leo]

Habe es bei mir erfolgreich so umgesetzt. Das Problem ist, es ist nicht updatesicher.

Wenn Du die Templates im Ordner templates ablegst schon.

[lomex]

Das TL-interne Gridsystem, welches auch im Buch besprochen wird und hier besprochen wurde nur mit der Alternative statt gr alpha und omega zu nehmen (auch dort beschrieben).

<div class="mod_article block">
<div class="ce_text g3 alpha block"> TEXT </div>
<div class="ce_text g3 block"> TEXT </div>
<div class="ce_text g3 block"> TEXT </div>
<div class="ce_text g3 omega block"> TEXT </div>
<!-- automatisches Clearing oder DIV einfügen -->
<div class="ce_text g3 alpha block"> TEXT </div>
<div class="ce_text g3 block"> TEXT </div>
<div class="ce_text g3 block"> TEXT </div>
<div class="ce_text g3 omega block"> TEXT </div>
<!-- automatisches Clearing oder DIV einfügen -->
<div class="ce_text block"> TEXT </div>
</div>

Der DIV nach dem omega (letzte Spalte) soll gecleared werden. Da dieser aber bei erneuten Spalten wieder gefloatet wird, kann ich den DIV ja nicht auch gleichzeitig clearen. Und mit alpha kann ich mir auch nicht behelfen, da dort bei einem "normalen" Text ohne Spalten weder g12 noch alpha stehen.

Mit dem *:fist-child+html .omega Hack spreche ich ja auch nur den Div mit der Klasse Omega an. Aber das Clearing muss ja danach erfolgen, oder? Und :after versteht der IE ja nicht.

Zumindest funktioniert es so bei mir nicht.

[leo]

Die Klasse "gr" ist ja auch nur für verschachtelte Grid-Elemente gedacht und hat gar nichts mit dem Clearing von Floats zu tun. Ehrlich gesagt weiß ich nicht, ob Deine Lösung so viel benutzerfreundlicher ist. Ob der Redakteur nun darauf achten muss, ein zusätzliches Clearing-Element einzufügen, oder alternativ die Klassen "alpha" und "omega" zu vergeben, macht doch letztlich nur wenig Unterschied.

Wieso erstellst Du nicht ein zusätzliches Inhaltselement namens "Absatz" (oder ähnliches), das automatisch das Clearing-Element einfügt? Das ist für einen Redakteur wohl noch am ehesten nachzuvollziehen.

[lomex]

Ja. Das mit dem zusätzlichen Inhaltselement habe ich auch in Erwägung gezogen.

Das gr nicht für das Clearing zuständig ist, war mir klar. Aber auf diverse "gr" oder eben "alpha" und "omega" lässt sich ja wohl so oder so nicht verzichten. Das lässt sich aber auch noch "verkaufen".

Ich persönlich finde halt "alpha" und "omega" oder wie man das Kind auch nennen mag einleuchtender. Und es hat eben den Vorteil (so hoffe ich), dass durch die "Markierung" des letzten Artikels sich recht leicht ein extra div anfügen lässt.

Und ob sich das bei mir auf Dauer durchsetzt, weiß ich nicht. Ist halt ein Versuch. Ersetzt jedenfalls die zahlreichen manuellen "Absätze" ohne extra Markup beim Verfassen. Habe es im aktuellen Projekt nicht nur mit schlauen Redakteuren zu tun, sondern eben auch mit Hausfrauen- /männer (Elternrat Kita). Will da soviel Fehlerquellen wie möglich rausnehmen (inkl. ordentlich beschränktem TinyMCE etc).

Alternativ versuche ich es gerade noch mit dem outputFrontendTemplate Hook, hänge da aber noch an diversen Problemchen (siehe hier). Aber das ist ein anderes Thema.