dipser
Lounge-Member
Also ich möchte euch eine Variante vorstellen, wie es möglich ist, ein zweispaltiges Layout zu erstellen, mit 2 gleichlangen Seiten.
Üblicherweise benötigt man zunächst einen Text, wenn man sich eine HTML-Seite schreiben möchte, daher ist folgendes eigentlich recht Sinnfreier Text. Also man benötigt zunächst, das HTML-Gerüst mit Bereichszusammenfassenden div-Elementen.
Mit diesem Quelltext hätte man schon alles, was man benötigt um ein anständiges zweiseitiges Layout erstellen zu können.
Nun können wir uns dem kahlen HTML-Gerüst, mit Hilfe von CSS und einem Bild entledigen. Dazu erstellen wir erst einmal ein Bild mit der Breite der Seite und machen dies als Hintergrundbild für die ID "both" und lassen das Bild vertikal wiederholen.
Als nächstes müssen wir die Navigation an den rechten Rand in gleicher Höhe, wie das Inhaltsfeld bringen.
Nun müssen wir noch das Inhaltsfeld etwas in der Breite auf 350 Pixel beschneiden.
Als letzen Schritt müssen wir noch eine Kleinigkeit berücksichtigen, denn wenn einmal die Navigation länger als das Inhaltsfeld ist, zieht sich das zweispaltige Layout nicht mit, sondern die Navigation fließt drüber.
Daher ist es sehr nützlich am Ende des div-Elementes (both) noch folgendes zu schreiben: <br style="clear:both;"/>, damit wird das Umfließen beendet.
Viel Spass
Üblicherweise benötigt man zunächst einen Text, wenn man sich eine HTML-Seite schreiben möchte, daher ist folgendes eigentlich recht Sinnfreier Text. Also man benötigt zunächst, das HTML-Gerüst mit Bereichszusammenfassenden div-Elementen.
Code:
...
<body>
<div id="both">
<div id="navigation">
<ul>
<li><a ...>Startseite</a></li>
<li><a ...>Impressum</a></li>
</ul>
</div>
<div id="content">
<h1>Überschrift</h1>
<p>Man könnte hier <abbr title="zum Beispiel">z.B.</abbr> seinen 1. Paragrafen starten. </p>
</div>
</div>
</body>
...
Mit diesem Quelltext hätte man schon alles, was man benötigt um ein anständiges zweiseitiges Layout erstellen zu können.
Nun können wir uns dem kahlen HTML-Gerüst, mit Hilfe von CSS und einem Bild entledigen. Dazu erstellen wir erst einmal ein Bild mit der Breite der Seite und machen dies als Hintergrundbild für die ID "both" und lassen das Bild vertikal wiederholen.
Code:
#both {
width:500px;
background:url(hintergrund.png) repeat-y;
}
Als nächstes müssen wir die Navigation an den rechten Rand in gleicher Höhe, wie das Inhaltsfeld bringen.
Code:
#navigation {
width:150px;
float:right;
}
Nun müssen wir noch das Inhaltsfeld etwas in der Breite auf 350 Pixel beschneiden.
Code:
#content {
width:350px;
}
Als letzen Schritt müssen wir noch eine Kleinigkeit berücksichtigen, denn wenn einmal die Navigation länger als das Inhaltsfeld ist, zieht sich das zweispaltige Layout nicht mit, sondern die Navigation fließt drüber.
Daher ist es sehr nützlich am Ende des div-Elementes (both) noch folgendes zu schreiben: <br style="clear:both;"/>, damit wird das Umfließen beendet.
Viel Spass
Anhänge
Zuletzt bearbeitet: