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.

CSS: Profi-Tipps&Tricks

© 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 zum Thema

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…