Logo

Startseite

Drei <div>-Container reichen aus

Drei <div>-Container reichen für dieses Layout aus: Die Titelleiste, das Menü und der Inhalt.

Die Titelleiste

Für die Titelleiste habe ich einen <div>-Container verwendet, da der gesamte Bereich mit einer Hintergrundfarbe eingefärbt werden soll und es mit zwei nebeneinander floatenden Elementen nicht immer möglich ist eine lückenlose Hintergrundfarbe zu erzeugen.
Das Logo und das <h1>-Tag floaten nebeneinander, wie in Beispiel 4 bereits erklärt.

Das Menü

Das Menü ist ebenfalls in einem <div>-Container eingefügt, der mit den folgenden Stylesheets formatiert ist:
background-color:#bdbec6;
width:120px;
float:left;
Die Breite ist auf 120 Pixel festgelegt. Die Eigenschaft float plaziert Elemente auf der Seite und lässt andere vorbeifließen. In diesem Fall wird dem <div>-Container für das Menü float:left zugewiesen, um ihn linksbündig auf der Seite auszurichten und den nachfolgenden Inhalt rechts vorbeifließen zu lassen.

Inhalt

Deshalb ist für den Inhalt, genauer gesagt für den <div>-Container des Inhalts, float:right angegeben, um ihn rechtsbündig neben dem Menü auszurichten. Die kompletten Stylesheetangaben sehen so aus:
border:1px solid #efeff7;
background-color:#efeff7;
width:610px;
float:right;
padding:0px 10px;
Der Netscape und Mozilla färben den Hintergrund für den <div>-Container nur ein, wenn auch ein Rahmen angegeben ist. Da aber kein Rahmen zu sehen sein soll, ist die Rahmen- und Hintergrundfarbe gleich.
Die Breite ist auf 610 Pixel festgelegt. Rechnet man noch den Rahmen, den linken und und rechten Innenabstand und das Menü hinzu, ergibt das insgesamt 760 Pixel (siehe auch Das Boxmodell). Und das ist die Breite des <div>-Container, der den gesamten Inhalt zentriert, wie in Beispiel 3 beschrieben.

Die Menüs

Für die Menüs habe ich jeweils einen <div>-Container verwendet:
<div class="menucontainer">
 <p class="menutitle">MENU 1</p>
 <a class="menu" href="#">Hyperlink 1</a>
 <a class="menu" href="#">Hyperlink 2</a>
 <a class="menu" href="#">Hyperlink 3</a>
 <a class="menu" href="#">Hyperlink 4</a>
 <a class="menu" href="#">Hyperlink 5</a>
</div>
die Stylesheets dazu sehen so aus:
.menutitle{
font-weight:bold;
text-align:center;
margin:2px;
}
.menucontainer {
border:1px solid #000;
background-color:#7b7d8e;
width:106px;
margin:10px;
}
Nach dem Boxmodell berechnet sich die gesamte Breite aus Breite + Rahmen + Außenabstand + Innenabstand. Das ergibt für das Menü 128 Pixel.
Interessant sind die Stylesheets für die Hyperlinks:
a.menu:link, a.menu:visited
{
 color:#eeeeee;
 background-color:#737994;
 text-decoration:none;
}
a.menu:active, a.menu:hover
{
 color:#737994;
 background-color:#eeeeee;
}
a.menu {
 display:block;
 padding:3px;
 border-top:1px solid #000;
 background-color:#737994;
 text-align:center;
 font-weight:bold;
 color:#eeeeee;
 text-decoration:none;
 }

display:block; wandelt die Hyperlinks in Block-Elemente, für die unabhängig von der Textlänge eine einheitliche Breite und Höhe angegeben werden kann. Für den Hover-Effekt werden dann nur die Vorder- und Hintergrundfarbe getauscht.

<br style="clear:both;" /> am Ende des rechten Containers hebt das "nebeneinander-fliessen" wieder auf.