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 lesen

Chronologische Liste und Netflix-Links -

Neuerscheinungen in der Übersicht -

Vorschau auf Film- und Serien-Highlights -

Mehr zum Thema

Webdesign

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.
Facebook

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?
Online-Recht

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.
Online-Recht in der Cloud

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…
E-Commerce-Logistik

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.