Logo

10. Dreispaltiges Layout, 100% breit

» HYPERLINK 1
» HYPERLINK 2
» HYPERLINK 3
» HYPERLINK 4
» HYPERLINK 5
» HYPERLINK 1
» HYPERLINK 2
» HYPERLINK 3
» HYPERLINK 4
» HYPERLINK 5
» HYPERLINK 1
» HYPERLINK 2
» HYPERLINK 3
» HYPERLINK 4
» HYPERLINK 5

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