Wundermittel für CSS

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

body erhält position: relative, damit es als Bezugspunkt für die Positionierung der zentrierten Box dient. Außerdem benötigt es eine Mindestgröße und Mindesthöhe in den Ausmaßen von #zentrum; Sie können aber auch ein paar Pixel dazugeben.

body {
min-width: 500px;
min-height: 300px;
position: relative;
}

Damit bleiben die Inhalte immer erreichbar. Allerdings versteht der Internet Explorer Mindesthöhe und -breite erst seit Version 7. Damit die Inhalte bei kleinem Browserfenster auch im Internet Explorer 6 nicht verschwinden, gibt es zwei Möglichkeiten:• Entweder Sie setzen auf die gängigen Methoden zur Simulation von Mindestbreite und -höhe wie die Microsoft-proprietären Expressions• oder Sie benutzen einen zusätzlichen Container mit den Ausmaßen der Box: Dieser sorgt dafür, dass das Browserfenster bei Verkleinerung mit Scrollbalken versehen wird.

Entweder Sie setzen auf die gängigen Methoden zur Simulation von Mindestbreite und -höhe wie die Microsoft-proprietären Expressions oder Sie benutzen einen zusätzlichen Container mit den Ausmaßen der Box: Dieser sorgt dafür, dass das Browserfenster bei Verkleinerung mit Scrollbalken versehen wird.

Negative Margins bei Floats

Besonders spannende Einsatzmöglichkeiten für negative Margins ergeben sich in der Kombination mit Floats: So lassen sich flüssige Layouts gestalten, bei denen Sie die Reihenfolge der Elemente im Quellcode bestimmen können.

CSS: Profi-Tipps&Tricks

© Archiv

Box mit Schlagschatten.

Wie sich negative Margins konkret in Kombination mit gefloateten Elementen auswirken, hängt davon ab, ob die negativen Margins an der Seite sind, in die gefloatet wird, oder an der entgegengesetzten.

Verwenden Sie float: left in der Kombination mit einem negativen linken Margin, so ist das Ergebnis ähnlich wie bei den statischen Elementen: Das gefloatete Element wird in die angegebene Richtung bewegt, kann damit auch aus dem Bildschirm heraus bewegt werden:

#gefloatet {
float: left;
width: 200px;
margin-left: -100px;
}

Wenn Sie das im Internet Explorer 6 ausprobieren, werden Sie die gefloatete Box zunächst nicht sehen. Hier schlägt nämlich der Double Float Margin Bug zu: Wenn Float und Margin in dieselbe Richtung gehen, verdoppelt der Internet Explorer 6 den Außenabstand.

Im Beispiel verschiebt er die Box nicht nur um 100px, sondern um 200px nach links. Um das zu verhindern, benötigt der Internet Explorer 6 zusätzlich die Angabe display: inline.

* html #gefloatet {
display: inline;
}

Weiter unten lesen Sie, wie sich diese Kombination von negativen Margins und Float bei einem Dreispalten-Layout geschickt nutzen lässt. Floaten Sie hingegen in die eine Richtung und vergeben in der anderen Richtung den negativen Margin, ist die Wirkung eine ganz andere.

#box1 {
width: 100%;
float: left;
margin-right: -200px;
}

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