HTML5 / CSS3 - Praxistutorial 2 - Das Ausklappmenü Teil 2

1. Die Abschnitte

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.

zurück zum vorherigen Abschnitt