Wundermittel für CSS

Teil 8: CSS: Profi-Tipps und Tricks - Negative Margins

In einfachen Fällen sind Sie wahrscheinlich mit der Faux-Columns-Methode besser bedient. Wo diese Technik nicht praktikabel ist, ist es aber gut zu wissen, dass es weitere Methoden gibt.

© Archiv

Die Fußzeile befindet sich immer ganz unten im Browserfenster.

Fußzeile immer unten

Auch für eine Fußzeile, die unabhängig von der Länge der Inhalte der Seite immer unten platziert wird, gibt es eine Lösung mit negativen Margins, die von Cameron Adams stammt. Basis ist folgendes HTML-Gerüst:

<div id="container"><div id="inhalt">Inhaltsbereich</div></div><div id="fuss">Fußzeile</div>

Erst einmal muss man dafür sorgen, dass der container unabhängig von den Inhalten immer mindestens 100% hoch ist. Dafür müssen zuerst html und body als Bezugspunkt eine Höhe von 100% erhalten:

html, body {
margin: 0;
padding: 0;
height: 100%;
}

Und der #container erhält die erforderliche Mindesthöhe von 100%.

html, body {
margin: 0;
padding: 0;
height: 100%;
}

Fehlt noch die Angabe für den Internet Explorer, der min-height nicht versteht, er erhält stattdessen eine Höhenangabe für #container von 100%. Hier profitieren wir davon, dass der Internet Explorer 6 Elemente automatisch so ausdehnt, dass die Inhalte darin Platz haben:

* html #container {
height: 100%;
}

Damit füllt #container den ganzen Bildschirm - die Fußzeile würde darunter platziert werden. An dieser Stelle kommen wieder negative Margins ins Spiel: Der Inhaltsbereich erhält ein padding-bottom in der Höhe der Fußzeile. Der Fußzeile selbst weisen Sie die gewünschte Höhe zu und ziehen sie über eine negative Angabe bei margin-top in den sichtbaren Bereich:

#inhalt {
padding-bottom: 2em;
}
#fuss {
position: relative;
margin-top: -2em;
height: 2em;
}

Da der Fußbereich außerhalb des Containers für den Inhalt platziert ist, müssen Sie Breitenangaben, die für die gesamte Seite gelten sollen, dann natürlich ebenfalls für #fuss definieren.

Das gilt genauso für eine eventuelle Zentrierung, die Sie auch für die Fußzeile vornehmen müssen. Diese Layout-Variante basiert darauf, dass Sie wissen, wie hoch die Fußzeile ist. Als Einheit für die Höhenangabe bietet sich em an: So wird die Fußzeile bei vergrößerter Schrift ebenfalls automatisch vergrößert.

Alles in allem kann man sagen, dass es für negative Margins viele und spannende Einsatzmöglichkeiten gibt. Und dabei darf man nicht vergessen: Negative Margins sind keine obskuren Hacks, sondern im CSS-Standard vorgesehen.

Mehr lesen

Chronologische Liste und Netflix-Links -

Neuerscheinungen in der Übersicht -

Vorschau auf Film- und Serien-Highlights -

Mehr zum Thema

Webdesign

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.
Facebook

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?
Online-Recht

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.
Online-Recht in der Cloud

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…
E-Commerce-Logistik

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.