Drei Bereiche
Wenn du dir die anderen Beispiele angesehen hast, dann dürfte mehrspaltiges Layout
kein Problem mehr für dich sein. Dieses Beispiel teilt sich in vier Bereiche auf:
Die Titelleiste, die Menüs und der Inhalt
Die Titelleiste
Für die Titelleiste habe ich einen
<div>-Container verwendet,
da der gesamte Bereich mit einem
unteren Rahmen
versehen werden soll und es mit zwei nebeneinander floatenden Elementen nicht immer möglich ist
einen lückenlosen Rahmen zu erzeugen.
Das Logo und das
<h1>-Tag floaten nebeneinander,
wie in
Beispiel 4 bereits erklärt.
Die Menüs
Die Menüs sind ebenfalls in
<div>-Container eingefügt,
die mit den folgenden Stylesheets formatiert sind:
#left, #right {
width:14%;
line-height:18px;
}
#left {
float:left;
}
#right {
float:right;
}
Für die
<div>-Container ist jeweils das
ID-Attribut angegeben:
<div id="left">
Linkes Menü
</div>
...
<div id="right">
Rechtes Menü
</div>
Die
Breite ist auf 14% festgelegt und die
Zeilenhöhe sorgt für etwas Abstand unter den
Hyperlinks im Menü.
Die Eigenschaft
float plaziert Elemente
auf der Seite und lässt andere vorbeifließen. In diesem Fall wird dem
<div>-Container für das linke Menü
float:left
und dem Rechten
float:right zugewiesen, um sie links- und rechtsbündig
auf der Seite zu plazieren.
Inhalt
Ähnlich wie in
Beispiel 7 soll der Inhalt in der Mitte stehen.
Nur dass in diesem Fall ein
<div>-Container mit den folgenden Stylesheets
verwendet wird, damit der Spalteneffekt entsteht:
float:left;
width:66%;
margin-left:3%;
Deshalb ist für den Inhalt, genauer gesagt für den
<div>-Container des Inhalts,
float:left angegeben, um ihn rechtsbündig neben dem Menü auszurichten.
Weiterhin ist die Breite auf 82% festgelegt. Rechnet man die 12% vom Menü dazu, bleiben
6% als horizontaler Abstand zwischen beiden Bereichen übrig. Das ist alles.
Hier ist noch eine auf die
<div>-Container reduzierte
vereinfachte Darstellung
