egal was ich mache es ist immer alles untereinander.
Versuch 1:
eine CSS-Datei so wie im Link steht
in der index dafür nochmal eine div eingefügt
dreispaltig <- so heißt die Datei (Habe ich auch in stylesheet eingefüht)
<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>
Versuch 2:
für jeden Container eine CSS-Datei und dafür in der Index die ID dreisapltig weg gelassen.
Versuch 3:
aus den CSS Dateien das body rausgenommen
Versuch 4:
in der index
<div id="dreispaltig">
<div id="left">
...
</div>
<div id="right">
...
</div>
<div id="main">
...
</div>
</div>
in der CSS-Datei "dreispaltig:
#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;
}
einmal mit und einmal ohne das dreispaltig vor left; right und main
Natürlich habe ich die Datei in stylesheet eingetragen
