Teil 6: 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
Um die Überlappung der in #container und #sidebar stehenden Inhalte zu vermeiden, kommt der innerhalb von #container stehende Bereich #inhalt ins Spiel. Hier ergänzen Sie ein margin-left in der Breite von 200px: Damit gibt es keinerlei Überschneidungen mehr....
Um die Überlappung der in #container und #sidebar stehenden Inhalte zu vermeiden, kommt der innerhalb von #container stehende Bereich #inhalt ins Spiel. Hier ergänzen Sie ein margin-left in der Breite von 200px: Damit gibt es keinerlei Überschneidungen mehr.
#inhalt {
margin-left: 200px;
}Wenn Sie den Inhaltsbereich mit einer Hintergrundfarbe versehen wollen, müssen Sie die Angaben ebenfalls bei #inhalt machen. #container ist dafür ungeeignet, weil er sich ja über das ganze Browserfenster erstreckt.
Magische Verschiebungen
Wie Sie negative Margins bei einem Dreispalter benutzen, zeigt Alex Robinson. Es geht wieder um ein per Float realisiertes Layout, bei dem der Inhaltsbereich ebenfalls im Quellcode an erster Stelle sein soll:
<div id="inhalt"></div><div id="navigation"></div><div id="sidebar"></div>Im Layout hingegen soll der Inhalt an seiner üblichen Stelle platziert werden - nämlich in der Mitte. Hierfür erhalten alle Bereiche eine Breite und werden links gefloatet.
#inhalt {
float: left;
width: 34%;
}
#navigation {
float: left;
width: 33%;
}
#sidebar {
float: left;
width: 33%;
}Noch aber fehlt etwas ganz Wesentliches. Denn bisher wird die Inhaltsspalte ganz links angezeigt, rechts davon folgen Navigation und Sidebar. Für das gewünschte Layout müssen #inhalt und #navigation den Platz tauschen und dafür bieten sich Margins an.
Der Inhaltsbereich erhält margin-left: 33%, also einen linken Margin in Breite des Navigationsbereichs. Damit befindet sich der Inhaltsbereich an der richtigen Stelle, nun muss man nur noch die Navigation dazu bringen, dass sie links anstelle von rechts des Inhaltsbereichs angeordnet wird.
Dies geschieht über einen negativen Margin, der so groß ist wie die Breite des Inhaltsbereichs und die Breite der Navigation, im Beispiel also -67%. Somit ergeben sich folgende Formatierungen:
#inhalt {
float: left;
width: 34%;
margin-left: 33%;
display: inline;
}
#navigation {
float: left;
width: 33%;
margin-left: -67%;
display: inline;
}
#sidebar {
float: left;
width: 33%;
}Außerdem wurde bei #inhalt und #navigation noch ein display: inline ergänzt, um den Double Float Margin-Bug im Internet Explorer 6 zu verhindern.
Diese Technik wird an verschiedenen Stellen eingesetzt, so beispielsweise auch beim CSS-Framework YAML für die suchmaschinenoptimierte Variante. Hier gibt es allerdings zwei Modifikationen: Die dritte Spalte - im Beispiel #sidebar - wird rechts anstelle von links gefloatet und erhält außerdem ein margin-left: -5px.
