5.1.3 Tabellenlose Websites
-
1 Allgemein
a) Beispiele von Elementen
⇒ Siehe auch Block-Element div
Beispiel 1:
-
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
1.Block
- Vertikales Menü
Link one
- Link two
- 1 3 5 7 9 12 15 18 21 24 27 30
- Link four
2. Block
und irgend etwas
3. Block
b) Workshops
-
2 Feststehende Elemente
⇒ Siehe auch "CSS-Stylesheets/CSS-basierte Layouts"
a) Bezeichnungen
-
head = Kopf
-
header = Kopfzeile
-
foot = Fuss
-
footer = Fusszeile
b) Kopf und Fusszeile scrollen mit dem Text
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.
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 fesstehenden Header!!!!!
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
h) Vollständiges Layoutbeispiel
↑