Wundermittel für CSS

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

8.6.2009 von Redaktion pcmagazin

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

Um die Überlappung der in #container und #sidebar stehenden Inhalte zu vermeiden, kommt der innerhalb von #container stehende Bereich #inhalt ins Spiel. Hier ergänzen Sie ein margin-left in der Breite von 200px: Damit gibt es keinerlei Überschneidungen mehr.

#inhalt {
margin-left: 200px;
}

Wenn Sie den Inhaltsbereich mit einer Hintergrundfarbe versehen wollen, müssen Sie die Angaben ebenfalls bei #inhalt machen. #container ist dafür ungeeignet, weil er sich ja über das ganze Browserfenster erstreckt.

Magische Verschiebungen

Wie Sie negative Margins bei einem Dreispalter benutzen, zeigt Alex Robinson. Es geht wieder um ein per Float realisiertes Layout, bei dem der Inhaltsbereich ebenfalls im Quellcode an erster Stelle sein soll:

<div id="inhalt"></div><div id="navigation"></div><div id="sidebar"></div>

Im Layout hingegen soll der Inhalt an seiner üblichen Stelle platziert werden - nämlich in der Mitte. Hierfür erhalten alle Bereiche eine Breite und werden links gefloatet.

#inhalt {
float: left;
width: 34%;
}
#navigation {
float: left;
width: 33%;
}
#sidebar {
float: left;
width: 33%;
}

Noch aber fehlt etwas ganz Wesentliches. Denn bisher wird die Inhaltsspalte ganz links angezeigt, rechts davon folgen Navigation und Sidebar. Für das gewünschte Layout müssen #inhalt und #navigation den Platz tauschen und dafür bieten sich Margins an.

CSS: Profi-Tipps&Tricks
Gleich lange Spalten über große Werte für padding-bottom und einen negativen Wert für margin-bottom.
© Archiv

Der Inhaltsbereich erhält margin-left: 33%, also einen linken Margin in Breite des Navigationsbereichs. Damit befindet sich der Inhaltsbereich an der richtigen Stelle, nun muss man nur noch die Navigation dazu bringen, dass sie links anstelle von rechts des Inhaltsbereichs angeordnet wird.

Dies geschieht über einen negativen Margin, der so groß ist wie die Breite des Inhaltsbereichs und die Breite der Navigation, im Beispiel also -67%. Somit ergeben sich folgende Formatierungen:

#inhalt {
float: left;
width: 34%;
margin-left: 33%;
display: inline;
}
#navigation {
float: left;
width: 33%;
margin-left: -67%;
display: inline;
}
#sidebar {
float: left;
width: 33%;
}

Außerdem wurde bei #inhalt und #navigation noch ein display: inline ergänzt, um den Double Float Margin-Bug im Internet Explorer 6 zu verhindern.

Diese Technik wird an verschiedenen Stellen eingesetzt, so beispielsweise auch beim CSS-Framework YAML für die suchmaschinenoptimierte Variante. Hier gibt es allerdings zwei Modifikationen: Die dritte Spalte - im Beispiel #sidebar - wird rechts anstelle von links gefloatet und erhält außerdem ein margin-left: -5px.

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.