Hauptmenü

Untermenü

HTML5 / CSS3 - Praxistutorial 2 - Überblick

1. Die Abschnitte

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.

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.

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

weiter zum nächsten Abschnitt