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

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