HTML5 / CSS3 - Praxistutorial 2 - Überblick
1. Die Abschnitte
- Überblick
- Das Problem und die Lösung
- Zwischenfazit
- Anpassungen IE 8 und 9
- Anpassungen IE 8 Teil 1
- Anpassungen IE 8 Teil 2
- Das Ausklappmenü Teil 1
- Das Ausklappmenü Teil 2
2. Über dieses Tutorial
Ganz wichtig!
Inhaltlich basiert hier alles auf dem erstem Praxistutorial. Dort habe ich euch gezeigt, wie man mit den neuen semantischen HTML5-Tags und viel CSS3 eine zugegebenermaßen scheußlich anzusehende Seite aufbaut. Das hat auch soweit wunderbar geklappt nur der Internet Explorer einschließlich Version 9 wollte nicht. Wer also direkt hier gelandet ist, sollte sich gegebenenfalls erst besagten Vorgänger zu Gemüte führen, denn auf die dort schon erwähnten Dinge gehe ich hier nicht mehr ein.
Und noch ein Hinweis
Als ich das "Design" für das erste Tutorial entworfen habe, ließ ich mich sehr stark von Franz Beckenbauer und seinem allseits bekannten Motto leiten.
Schau'n mer mal [Quelle: der Kaiser]
Das bedeutet, ich habe zu dem Zeitpunkt noch keinen einzigen Gedanken an den Internet Explorer verschwendet und einfach gedacht "Kommt Zeit, kommt Rat". Pustekuchen! Diese Leichtsinnigkeit müsst ihr nun ausbaden. Darum weise ich hier ausdrücklich darauf hin, dass es keine endgültige Lösung geben wird sondern nur Ratschläge, wie man etwas machen kann, wo es Grenzen gibt und was man bitteschön im Vorfeld bedenken sollte. Seht das hier einfach als pädagogische Erziehungsmaßnahme an.
Die Vorgehensweise
Da es beim IE 10 nur ein Problem gab und das für alle oben erwähnten Versionen gilt (border-image
), nehmen wir uns den ganz am Ende vor. Ansonsten
solltet ihr, wenn möglich, während des kompletten Tutorials mit dem 8er und 9er immer parallel testen.
3. Browser
Für das folgende Tutorial benötigt ihr nur die folgenden Browser. Natürlich nur so weit wie vorhanden. Wie man sich mehrere Versionen des IE installiert, habe ich ja schon an dieser Stelle erklärt.
- Internet Explorer 8.0
- Internet Explorer 9.0
- Internet Explorer 10.0
4. Abweichungen
Im Gegensatz zum ersten Tutorial habe ich hier zwei Verbrechen rückgängig gemacht. Zum einen weil es echt sch***e aussah und zum anderen, weil es keine Chance gibt, das ohne Mordsaufwand für den IE 8 umzusetzen. Dabei handelt es sich um die beiden folgenden Punkte.
- Das
border-image
bezieht sich wieder auf die korrekten Größen der einzelnen Segmente. - Der Verlauf im Footer ist jetzt wieder gerade und läuft von oben nach unten.
5. Die Daten
Den Basiscode und die komplette Lösung für dieses Tutorial findet ihr rechts unter dem Punkt "Daten". Folgende Dateien und Ordner müssen, wie unten beschrieben, vorhanden sein:
Struktur
index.htm
styles.css
-
pics
(Ordner)-
subnav.gif
-
aside_bg.gif
(neu) -
footer_bg.gif
(neu) -
footer_p_bg.gif
(neu) -
nav_bg.gif
(neu)
-
-
fonts
(Ordner)bnkgothm.eot
bnkgothm.ttf
bnkgothm.woff
-
Neu hinzugekommen
-
ie
(Ordner)-
ie8.css
-
ie9.css
-
ie.css
-
-
js
(Ordner)-
html5shiv.js
-
-