nicht angemeldet
Ich komme nicht weiter...
Ich habe hier eine Navigationsleiste, die listenmässig aufgebaut ist. Jeder Listenpunkt soll mit einer Grafik unterlegt sein.
Jeder Listenpunkt ist ausserdem ein Link.
Als Hover-Effekt soll nun die Grafik gegen eine andere ausgetauscht werden.
Besondere Aufgabe:
Dynamik. Ich möchte ungern für 10 Links 10 verschiedene Grafiken mit entsprechender Beschriftung (Link 1 - 10) und dazu die entsprechenden Hover-Grafiken bauen. Momentan läuft das per DB-Abfrage, die Grafiken sind entsprechend neutral (orange bzw. gelb mit kleinem Logo seitlich).
Momentane Lösung:
Tabelle angefertigt, jede Zelle hat die Grafik als Hintergrund. Per table-layout: fixed und empty-cells: show auch auf einheitliche Breite festgezurrt. Soweit kein Problem.
Text wird in die Tabelle eingefügt. Kein Problem.
Hover-Effekt über td.meineclass a:hover{background-image: url(hover-grafik.png)} versucht einzufügen. Großer Mist, denn: alle Linkbezeichnungen haben verschiedene Längen. Durch padding und margin bekomme ich die a:hover-Grafik zwar in der Höhe deckungsgleich mit der
td-background-Grafik, beide fangen auch beim gleichen Punkt an, aber die Grafik orientiert sich in der Breite am eingegebenen Text.
Fragestellung:
Wie schaffe ich es, daß die gesamte Breite der Grafik angezeigt wird und nicht nur soviel, wie der Text lang ist? Ich kann ja schlecht ausrechnen, wie lang jeweils der Text ist, das von der Länge der Grafik subtrahieren und dynamisch als padding-right in die style-Angabe einfusseln?
Ich danke für alle Hilfsversuche,
portraitfee