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.