phpBB.de

<ul id="Navigation">
<li><

<div id"dreispaltig">
<ul id="Navigation">
<li><a href="einfuehrung.htm">Einführung in CSS-basierte Layouts</a></li>
<li><a href="mehrspaltige.htm">Mehrspaltige CSS-basierte Layouts</a></li>
<li><a href="fixbereiche.htm">Fixe Bereiche mit CSS-basierten Layouts</a></li>
<li><a href="navigationsleisten.htm">CSS-basierte Navigationsleisten</a></li>
<li><a href="browserweichen.htm">CSS-Browserweichen</a></li>
</ul>

<div id="Info">
<strong>Info-Box</strong>
<p>Auch wenn diese Info- Box am Bildschirm als letzte angezeigt wird, ist sie
im Quelltext vor dem im Fluss belassenem Inhaltsbereich zu notieren.</p>
<p>Dadurch, dass für den Inhaltsbereich kein float definiert ist, kann auf
die Angabe einer Breite verzichtet werden und die Seite den ihr zur
Verfügung stehenden Raum ausnutzen.</p>
<p>Diese Methode, ein Element im Fluss zu belassen und dadurch auf eine
Breitenangabe verzichten zu können, hat außerdem den Vorteil, Abweichungen
durch das falsche Box-Modell des Internet Explorer auszugleichen.</p>
</div>

<div id="Inhalt">
<h1>CSS-basierte Layouts</h1>
<h2>3-spaltiges Layout</h2>
<p>In diesem Beispiel ist die Breite der Navigation etwas reduziert,
um einer zusätzlichen Info-Box an der rechten Seite Platz zu machen;
die Schriftgröße der Navigation und Info-Box ist etwas verringert,
um den relativ geringen Breiten Rechnung zu tragen.</p>
<p>Nur für die äußeren Boxen ist eine Breite und float angegeben.
Durch die Angabe der Breiten relativ zur Schriftgröße in 'em'
können sich die Boxen einer Änderung des Schriftgrades anpassen.</p>
<p>Dieser mittlere Inhaltsbereich wird über seitliches margin auf Abstand
gehalten und passt sich flexibel an die Fensterbreite an.</p>
</div>
</div>

<div id="dreispaltig">

<div id="left">
...
</div>

<div id="right">
...
</div>

<div id="main">
...
</div>

</div>

#dreispaltig left {
background: #ffd5ee;
padding: 0;
border: 1px solid #f09;
margin: 10px;
width: 225px;
position: absolute;
top: 0;
left: 0;
}

#dreispaltig right {
background: #fff7d5;
padding: 0;
border: 1px solid #fc0;
margin: 10px;
width: 225px;
position: absolute;
top: 0;
right: 0;
}

#dreispaltig main {
background-color: #d5eeff;
padding: 0;
border: 1px solid #09f;
margin: 10px 247px 10px 247px;
}

Dr.Death hat geschrieben:Du hast dein Thema binnen weniger Minuten/Stunden mit einem Folgebeitrag nach oben geschoben.