Wundermittel für CSS

Teil 3: CSS: Profi-Tipps und Tricks - Negative Margins

8.6.2009 von Redaktion pcmagazin

ca. 1:25 Min
Ratgeber
  1. CSS: Profi-Tipps und Tricks - Negative Margins
  2. Teil 2: CSS: Profi-Tipps und Tricks - Negative Margins
  3. Teil 3: CSS: Profi-Tipps und Tricks - Negative Margins
  4. Teil 4: CSS: Profi-Tipps und Tricks - Negative Margins
  5. Teil 5: CSS: Profi-Tipps und Tricks - Negative Margins
  6. Teil 6: CSS: Profi-Tipps und Tricks - Negative Margins
  7. Teil 7: CSS: Profi-Tipps und Tricks - Negative Margins
  8. Teil 8: CSS: Profi-Tipps und Tricks - Negative Margins

Die umfassende Box wird gefloatet und erhält eine Hintergrundfarbe, die die Farbe für den Schlagschatten vorgibt.

.schatten {
float: left;
background-color: #264020;
}

Das innere Element wird über Margins verschoben: Entscheidend sind die negativen Werte für oben und links, die dafür sorgen, dass das innere Element sich aus der Box seines Elternelements herausschiebt.

.schatten p {
margin: -5px 5px 5px -5px;
position: relative;
padding: 5px;
width: 300px;
background-color: #D3E6CF;
}

Rechts und unten sieht man die Elternbox als schmalen 5px breiten Streifen, was die Illusion des Schlagschattens erzeugt.

Zentrieren

Bisher wurden negative Margins immer bei statischen, das heißt, nicht positionierten oder gefloateten Elementen eingesetzt. Bei positionierten Elementen dienen negative Margins zur Zentrierung. Eine Box mit einer festgelegten Breite soll horizontal und vertikal zentriert werden:

<div id="zentriert"></div>

Die Box wird absolut positioniert und mit left: 50% und top: 50% die Position bestimmt.

#zentriert {
width: 500px;
height: 300px;
background-color:
#9BCC8F;
position: absolute;
top: 50%;
left: 50%;
}

Damit befindet sich die linke obere Ecke der Box immer im Mittelpunkt des Browserfensters. Bei einer zentrierten Box muss jedoch der Mittelpunkt genau in der Mitte des Browserfensters liegen.

CSS: Profi-Tipps&Tricks
Immer zentriert - über absolute Positionierung und negative Margins.
© Archiv

Hierfür muss man die Box um die Hälfte ihrer Breite nach links schieben und um die Hälfte ihrer Höhe nach oben. Genau dafür kommen wieder negative Margins zum Einsatz. Die CSS-Angaben sehen also folgendermaßen aus:

#zentrum {
width: 500px;
height: 300px;
background-color: #9BCC8F;
position: absolute;
top: 50%;
left: 50%;
margin-left: -250px; /* Hälfte
der Breite */
margin-top: -150px; /* Hälfte
der Höhe */
}

Einen Nachteil hat diese Lösung: Wird das Browserfenster kleiner als die Box breit ist, verschwinden Inhalte nach links oben und sind auch über Scrollleisten nicht erreichbar. Verhindern lässt sich dies über die Vergabe einer Mindestbreite und einer Mindesthöhe. Dafür setzt man zuerst die Höhe von body und html auf 100% und entfernt die Abstände:

html, body {
height: 100%;
margin: 0;
padding: 0;
}

Mehr lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

internet, webdesign, adobe,  Illustrator, CS6

Webdesign

Webdesign in Adobe Illustrator CS6

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

Facebook stellte die neue Suche

Facebook

Facebooks Social Graph Search

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

Der BGH erklärt das Internet zur Lebensgrundlage.

Online-Recht

Darauf müssen Sie bei den AGB achten

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.

Online-Urheberrecht: Unser Ratgeber bietet Tipps für das Cloud-Recht.

Online-Recht in der Cloud

Wie sieht das Urheberrecht in der Wolke aus?

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

Logistik im E-Commerce: Prozesse rund um die Logistik.

E-Commerce-Logistik

Logistik im E-Commerce

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