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.

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>

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

  [tab]
  [tab]<!-- CONTENT -->
  [tab]<div class="content_wrap">
  [tab]  
  [tab]  <!-- ganze spalte -->
  [tab]  <div class="grid_11 left">
  [tab]  [tab]<div class="content">
  [tab]  [tab]  ###CONTENT_LEFT###
  [tab]  [tab]</div>
  [tab]  </div>
  [tab]  
  [tab]  <!-- Rechts vom Inhalt -->
  [tab]  <div class="grid_4 right png_fix">
  [tab]  [tab]###CONTENT_RIGHT###
  [tab]  </div>
  [tab]  
  [tab]  <div class="clear"></div>
  [tab]</div>
  [tab]
  [tab]
  [tab]<!-- FOOTER -->
  [tab]<div class="footer_wrap">
  [tab]  <div class="grid_11 footer">
  [tab]  [tab]###COPYRIGHT###
  [tab]  </div>
  [tab]  
  [tab]  <div class="grid_4 footer">
  [tab]  [tab]<ul>
  [tab]  [tab]  ###FOOTER_MENU###
  [tab]  [tab]</ul>
  [tab]  </div>
  [tab]  
  [tab]  <div class="clear"></div>
  [tab]</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 eine Mindesthö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")

  [tab].addClass("balken")

  [tab].css("height", $(document).height());

}

jQuery(function($) {

  fix_outerwrap_bug();

});

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

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!

<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.