Weitere Infos
Sie lesen:
LB1 (2009)

Diese Website ist von 2009 und wird nicht mehr gepflegt. Die Informationen sind zum großen Teil also wirklich veraltet.
Aktuelle Infos finden Sie hier:
Sie lesen:
LB1 (2009)
Diese Website ist von 2009 und wird nicht mehr gepflegt. Die Informationen sind zum großen Teil also wirklich veraltet.
Aktuelle Infos finden Sie hier:
Die Mischung aus float und margin zur Erstellung mehrspaltiger Layouts ist stabil, übersichtlich und einfach zu realisieren, hat aber zwei potenzielle Nachteile:
Aus diesem Grund möchte ich Ihnen im Folgenden noch kurz eine andere Methode zur Erstellung von float-basierten Layouts vorstellen, bei der erstens ein clear im Textbereich auf den Textbereich beschränkt bleibt und zweitens die Reihenfolge der Bereiche im HTML etwas flexibler ist.
Zunächst erstellen Sie damit wieder ein zweispaltiges Layout:
Weil die Floats in verschiedene Richtungen gehen, wird diese Methode auch entgegengesetzte Floats (opposing floats) genannt.
Ein Vorteil der entgegengesetzten Floats ist, wie gesagt, dass Sie im HTML die Reihenfolge von #textbereich und #navibereich einfach umdrehen können, ohne dass das Layout sich ändert.
Letztendlich ist es also egal, in welcher Reihenfolge die beiden Layoutbereiche im Quelltext stehen, aber in den drei HTML-Dateien aus dem Basisordner für diesen Abschnitt habe ich die Reihenfolge einmal geändert:
<div id="wrapper">
<div id="kopfbereich"> ...</div>
<div id="textbereich">
</div> <!-- Ende #textbereich -->
<div id="navibereich">
</div> <!-- Ende #navibereich -->
<div id="fussbereich"> ...</div>
</div>
Einige Webdesigner bevorzugen diese Quelltext-Reihenfolge, da im Rahmen der Barrierefreiheit der Inhalt dann vor der Navigation steht und Benutzer ohne CSS sich nicht erst durch die Navigation kämpfen müssen, um den Inhalt zu finden.
Andere Designer belassen die Navigation vor dem Inhalt, bieten Besuchern ohne CSS aber einen Skip-Link. Beides sind diskutierbare Meinungen, keine unumstößlichen Tatsachen, und eigentlich nicht wichtig genug für Glaubenskriege.
Apropos Skip-Link. Der springt auf allen drei Seiten zum Textbereich, der jetzt aber sowieso direkt nach dem Kopfbereich kommt. Sinnvoller wäre da ein Link zur Navigation:
<div class="skiplink"><a href="#navibereich">Zur Navigation</a></div>
Auch das ist in den drei Webseiten aus dem Basisordner bereits erledigt.
Für die entgegengesetzten Floats muss gegenüber dem Beispiel mit float und margin nur der Style für #textbereich ein bisschen geändert werden:
Und los geht's.
#textbereich {
float: right;
width: 560px; /* plus 30px padding links und rechts */
padding: 20px 10px 20px 20px;
}
Optisch hat sich im Browser nichts geändert, nur im Quelltext kann der Textbereich jetzt vor dem Navigationsbereich stehen und ein clear im Textbereich hätte keine Auswirkungen mehr auf den Navibereich: