Diesmal geht es die Höhe von Div-Containern. Findige Designer haben sich ausgedacht ein Layout zu basteln, welches eine Fußzeile besitzt die immer am unteren Bildschirmrand klebt. Es sei denn der Inhalt ist größer, dann muss die Fußzeile mit runterrutschen.
Soweit kein Problem; vor einiger Zeit habe ich ein schönes Beispiel gefunden welches genau diese Problem löst, in allen Browsern und nur mit CSS. Was aber, wenn die Seite mit dem 960 Grid System CSS Framework aufgebaut wurde und nicht nur ein Footer hat sondern zwei?
Um genau zu sein, ist die Breite vom CSS Framework auf 960 Pixel beschränkt, der Footer mit Inhalten befindet sich innerhalb des umfassenden Containers, aber die Hintergrundgrafik soll über die gesamte Breite gehen.
Unmöglich? Niemals! Es folgt eine Skizze, der Lösungsansatz und ein paar Worte über das 960.gs. Zum Eintrag Layout mit 100 Prozent Höhe →
Der Pixelgangster hat mich auf das schöne Tool CSSTidy aufmerksam gemacht. Mit umfangreichen Möglichkeiten lassen sich so Stylesheets komprimieren und aufräumen. Verfügbar ist es als Software für Windows, Linux und OSX, aber auch als PHP Script (meine Wahl). So sieht es aus:
Nach der "Reinigung" gibt es ein übersichtliches Protokoll der vorgenommenen Änderungen:
Die CSS Datei von Papyros hat es mit den oben gezeigten Einstellungen um 22% geschrumpft, was ich nicht als primären Grund für die Verwendung ansehe. Viel praktischer ist es während der Entwicklung gnadenlos zu kommentieren (auch kleine Nachrichten an die Mitentwickler sind immer wieder Quell der Freude), und beim Onlinegang rauszuschmeißen.
Wir brauchen mehrere Div-Container welche dynamisch per Typo3 gefüllt werden. Der Designer hat sich gemeinerweise ausgedacht, dass die Spalten stets die gleiche Höhe einnehmen und mit einer schönen Hintergrundfarbe versehen sein sollen.
Der Redakteur kann dabei bestimmen ob ein Inhaltselement ein Viertel oder zwei Viertel einnehmen soll. Dieser HTML Code wird erzeugt:
<div class="wrap">
<div class="box">Bla bla bla</div>
<div class="box">Blu blu blu</div>
<div class="box">Bingo Bongo</div>
</div>
Lösung: Bei Ejeliot habe ich eine spannende Möglichkeit entdeckt. Die Spalten erhalten einen großen Abstand per Padding mit gleichzeitigem negativen Margin! Der Trick liegt im umfassenden Container. Per overflow:hidden; werden die überflüssigen Abstände entfernt! Das CSS ist in etwa dieses hier:
.wrap {
overflow:hidden;
}
.box {
float:left;
padding:5px 5px 2005px 5px;
margin-bottom:-2000px;
}
Über die 5 Pixel unterschied im Padding bekommen die Boxen den gleichen Abstand nach unten wie zu den anderen Seiten. So schön und effektiv das vorgehen auch ist, es gibt leider ein paar Probleme (Position is everything). Bin gespannt wann sie mich eine ganze Nacht lang aufhalten...
Davor lohnt sich aber ein Blick auf das komplett in JavaScript geschrieben SuperMario Spielchen von nihilogic. Ohne externe Grafiken! Herrlich.