Wundermittel für CSS

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

8.6.2009 von Redaktion pcmagazin

ca. 1:45 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

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
Box mit Schlagschatten.
© Archiv

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