XML-Technologien / CSS / Anspruchsvolle Websites mit CSS / Ein einfaches CSS-Layout / Das Layout aufbauen / Die Seitenleiste neu positionieren

Die Seitenleiste neu positionieren

(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)

Sobald wir mit CSS experimentieren, lernen wir sehr schnell die Flexibilität von CSS-Layouts zu schätzen. Stellen Sie sich vor, wir wollten beispielsweise sehen, ob uns dieses Layout auch gefiele, wenn die Seitenleiste anstatt auf der rechten Seite links vom Hauptbereich angezeigt würde. Dazu müssen Sie lediglich zwei Änderungen in Ihrem Stylesheet durchführen.

Finden Sie zuerst den Abschnitt mit den Regeln für #content und tauschen Sie die Werte für die Außenränder: Auf der linken Seite fügen Sie einen 240px breiten Außenrand ein und setzen den rechten Außenrand auf 0.

#content {
  margin: 0 0 0 240px;
  border: 1px solid #b9d2e3;
  background-color: white;
  color: black;
}

Als Nächstes werden die Deklarationen zur Positionierung des Elements #sidebar getauscht: Anstelle von right: 0 schreiben sie nun left: 0:

#sidebar {
  position: absolute;
  top: 0;
  left: 0;
  width: 220px;
  background-color: #256290;
  color: white;
  margin: 0;
  padding: 0;
}

Speichern Sie Ihre Änderungen und aktualisieren Sie die Seite im Browser. Die Seitenleiste wird jetzt links vom Hauptbereich dargestellt, so wie in der folgenden Abbildung.

Die Seitenleiste wurde neu positioniert

Abbildung: Die Seitenleiste wurde neu positioniert.

<< zurück

vor >>

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Printlayouts mit CSS & HTML

XML-Grundlagen

ePub

Copyright © 2006 der deutschen Übersetzung dpunkt.verlag GmbH
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

dpunkt.verlag GmbH, Ringstraße 19, 69115 Heidelberg