 Gegenüberstellung CSS-Layout / Tabellenlayout
Als sich die Aufgabe stellte, ein Tabellenlayout in ein CSS-Layout umzuwandeln entstand dieses Beispiel. Da es sich als Gegenüberstellung der Layout-Techniken ganz gut eignet, möchte ich beide Varianten hier kurz vostellen. Die dabei entwickelten HP-Vorlagen der CSS-Layouts biete ich Ihnen hier zum Download.
|
|
Seitenlayout mit CSS oder Tabellen?
UPDATE 16.06.2010 jetzt 6 unterschiedliche HP-Vorlagen zum Download
UPDATE 01.07.2010 weitere HP-Vorlage mit Hauptmenü + Untermenü
Homepage-Vorlage C13 - Infospalte immer rechts anzeigen
Aufbau des Seitenlayouts
Die Struktur dieser Vorlage basiert auf horizontale Bereiche für Titel, Breadcrumb-Menü und Fuß. Für die Abschnitte Menü, Inhalt und Infosplte wurden vertikale Unterteilung festgelegt. Hier gibt es also grundsätzlich 6 Bereiche. Ein weiterer leerer Bereich wird bei Bildschirm- / Fensterbreiten von mehr als 1024 Pixel Breite sichtbar.
HP-Vorlage C13-01
HP-Vorlage C13-03
HP-Vorlage C13-05
Möglichkeiten zum Download meiner Vorlagenbeispiele finden Sie unten.
Vorlage anpassen:
1) Ändern Sie die Farbwerte in den CSS-Notierungen
2) Tauschen Sie die evtl. eingebundenen Hitergrundgrafiken aus
3) Ändern Sie die Textvorgaben für Seitentitel und Verweise
Aufbau des Layouts
Eigentlich nichts Besonderes wäre da nicht der Wunsch die Bereiche Navigation, Inhalt und Info mit fixen Breiten auf maximal 1000 Pixel einzustellen und dabei die Infospalte immer absolut rechts zu positionieren. Dabei entsteht ein Leerbereich variabler Breite, abhängig von der Bildschirmbreite / Breite des Browserfensters. Wie man das mit Tabellen oder aber mit einem CSS-Layout verwirklichen kann, wird hier kurz demonstriert.
Für beide Layouts wurden
- für den Titelbereich (oben)
- für das Breadcrumb-Menü (unterhalb des Titelbereichs)
- und für die Fußzeile (unten)
horizontale Bereiche mit 100% der verfügbaren Breite vorgesehen.
Für beide Layouts ist der mittlere Bereich (Navigation, Inhaltsbereich, Leerbereich und Info) mittels Breiten-, Positions- oder Abstandsangaben vertikal unterteilt. Für die Breite von Navigation, Inhaltsbereich und Infospalte sind feste Werte eingetragen.
Gegenüberstellung Tabelle / CSS
a) Tabellenlayout
 Tabellenlayout (mit Randmarkierungen) ansehen 
(Ändern Sie bei der Demoansicht die Größe des Browserfensters um die variable Breite des Leerbereichs betrachten zu können.)
Für den den Titelbereich, das Breadcrumb-Menü und die Fußzeile wurden Tabellen mit 100% Breite verwendet.
Um die Infospalte immer absolut rechts anzuzeigen, werden verschachtelte Tabellen verwendet. Um die unterschiedlichen Browser zu bedienen, die unter Umständen Padding-Angaben zur Tabellenbreite hinzurechnen oder aber die Padding-Angaben als inclusive (in Bezug auf die Tabellenbreite) ansehen, wurde der Inhaltsbereich noch einmal mit einer zusätzlichen Tabelle ausgestattet (ist nicht unbedingt erforderlich).
b) CSS-Layout
CSS-Layout (mit Randmarkierungen) ansehen
(Ändern Sie bei der Demoansicht die Größe des Browserfensters um die variable Breite des Leerbereichs betrachten zu können.)
Für den den Titelbereich, das Breadcrumb-Menü und die Fußzeile wurden <div>-Bereiche von 100% Breite definiert.
Nav- und Inhaltsbereich orientieren sich am linken Rand des Browswefensters, die Infospalte am rechten Rand. So entsteht gegebenenfalls ein unterschiedlich breiter Leerbereich.
Der Nav-Bereich für das Menü wurde links bei 0 Pixel positioniert. Die Breite wurde auf 170 Pioxel festgelegt.
position:absolute;
top:0px;
left:0px;
width:170px;
Der Inhaltsbereich ist ebenfalls links ausgerichtet und mit einem linken Abstand von 170 Pixel positioniert. Er beginnt also neben dem 170 Pixel breiten NAV-Bereich. Die Breite ist mit 600 Pixel festgelegt.
position:relative;
left:170;
width:600px;
Die Infospalte wird rechts ausgerichtet (Abstand 0 Pixel), die Breite wurde mit 170 Pixel bestimmt.
position:absolute;
right:0px;
width:170px;
Demos - Download der Demos
Möglichkeiten zum Download meiner Vorlagenbeispiele finden Sie weiter unten.
Sie können für Ihre Experimente diese beide Demo-Varianten (Tabellen / CSS) herunterladen. Dabei stelle ich Ihnen die Layouts einmal mit angezeigten Rändern (zur besseren Demonstration) und einmal ohne Randeinstellungen zur Verfügung.
Schauen Sie in den Quelltext der im Browserfenster angezeigten Dateien (Menü Ansicht - Seitenquelltext) oden laden Sie die Beispiele als ZIP-Datei herunter und öffnen sie in Ihrem Editor.
Demo: Tabellenlayout - mit Randmarkierungen
Demo: CSS-Layout - mit Randmarkierungen
Demo: Tabellenlayout - ohne Randmarkierungen
Demo: CSS-Layout - ohne Randmarkierungen
Für Ihre Experimente:
Die CSS-Formatierungen in den 4 Demos beschränken sich auf wenige Anweisungen. Entpacken Sie die ZIP-Datei mit den Demos in einem neuen Ordner für Ihre Experimente oder um die Beispieldatei anzupassen. Verwenden Sie die Menü- oder CSS-Beispiele der Web-Toolbox um die Vorlage zu erweitern.
Download der 4 Demos + 3 HP-Vorlagen (ZIP-Datei 12 kB) 
HP-Vorlagen - Vorschau und Download
Screenshot der um einige Formatierungsanweisungen erweiterten Variante.
C13-01 mit CSS-Layout (blau)
Bei den erweiterten Variante (Vorlagen) habe ich zusätzliche CSS-Anweisungen notiert. Entpacken Sie die ZIP-Datei der Vorlage in einem neuen Ordner für Ihre Experimente oder um die Datei anzupassen. Verwenden Sie die Beispiele der Web-Toolbox um die Vorlage zu erweitern.
Unten sehen Sie Varianten der HP-Vorlage C13 mit unterschiedlichen CSS-Formatierungen. bei den Beispielen C13-01 - C13-03 werden keine Grafiken eingesetzt.
Zur Anzeige einer Vorlage in einem neuen Browserfester klicken Sie auf die Vorschaugrafik. Zum Download klicken Sie auf den Textlink darunter.
a) Varianten mit einem Menü (links)
Die Varianten C13-01 bis C13-06 haben 1 Menü in der linken Spalte.
b) Variante mit 2 Menüs (oben + links)
Die Variante C-13-07 hat ein Hauptmenü oben und ein Untermenü in der linken Spalte!
Vorlage für eine Schulseite
|
Home • Tabellen • CSS / Tabellen
