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

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden Ergebnissen…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste einspannen.…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…