Ein Artikel von Paul Lunow, erschienen 2009 auf Interaktionsdesigner.de.

Zuletzt überarbeitet am von : .

Denkst Du darüber nach zu gründen? Eine Familie oder ein Startup oder beides? In der zweiten Staffel meines Podcasts spreche ich mit tollen Menschen genau darüber. Lass Dich inspirieren und abonniere meinen Podcast: Auf Apple Podcast, Spotify und auf www.gründerväter.net.

Die Anforderung

Diese Skizze soll das Problem verdeutlichen. Der weiße Bereich ist der Inhalt welcher sich in der Höhe ausdehnt und den gesamten Platz ein nimmt. Header und Footer sollen aber über die gesamte Breite gehen, wobei die Inhalte sich aber am Content orientieren müssen da die gesamte Seite zentriert ist. “Viel Spaß” hat der Designer gesagt, hatte ich auch!

Das 960.gs

CSS Frameworks sind in aller Munde und es lassen sich damit wirklich schnell und einfach Layouts aufbauen. Ich habe mich in diesem Projekt gegen das kompliziertere, aber dafür flexiblere YAML entschieden weil es mir überdimensioniert erschien. Im 960.gs entscheidet man sich für ein 12- oder 16-spaltiges Layout und benennt, je nach dem, den umfassenden Container:

<div class="container_16"></div>

Anschließend hat man innerhalb mit den Klassen grid_1 bis grid_16 (bzw. grid_12) beliebige Möglichkeiten zur Steuerung der Inhalte. Auch die Integration in TYPO3 ist natürlich überhaupt kein Problem, mein Template sieht für das oben beschriebene Projekt so aus:

<div class="outerwrap">
    <div class="container_16 wrap png_fix">
        
        <!-- KOPF -->
        <div class="grid_11 top">
            <ul class="menu sf-menu">
                ###MAIN_MENU###
            </ul>
        </div>
        
        <div class="grid_4 top logo">
            ###LOGO###
        </div>
        
        <!-- TEASER (Bild) -->
        <div class="grid_11 teaser left">
            ###TEASER###
        </div>
        
        <div class="grid_4 teaser right png_fix">
            ###LOGIN###
        </div>

        
        <!-- CONTENT -->
        <div class="content_wrap">
            
            <!-- ganze spalte -->
            <div class="grid_11 left">
                <div class="content">
                    ###CONTENT_LEFT###
                </div>
            </div>
            
            <!-- Rechts vom Inhalt -->
            <div class="grid_4 right png_fix">
                ###CONTENT_RIGHT###
            </div>
            
            <div class="clear"></div>
        </div>
        
        
        <!-- FOOTER -->
        <div class="footer_wrap">
            <div class="grid_11 footer">
                ###COPYRIGHT###
            </div>
            
            <div class="grid_4 footer">
                <ul>
                    ###FOOTER_MENU###
                </ul>
            </div>
            
            <div class="clear"></div>
        </div>
    </div>
</div>

Ein allgemeines Problem von CSS Frameworks wird in diesem Template auch gleich sichtbar: CSS Frameworks neigen zur Divirites. Dafür wird einem aber eine große Menge CSS-Nerv abgenommen. Hier bleibt kritisch zu betrachten wie viel Traffic die Seite zu erwarten hat und wie viel Zeit für die Realisierung veranschlagt wurde.

100% Höhe Nr. 1

Die kleinere Aufgabe besteht darin den Footer an das untere Ende der Seite zu kleben. Das geht mit dem Tutorial von xs4all ganz leicht: Der Container wrap bekommt eine relative Position zugewiesen und eineMindesthöhe von 100%. Der footer_wrap wird absolut positioniert und mit bottom:0 an den unteren Rand vom wrap gelegt. Damit bei längerem Inhalt oder kleinem Browserfenster, der Inhalt nicht über den Footer reicht kriegt der Container content_wrap einen Innenabstand (padding) nach unten, welcher der Höhe vom Footer plus Abstand enthält. Das ist der Trick!

100% Höhe Nr. 2

Jetzt hat der Footer noch kein Hintergrundbild. Damit es über die gesamte Breite geht kriegt es der Container outerwrap. Der hat allerdings ein Problem: Bei 100% Höhe hängt der Balken immer am unteren Browserrand. Wenn die Inhalte länger sind, bleibt der Balken einfach stehen. Im Bild repräsentiert der schwarze Rahmen das Browserfenster. Da im guten Standard Typoscript sowieso jQuery eingebunden ist und für diverse Zwecke genutzt wird, kann das Lieblingsframework hier treue Dienste leisten: Die Besucher ohne JavaScript kriegen einfach keinen Balken zu sehen. Dem Container outerwrap wird das Hintergrundbild wieder genommen und statt dessen der Klasse balken zugewiesen. Im jQueryscript wird eine Funktion hinzugefügt: fix_outerwrap_bug().

function fix_outerwrap_bug() {
    $(".outerwrap")
        .addClass("balken")
        .css("height", $(document).height());
}

Damit erhält der Container outerwrap die Klasse balken (sofern noch nicht vorhanden; das checkt jQuery von alleine) und die Höhe des Dokuments zugewiesen. Die Funktion muss beim laden der Seite aufgerufen werden:

jQuery(function($) {
    fix_outerwrap_bug();
});

Funktioniert einwandfrei, allerdings nur beim ersten laden der Seite. Der findige Internetbenutzer der die Größe des Browserfensters verändert kriegt Blödsinn zu sehen. Deshalb noch eine Zeile hinzufügen:

$(window).resize(function() { fix_outerwrap_bug(); });

Eigentlich selbsterklärend: Bei Größenänderung (resize()) vom Fenster ($(window)) wird die Funktion fix_outerwrap_bug() aufgerufen. Das wars!

Fazit

Das es ohne JavaScript nicht funktioniert ist natürlich nicht ganz so schön, aber für eine Kleinigkeit im Design zu verkraften. Selber Schuld wer JavaScript deaktivert. Dank jQuery ist es ganz einfach und validieren tut es auch, warum also nicht? Wer die vorgestellte Lösung in Aktion sehen will, dem sei ein Besuch auf der Seite http://www.arminiusfunds.com ans Herz gelegt. **Viel Spaß **und frohes investieren!