Teil 2: 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
Vergibt man bei einem darin enthaltenen Absatz seitliche negative Margins, wird der Absatz um die angegebenen Werte breiter und ragt aus dem Elternelement heraus:...
Vergibt man bei einem darin enthaltenen Absatz seitliche negative Margins, wird der Absatz um die angegebenen Werte breiter und ragt aus dem Elternelement heraus:
.negative { margin: 0 -30px; }Im Internet Explorer 6 sind jedoch die beiden Bereiche, die eigentlich rechts und links hervorstehen sollen, einfach abgeschnitten. Für eine korrekte Darstellung braucht der Absatz zweierlei Angaben: zum einen eine Höhe von 1px, damit er hasLayout erhält, und zum anderen position: relative.
* html .negative {
height: 1px;
position: relative;
}Auch im IE7 funktioniert das Beispiel nicht wie gewünscht: Hier sind zwar nicht wie im IE6 beide Seiten abgeschnitten, wohl aber die rechte. Um das zu korrigieren benötigt das Element mit den negativen Margins ebenfalls hasLayout. Dies geht hier am einfachsten durch eine Mindesthöhe von 0.
.negative { min-height: 0; }Diese Angaben für den IE bringen Sie am besten in konditionalen Kommentaren unter, damit sie nicht von anderen Browsern ausgelesen werden. Damit ergibt sich folgender CSS-Code für eine browserübergreifende konsistente Darstellung der herausragenden Bereiche:
<style type="text/css">
.negative { margin: 0 -30px; }</style><!--[if lte IE 7]><style type="text/css">
* html .negative { /* für IE6 */
height: 1px;
position: relative;
}
.negative { /* hasLayout für IE7 */
min-height: 0;
}</style><![endif]-->Für negative seitliche Margins gibt es verschiedene Einsatzmöglichkeiten. Sie können damit beispielsweise Bilder aus dem umgebenden Block herausbewegen oder Überschriften aus dem Textblock ausbrechen lassen.
Die folgende Anweisung sorgt dafür, dass der Block mit der h1-Überschrift um 50px weiter nach links herausragt als der sonstige Text.
h1 {
margin-left: -50px;
background-color: #9BCC8F;
padding-left: 50px;
}Durch die Angabe eines Werts für padding-left in derselben Größe wie des negativen Werts bei margin-left erreicht man, dass der Text der Überschrift auf derselben Höhe wie der andere Text angezeigt wird und nur die Box - hier an der Hintergrundfarbe zu erkennen - nach links herausragt. Auch hier müssen Sie die oben beschriebenen Sonderangaben für den Internet Explorer machen, damit dieser das Beispiel richtig darstellt.
Ein weiteres Anwendungsbeispiel für negative Margins bei verschachtelten Elementen ist die Realisierung eines Schlagschattens. In einem Artikel in einer früheren Ausgabe des Internet Magazins haben Sie gesehen, wie man einen Schlagschatten um ein Bild einfügt; hier sehen Sie, wie man eine Box mit Schlagschatten versieht. Dafür wird ein Container mit einer Klasse versehen und darin ein Absatz positioniert:
<div class="schatten"><p>Absatz</p></div>
