HTML5 / CSS3 - Praxistutorial 2 - Das Ausklappmenü Teil 2
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. Der verfluchte Bilderrahmen
Erinnert ihr euch? In der Theorie zu CSS3 habe ich euch gezeigt, wie man border-image
durch
mehrfache Hintergrundbilder notfalls ersetzen kann. Also machen wir das hier einfach auch.
header nav ul ul {
border: none;
padding: 27px;
background: url(../pics/nav_lo.gif) no-repeat top left,
url(../pics/nav_ro.gif) no-repeat top right,
url(../pics/nav_lu.gif) no-repeat bottom left,
url(../pics/nav_ru.gif) no-repeat bottom right,
url(../pics/nav_mo.gif) repeat-x top left,
url(../pics/nav_mu.gif) repeat-x left bottom,
url(../pics/nav_lm.gif) repeat-y top left,
url(../pics/nav_rm.gif) repeat-y right bottom;
}
Erläuterung
Wenn man mit mehrfachen Hintergrundbildern arbeitet, so ist die Reihenfolge von entscheidender Bedeutung. Denn es gibt eine Art von Z-Index. Das Bild, was als Erstes kommt, steht ganz oben, das letzte ganz unten in der Darstellung. Also müssen zuerst die Bilder an den Ecken kommen, da die fest positioniert sind und nicht gekachelt werden. Danach kommen dann die anderen.
3. Aber!
Tja, so was passiert, wenn man nicht vernünftig nachdenkt. Denn der Sohn meines Vaters dachte im ersten Tutorial, ach das mache ich später mit mehrfachen Hintergrundbildern und die Sache ist geritzt.
Denkste
Das Ganze funktioniert nämlich nur dann, wenn man keine Transparenzflächen in den vier Eckbildern hat. Ansonsten scheinen die übrigen durch, da sie sich ja wiederholen. Und nun kommt die schlechte Nachricht. Dagegen kann man nichts, aber auch gar nichts machen. Denn bei den Kachelbildern kann man keine feste Position in Pixel angeben, wo sie beginnen. Und selbst wenn das möglich wäre, so brächte das nichts, da es davon bekanntlicherweise mehrere gibt.
Außerdem
... kann der IE 8 das nicht. Bei dem müsste man sowieso mit zig <div>
-Elementen arbeiten, damit das bei dem vernünftig aussieht. Ihr merkt also, dass
man von border-image
tunlichst die Pfoten lassen sollte, weil unser Lieblingsbrowser das nicht beherrscht. Der 11er unterstützt das gottlob mittlerweile.
Dann muss man nur noch warten, bis die anderen verschwunden sind.
4. Ein Fazit
Abgesehen von obigem Problem kann man eigentlich schon ganz gut mit HTML5 und CSS3 arbeiten, selbst mit gewissen Abstrichen im IE8. Da aber Microsoft den Support für Windows XP im April 2014 komplett einstellen wird, kann man hoffen, dass die alten Möhren aus diesem Hause schnell das Zeitliche segnen werden.