6.2.2 Tabellenlose Websites
⇧ 1 Allgemein
↑ a) Beispiel von Elementen
Grundlagen
Block-Element:
div
Beispiel
-
Alle Elemente dieses Beispiels stehen in einem Haupt-Div.
-
Das Haupt-Div ist gelb, mit einer Breite von 100% und einer vorgegebenen Höhe. (Die Höhe muss so gewählt werden, dass alle Elemente darin Platz haben)
- Als erstes Element kommt in diesem Beispiel dann der Titel.
-
Die horizontalen Menüs wurden mit einer Aufzählung
<ul style="display:inline">erstellt. -
Das padding wurde mit "padding:0.2em 0,6em" so angegeben, dass der Innenabstand oben und unten 0.2em, rechts und links 0.6 em ist.
-
Als nächstes Element kommen 3 Blocks.
-
Die 3 Blocks wurden mit "float" nebeneinander gesetzt.
-
Die Breite des ersten Blocks ist so gewählt, dass die darin enthaltene Menüliste die gewünschte Breite hat.
-
Die Summe der Breiten der 3 Blocks beträgt 100%.
-
Das vertikale Menü wurde mit eine Aufzählung (list) erstellt.
-
Damit kein Listenzeichen und kein linker Einzug erfolgt, muss im Quelltext folgende Formatierung angegeben werden:
<ul style="list-style-type:none; padding:0">
Titel im gelben Div
- Horizontales Menü - Link one
- Link two
- 1 3 5 7 9 12 15 18 21 24 27 30
- Link four
- Vertikales Menü
Link one - Link two
- 1 3 5 7 9 12 15 18 21 24 27 30
- Link four
und irgend etwas
↑ b) Websites & Workshops
- Stichpunkt.de de CSS Experimente: Layout ohne Tabellen
-
W3Schools:
en
Beispiel: Creating a homepage without tables
-
CSS 4 You
de
Warum keine Tabellen - Übersicht
1 de Ein div-Container Höhe 100%
2 de Drei Bereiche übereinander mit 100% Breite
3 de 760 Pixel breit und auf der Seite zentriert
4 de Ein Logo neben der Titelzeile, 760 Pixel breit
5 de Ein Logo neben der Titelzeile für 100% breites Layout
6 de Menüs im Textfluss
7 de Zwei Menüs im Textfluss
8 de Zweispaltiges Layout, 100% breit
9 de Drei div-Container reichen aus
10 de Dreispaltiges Layout, 100% breit
⇧ 2 Feststehende Elemente
- a) Bezeichnungen
- b) Kopf und Fusszeile scrollen mit dem Text
- c) Feststehende Fusszeile, der Rest scrollt
- d) Feststehender Footer für den Internet Explorer (der Rest scrollt)
- e) Kombination: Ein Footer für alle
- f) Feststehende Kopf- und Fusszeile
- g) Alternative Positionierung mit fester Navigation
- h) Vollständiges Layoutbeispiel
↑ a) Bezeichnungen
-
head = Kopf
-
header = Kopfzeile
-
foot = Fuss
-
footer = Fusszeile
↑ b) Kopf und Fusszeile scrollen mit dem Text
-
SELFHTML
de
Einfacher Footer
de Beispiel: Einfacher Footer
↑ c) Feststehende Fusszeile, der Rest scrollt
SELFHTML schreibt dazu
- Moderne Browser kennen dazu die CSS-Eigenschaft position mit dem Wert fixed - dieser wird jedoch vom Internet Explorer bis einschliesslich Version 6 noch nicht interpretiert, weswegen das folgende Beispiel in diesem Browser nicht wie gewünscht funktionieren wird.
-
SELFHTML
de
Feststehender Footer
de Beispiel: Feststehender Footer
↑ d) Feststehender Footer für den Internet Explorer (der Rest scrollt)
SELFHTML schreibt dazu
-
Ziel ist es nun, eine Möglichkeit zu finden, wie sich ein feststehender Footer auch im Internet Explorer realisieren lässt, sozusagen ein Work-Around für position:fixed.
-
Man kann zwei Elemente ("Container") untereinander setzen, wobei das obere Element den kompletten Inhalt enthält und das untere den Footer.
Daraus ergibt sich folgende HTML-Struktur
Aber ohne feststehenden Header!!!!!
-
SELFHTML
de
Feststehender Footer für den Internet Explorer
de Beispiel: Feststehender Footer für den Internet Explorer
↑ e) Kombination: Ein Footer für alle
SELFHTML schreibt dazu
-
Wie Sie bestimmt schon gemerkt haben, hatten beide Beispiele ihre Nachteile: Ersteres funktionierte nicht im Internet Explorer, letzeres funktionierte zwar im Internet Explorer, dafür aber in anderen Browsern nicht wie gewollt.
-
Es werden also sogenannte CSS-Browserweichen ("CSS-Hacks") benötigt.
SELFHTML bezieht sich auf Brauserweichen
↑ f) Feststehende Kopf- und Fusszeile
↑ g) Alternative Positionierung mit fester Navigation
-
SELFHTML
de
Alternative Positionierung mit fester Navigation
de Beispiel: Alternative Positionierung, feste Navigation