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