von zen_meister |
Danke für die Tipps und Lösungsansätze!
@Philipp Gérard: Der Vorschlag mit <div> hat genau zu dem gesuchten Ergebnis geführt. Funzt auch in allen aktuellen Browsern (IE, NC, Opera, Firefox, usw.). 
|
von subjective |
Allerdings macht hier unter Umständen mal wieder der IE Probleme, da er zum einen :before gar nicht kennt, zum anderen :hover nur für <a> macht. |
von Philipp Gérard |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11: | .navi {
background-image: url(bg.gif);
background-repeat: repeat-x;
background-position: 0px bottom
}
.navi a {
background-image: url(pfeil.gif);
background-repeat: no-repeat;
padding-left: 15px;
background-position: 5px center
} |
1: | <div class="navi"><a href="foo.php">foo</a></div> |
|
von HoRnominatoR |
theoretisch machbar, praktisch wird dein kunde wohl aber einen veralteten browser benutzen so dass der pfeil nicht angezeigt wird.
1:
2:
3:
4:
5:
6:
7: | .navi {
background:url(striche.png) bottom repeat-x;
}
.navi a:before {
content:url(pfeil.png);
} |
alternativ den pfeil als extra image einfuegen, oder ein entsprechendes hintergrundbild machen, dass sowohl linie (entsprechend lang oder laenger) als auch pfeil enthaelt mit background:url(striche-pfeil.png) bottom no-repeat; |
von zen_meister |
Die Linie kann zwar auch mit CSS (dotted) erzeugt werden, jedoch nicht 100% gemäß grafischer Vorlage (Kundenwunsch).
Das hat ja die ganze Problematik verursacht!? |