Wundermittel für CSS

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

8.6.2009 von Redaktion pcmagazin

ca. 1:40 Min
Ratgeber
  1. CSS: Profi-Tipps und Tricks - Negative Margins
  2. Teil 2: CSS: Profi-Tipps und Tricks - Negative Margins
  3. Teil 3: CSS: Profi-Tipps und Tricks - Negative Margins
  4. Teil 4: CSS: Profi-Tipps und Tricks - Negative Margins
  5. Teil 5: CSS: Profi-Tipps und Tricks - Negative Margins
  6. Teil 6: CSS: Profi-Tipps und Tricks - Negative Margins
  7. Teil 7: CSS: Profi-Tipps und Tricks - Negative Margins
  8. 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
Die Fußzeile befindet sich immer ganz unten im Browserfenster.
© Archiv

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

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

internet, webdesign, adobe,  Illustrator, CS6

Webdesign

Webdesign in Adobe Illustrator CS6

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

Facebook stellte die neue Suche

Facebook

Facebooks Social Graph Search

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

Der BGH erklärt das Internet zur Lebensgrundlage.

Online-Recht

Darauf müssen Sie bei den AGB achten

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.

Online-Urheberrecht: Unser Ratgeber bietet Tipps für das Cloud-Recht.

Online-Recht in der Cloud

Wie sieht das Urheberrecht in der Wolke aus?

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

Logistik im E-Commerce: Prozesse rund um die Logistik.

E-Commerce-Logistik

Logistik im E-Commerce

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