Wundermittel für CSS

Teil 2: 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:

.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>

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".