Logo

6. Menüs im Textfluß

Die Eigenschaft float

Die Eigenschaft float plaziert Elemente im Textfluss und lässt andere um dieses herumfließen. So ist es z.B. möglich eine Grafik oder einen <div>-Container rechts- bzw. linksbündig auf der Seite zu plazieren und den Text daneben vorbeifließen zu lassen.

Ein <div>-Container für das Menü

Der folgende <div>-Container wird in diesem Beispiel als Menü verwendet:

<div id="menucontainer">
<p class="menutitle">MENÜ</p>
&raquo; <a class="menu" href="#">HYPERLINK 1</a><br />
&raquo; <a class="menu" href="#">HYPERLINK 2</a><br />
&raquo; <a class="menu" href="#">HYPERLINK 3</a><br />
&raquo; <a class="menu" href="#">HYPERLINK 4</a><br />
&raquo; <a class="menu" href="#">HYPERLINK 5</a><br />
</div>

und das Stylesheet sieht so aus:

#menucontainer {
border:1px solid #606060;
background-color:#dddddd;
width:120px;
float:left;
padding:5px;
margin:0px 5px 5px 0px;
line-height:30px;
}
.menutitle
{
margin:-5px -5px 5px -5px;
padding:2px;
background-color:#cccccc;
font-weight:bold;
border-bottom:1px solid #606060;
}

Der ID-Selektor menucontainer verknüpft die Stylesheet-Angaben mit dem <div>-Container.
Wichtig ist die Angabe float:left. Sie legt fest, dass das Menü linksbündig auf der Seite plaziert wird und der nachfolgende Inhalt rechts vorbeifließt. Und margin:0px 5px 5px 0px; bestimmt den rechten und unteren Abstand zwischen Menü und Inhalt.
Der Menütitel soll farblich hervorgehoben sein und direkt am Rahmen beginnen. Das funktioniert aber normalerweise nicht, da für den <div>-Container ein Innenabstand festgelegt ist. Deshalb bestimmt margin:-5px -5px 5px -5px; einen negativen Außenabstand für das <p>-Tag, sodass sich Innen- und Außenabstand gegenseitig aufheben