Mit Browsern, die den CSS3-Standard unterstützen (zum Zeitpunkt des Schreibens nur Safari), ist die Sliding Doors-Technik zur Erstellung horizontal erweiterbarer Elemente, die Hintergrundbilder verwenden, nicht mehr erforderlich. Die Möglichkeit, mehreren Hintergründe ein einziges Element zuzuweisen, löst das Problem schnell. Weisen Sie ein Bild zu, das links positioniert ist, ein sich wiederholendes mittleres Bild und ein Bild, das rechts positioniert ist, wie folgt:
li.expanding {
background: url('left.jpg') top left no-repeat,
url('right.jpg') top right no-repeat,
url('middle.jpg') top center repeat-x;
height: 40px;
padding-top: 12px;
padding-left: 12px;
padding-right: 20px;
float: left;
}Die Bilder werden in der Reihenfolge angeordnet, in der Sie sie deklarieren. Das oberste Bild ist also das erste, das Sie deklarieren. Deklarieren Sie die sich wiederholenden Bilder also zuletzt. Dann können Sie eine einfache Listenmarkierung wie diese verwenden:
<ul>
<li class="expanding">This</li>
<li class="expanding">Little Piggy</li>
<li class="expanding">Went To The Market</li>
</ul>Und Sie erhalten dies:
Ziemlich raffiniert.
„Mit Browsern, die den CSS3-Standard unterstützen (zum Zeitpunkt des Schreibens nur Safari)“ – nicht ganz richtig; der CSS3-Standard besteht aus vielen Modulen, und verschiedene Module – und Teile von Modulen – werden von verschiedenen Browsern unterstützt – obwohl die meisten Module überhaupt nicht unterstützt werden.
Außerdem unterstützt Konqueror auch mehrere Hintergrundbilder, und wir hoffen, dass die nächste Version von Opera dies ebenfalls tun wird.
Danke für die Klarstellung, Peter!
Im Kontext dieses Beispiels wollte ich nur klarstellen, dass Safari diese spezielle Funktion unterstützt und dass alle FF- und IE-Besucher nicht auf das Beispiel klicken und verwirrt sein würden.
Konqueror unterstützt ebenfalls mehrere Hintergrundbilder, es ist cool…..