Teil 8: CSS: Profi-Tipps und Tricks - Negative Margins
- CSS: Profi-Tipps und Tricks - Negative Margins
- Teil 2: CSS: Profi-Tipps und Tricks - Negative Margins
- Teil 3: CSS: Profi-Tipps und Tricks - Negative Margins
- Teil 4: CSS: Profi-Tipps und Tricks - Negative Margins
- Teil 5: CSS: Profi-Tipps und Tricks - Negative Margins
- Teil 6: CSS: Profi-Tipps und Tricks - Negative Margins
- Teil 7: CSS: Profi-Tipps und Tricks - Negative Margins
- 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....
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.
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.
