<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css"><!--
body
{
font-family:Verdana;
font-size:12px;
background-color:#ffefde;
}
h1 {font-size:18px;color:#000000;margin-bottom:0px;}
h2 {font-size:16px;color:#000000;}
h3 {font-size:14px;color:#000000;}
p {margin-top:0px;}
code {font-size:14px;color:#0000ff;}
pre
{
font-size:14px;
color:#0000ff;
padding:5px;
}
a:link, a:visited, a:active, a:hover
{
text-decoration:none;
font-weight:bold;
color:#634142;
font-size:12px;
}
a:active, a:hover
{
text-decoration:underline;
}
#title {
height:34px;
padding:5px;
border-bottom:1px solid #000000;
margin-bottom:20px;
}
#left, #right {
width:14%;
line-height:18px;
}
#left {
float:left;
}
#right {
float:right;
}
.menutitle
{
font-weight:bold;
border-top:1px dashed #000000;
margin-top:15px;
}
#content {
float:left;
width:66%;
margin-left:3%;
}
//--></style>
<title>CSS 4 You - The Finest in Stylesheets: Workshop Layouten ohne Tabellen</title>
</head>
<body>
<div id="title">
<img src="logo6.gif" style="float:right;width:156px; height:39px;margin-left:3px;" alt="Logo" />
<h1>10. Dreispaltiges Layout, 100% breit</h1></div>
<div id="left" style="clear:right;">
<p class="menutitle">MENU 1</p>
» <a class="menu" href="#">HYPERLINK 1</a><br />
» <a class="menu" href="#">HYPERLINK 2</a><br />
» <a class="menu" href="#">HYPERLINK 3</a><br />
» <a class="menu" href="#">HYPERLINK 4</a><br />
» <a class="menu" href="#">HYPERLINK 5</a><br />
<p class="menutitle">MENU 2</p>
» <a class="menu" href="#">HYPERLINK 1</a><br />
» <a class="menu" href="#">HYPERLINK 2</a><br />
» <a class="menu" href="#">HYPERLINK 3</a><br />
» <a class="menu" href="#">HYPERLINK 4</a><br />
» <a class="menu" href="#">HYPERLINK 5</a><br />
<p class="menutitle">MENU 3</p>
» <a class="menu" href="#">HYPERLINK 1</a><br />
» <a class="menu" href="#">HYPERLINK 2</a><br />
» <a class="menu" href="#">HYPERLINK 3</a><br />
» <a class="menu" href="#">HYPERLINK 4</a><br />
» <a class="menu" href="#">HYPERLINK 5</a><br /><br />
</div>
<div id="right">
<p class="menutitle">MENU 4</p>
» <a class="menu" href="#">HYPERLINK 1</a><br />
» <a class="menu" href="#">HYPERLINK 2</a><br />
» <a class="menu" href="#">HYPERLINK 3</a><br />
» <a class="menu" href="#">HYPERLINK 4</a><br />
» <a class="menu" href="#">HYPERLINK 5</a><br />
<p class="menutitle">MENU 5</p>
» <a class="menu" href="#">HYPERLINK 1</a><br />
» <a class="menu" href="#">HYPERLINK 2</a><br />
» <a class="menu" href="#">HYPERLINK 3</a><br />
» <a class="menu" href="#">HYPERLINK 4</a><br />
» <a class="menu" href="#">HYPERLINK 5</a><br />
<p class="menutitle">MENU 6</p>
» <a class="menu" href="#">HYPERLINK 1</a><br />
» <a class="menu" href="#">HYPERLINK 2</a><br />
» <a class="menu" href="#">HYPERLINK 3</a><br />
» <a class="menu" href="#">HYPERLINK 4</a><br />
» <a class="menu" href="#">HYPERLINK 5</a><br />
</div>
<div id="content">
<h2>Drei Bereiche</h2>
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
<h2>Die Titelleiste</h2>
Für die Titelleiste habe ich einen <em><div></em>-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.<br />
Das Logo und das <em><h1></em>-Tag floaten nebeneinander,
wie in <a href="ex0004.html">Beispiel 4</a> bereits erklärt.
<h2>Die Menüs</h2>
Die Menüs sind ebenfalls in <em><div></em>-Container eingefügt,
die mit den folgenden Stylesheets formatiert sind:
<pre>
#left, #right {
width:14%;
line-height:18px;
}
#left {
float:left;
}
#right {
float:right;
}
</pre>
Für die <em><div></em>-Container ist jeweils das <em>ID</em>-Attribut angegeben:
<pre>
<div id="left">
Linkes Menü
</div>
...
<div id="right">
Rechtes Menü
</div>
</pre>
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ü.<br />
Die Eigenschaft <a href="../float.html">float</a> plaziert Elemente
auf der Seite und lässt andere vorbeifließen. In diesem Fall wird dem
<em><div></em>-Container für das linke Menü <code>float:left</code>
und dem Rechten <code>float:right</code> zugewiesen, um sie links- und rechtsbündig
auf der Seite zu plazieren.
<h2>Inhalt</h2>
Ähnlich wie in <a href="ex0007.html">Beispiel 7</a> soll der Inhalt in der Mitte stehen.
Nur dass in diesem Fall ein <em><div></em>-Container mit den folgenden Stylesheets
verwendet wird, damit der Spalteneffekt entsteht:
<pre>
float:left;
width:66%;
margin-left:3%;
</pre>
Deshalb ist für den Inhalt, genauer gesagt für den <em><div></em>-Container des Inhalts,
<code>float:left</code> 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.<br />
Hier ist noch eine auf die <em><div></em>-Container reduzierte
<a href="ed0010.html">vereinfachte Darstellung</a>
</div>
<p style="text-align:left;clear:both;margin-top:20px;"><a class="prev" href="index.html#example">Zurück</a></p>
</body>
</html>