Unser neues Layout mit float
(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)
Nachdem wir uns in einem einfachen Beispiel angeschaut haben, wie man mit der Eigenschaft float ein mehrspaltiges Layout erzeugen kann, werden wir diese Technik nun auf unsere Seite übertragen.
Zuerst müssen wir unser Dokument anpassen und die beiden Seitenleisten vor den Hauptbereich stellen.
<body>
<div id="wrapper">
<div id="header">
...
</div> <!-- header -->
<div id="main">
<div id="sidebar">
...
</div> <!-- sidebar -->
<div id="sidebar2">
...
</div> <!-- sidebar2 -->
<div id="content">
...
</div> <!-- content -->
</div> <!-- main -->
<div id="footer">
<p>Copyright 2006 - All Rights Reserved</p>
</div> <!-- footer -->
</div> <!-- wrapper -->
</body>Als Ausgangsbasis für das Stylesheet nehmen wir die Datei floatexample.css aus dem vorherigen Beispiel und kopieren einfach die restlichen Stilregeln dort hinein. Zuerst suchen wir die Deklarationen, in denen die verschiedenen Bereiche der Seite positioniert werden.
Dann ersetzen wir die Angaben zur Positionierung in der Datei styles.css (alle Eigenschaften position, top, left und right) mit den float- bzw. clear-Deklarationen.
#sidebar {
float: right;
width: 220px;
background-color: #256290;
margin: 0;
padding: 0;
color: white;
}
#sidebar2 {
float: left;
width: 159px;
border-top: 1px solid #b9d2e3;
border-left: 1px solid #b9d2e3;
border-bottom: 1px solid #b9d2e3;
background-color: white;
color: black;
margin: 0;
padding: 0;
}
#footer {
width: 100%;
border-top: 1px solid #b9d2e3;
border-bottom: 1px solid #b9d2e3;
margin-top: 10px;
clear: both;
}Im letzten Schritt löschen wir die Regeln für position, top und left aus den Deklarationen des div-Elements #main. Sie erinnern sich, dass dieser Bereich mit der Regel position: relative positioniert war, um einen Positionierungskontext für die Seitenleiste zu schaffen. Da die Seitenleiste diesen nicht mehr braucht, können wir diese Regel löschen.
Dass die verschiedenen Bereiche unserer Seite mit den gemachten Änderungen korrekt angeordnet werden, können Sie in der folgenden Abbildung sehen.
Abbildung: Die Seitenleisten schweben mit float nach rechts und links.
Am Ende sollte die Seite genau so aussehen wie mit unserem originalen absolut positionierten Layout. Allerdings wird die Fußleiste immer am Ende der Seite angezeigt und läuft über alle Spalten, egal wie viel Inhalte in den beiden Seitenleisten oder im Hauptbereich enthalten sind. Wie die Seite im Internet Explorer aussieht, zeigt die folgende Abbildung.
Abbildung: Das Layout im Internet Explorer 6.
| << 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