Sandkasten

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">       CSS 4 You - The Finest in Stylesheets: Workshop Layouten ohne Tabellen  10. Dreispaltiges Layout, 100% breit

MENU 1 &raquo; HYPERLINK 1

&raquo; HYPERLINK 2

&raquo; HYPERLINK 3

&raquo; HYPERLINK 4

&raquo; HYPERLINK 5</a>

MENU 2 &raquo; HYPERLINK 1</a>

&raquo; HYPERLINK 2</a>

&raquo; HYPERLINK 3</a>

&raquo; HYPERLINK 4</a>

&raquo; HYPERLINK 5</a>

MENU 3 &raquo; HYPERLINK 1</a>

&raquo; HYPERLINK 2</a>

&raquo; HYPERLINK 3</a>

&raquo; HYPERLINK 4</a>

&raquo; HYPERLINK 5</a>

MENU 4 &raquo; HYPERLINK 1</a>

&raquo; HYPERLINK 2</a>

&raquo; HYPERLINK 3</a>

&raquo; HYPERLINK 4</a>

&raquo; HYPERLINK 5</a>

MENU 5 &raquo; HYPERLINK 1</a>

&raquo; <a class="menu" href="#">HYPERLINK 2</a>

&raquo; <a class="menu" href="#">HYPERLINK 3</a>

&raquo; <a class="menu" href="#">HYPERLINK 4</a>

&raquo; <a class="menu" href="#">HYPERLINK 5</a>

MENU 6 &raquo; <a class="menu" href="#">HYPERLINK 1</a>

&raquo; <a class="menu" href="#">HYPERLINK 2</a>

&raquo; <a class="menu" href="#">HYPERLINK 3</a>

&raquo; <a class="menu" href="#">HYPERLINK 4</a>

&raquo; <a class="menu" href="#">HYPERLINK 5</a>

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 &lt;div&gt; -Container verwendet, da der gesamte Bereich mit einem <a href="../border-bottom.html">unteren Rahmen</a> 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 &lt;h1&gt; -Tag floaten nebeneinander, wie in <a href="ex0004.html">Beispiel 4</a> bereits erklärt. Die Menüs Die Menüs sind ebenfalls in &lt;div&gt; -Container eingefügt, die mit den folgenden Stylesheets formatiert sind: width:14%; line-height:18px; } float:left; } float:right; } Für die &lt;div&gt; -Container ist jeweils das ID -Attribut angegeben: &lt;div id=&quot;left&quot;&gt; Linkes Menü &lt;/div&gt;
 * 1) left, #right {
 * 1) left {
 * 1) right {

...

&lt;div id=&quot;right&quot;&gt; Rechtes Menü &lt;/div&gt; Die <a href="../width.html">Breite</a> ist auf 14% festgelegt und die <a href="../line-height.html">Zeilenhöhe</a> sorgt für etwas Abstand unter den Hyperlinks im Menü.

Die Eigenschaft <a href="../float.html">float</a> plaziert Elemente auf der Seite und lässt andere vorbeifließen. In diesem Fall wird dem &lt;div&gt; -Container für das linke Menü und dem Rechten  zugewiesen, um sie links- und rechtsbündig auf der Seite zu plazieren. Inhalt Ähnlich wie in <a href="ex0007.html">Beispiel 7</a> soll der Inhalt in der Mitte stehen. Nur dass in diesem Fall ein &lt;div&gt; -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 &lt;div&gt; -Container des Inhalts, 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 &lt;div&gt; -Container reduzierte <a href="ed0010.html">vereinfachte Darstellung</a> <p style="text-align:left;clear:both;margin-top:20px;"><a class="prev" href="index.html#example">Zurück</a>