Teil 5: 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
Diese Angaben haben keinen Effekt auf die Box selbst: Sie ist weiterhin 100% breit und ihre Position ist unverändert. Die Auswirkungen des negativen Werts bei margin-right zeigen sich erst bei nachfolgenden Elementen....
Diese Angaben haben keinen Effekt auf die Box selbst: Sie ist weiterhin 100% breit und ihre Position ist unverändert. Die Auswirkungen des negativen Werts bei margin-right zeigen sich erst bei nachfolgenden Elementen.
Sie verhalten sich so, als wäre die rechte Außenkante des gefloateten Elements um die angegebenen 200px nach innen verschoben, die Box also um 200px schmaler. Ergänzen wir einmal eine weitere Box, die auf die gefloatete Box folgt und 200px breit ist:
<div id="box1"></div><div id="box2"></div>
#box1 {
width: 100%;
float: left;
margin-right: -200px;
}
#box2 {
width: 200px;
}Jetzt sehen Sie den etwas seltsamen Effekt: #box2 wird nicht unterhalb von #box1 positioniert, sondern befindet sich rechts darüber: #box1 ist weiterhin 100% breit, die Inhalte verhalten sich entsprechend und gehen über die ganze Breite.
Nachfolgende Elemente hingegen verhalten sich so, als wäre #box1 um die bei margin-right angegebenen Werte schmaler und positionieren sich entsprechend. Beim echten Einsatz auf einer Website ist es natürlich wichtig, auf jeden Fall eine Überlappung der Inhalte zu verhindern - mehr dazu und zu den Vorteilen von negativen Margins in solchen Fällen sollen im Folgenden genauer ausgeführt werden.
Content First
Nehmen wir an, Sie wollen einen einfachen Zweispalter erstellen: Die Sidebar soll 200px breit sein, der Inhaltsbereich den Rest einnehmen. Dafür brauchen Sie zwei div-Elemente:
<div id="sidebar"></div><div id="container"></div>#sidebar erhält eine Breite von 200px und wird links gefloatet:
#sidebar {
width: 200px;
float: left;
}Ein linker Außenabstand bei #container sorgt dafür, dass #sidebar Platz hat:
#container {
margin-left: 200px;
}Für die Suchmaschinenoptimierung und die Barrierefreiheit ist es jedoch manchmal erwünscht, dass der Inhaltsbereich im Quellcode zuerst steht. Und genau hier kommen wir, sofern der Inhaltsbereich keine vorgegebene Breite hat, an die Grenze der vorgestellten Lösung und brauchen negative Margins. Wie das geht, zeigt Ryan Brill in einem Artikel in A List Apart. Nehmen wir folgende HTML-Grundstruktur:
<div id="container"><div id="inhalt"></div></div><div id="sidebar"></div>Jetzt werden die Bereiche per CSS nebeneinander positioniert. #container rechts, #sidebar links.
#container {
width: 100%;
float: right;
margin-left: -200px;
}
#sidebar {
width: 200px;
float: left;
}
