CSS-basierte Layouts

Info-Box

Hatten Sie sich im letzten Beispiel gewundert, warum die Überschrift dieser Box nicht als solche ausgezeichnet war? Da diese Info-Box im Quelltext vor dem Inhaltsbereich steht und erst in diesem die Hauptüberschrift notiert war, wäre hier eine Überschrift zweiten Grades noch nicht sinnvoll gewesen.

Im Quelltext dieses Beispiels ist nun zuerst die Seitenüberschrift notiert, wodurch auch dieses semantische Problem gelöst ist.

3-spaltiges Layout mit Kopf- und Fußzeile

Dieses Beispiel ist um eine Kopf- und Fußzeile erweitert.

Die Kopfzeile ist als Seitenüberschrift mit

ausgezeichnet und kann genauso gut wie ein
über CSS formatiert - hier mit einem Rahmen und einer Hintergrundfarbe versehen - werden. Auch eine Grafik könnte in

als Hintergrundbild definiert oder über eingebunden werden.

Betrachten Sie dieses Beispiel nicht als fertige Layout-Vorlage. Nutzen Sie das HTML-Grundgerüst für die Inhalte Ihrer Seite und passen Sie das CSS nach Belieben Ihren Vorstellungen an: experimentieren Sie mit den Größenangaben, Farben und Rändern und fügen Sie z.B. individuelle grafische Elemente ein.

Diese Fußzeile stellt über die CSS-Eigenschaft 'clear' den Elementenfluss wieder her.

//-->

* AC * // Die Stämme

Home







╔╦╦╦═╦╗╔═╦═╦══╦═╗
║║║║╩╣╚╣═╣║║║║║╩╣
╚══╩═╩═╩═╩═╩╩╩╩═╝

Das ist die Seite des Stammes "
Alpha Centauri "
auf Welt 34

Am Design wird eventuell nochetwas experimentiert/gearbeitet.
Aber die anderen Funktionen der HP sind voll funtionstüchtig.




 



Created by DJ Juri Webmasterteam.

©  by Andreas Grafen 2009


 


Diese Webseite wurde kostenlos mit Homepage-Baukasten.de erstellt. Willst du auch eine eigene Webseite?
Gratis anmelden