grafik vor einem link mit css einbinden ?

moin,

wie müsste die anweisung in einem css-file aussehen, wenn ich vor bestimmten links (nicht allen) eine grafik einbinden möchte ?

danke schon mal
uwe

danke dir ;-) und wie wäre die anweisung um die grafik mittig zum text/link zu platzieren ??

Wie hast du die Grafik eigefügt, mit list-style-image:url() oder mit background-image:url()? Eine vertikale Zentrierung bei list-style-image sollte eigentlich automatisch erfolgen. Kannst du eine Beispielseite verlinken, wo das Problem auftritt, oder einen Beispielcode posten?



mfG Jörg

Horizontal ist von links nach rechts, das ergäbe jetzt keinen Sinn, ich denke, du meinst schon vertikale Zentrierung von unten nach oben ;) (analog zu vertical-align). Und dort besteht anscheinend auch das Problem, dass bei einer Angabe von line-height > 0 nur Firefox die Grafik mit zentriert :\. Das gleiche Problem, wenn man versucht, die Abstände zwischen den Listenpunkten mit padding zu realisieren. Aber mit margin funktioniert es:

.list1 li {list-style-image:url(images/pfeilchen.gif); margin:10px 0 10px 10px; padding-left:10px;}

Definiert wird in dem Fall nicht die Klasse "list1" für das Element ul, sondern das darin enthaltene li; der Außenrand beträgt nicht nur nach links 10px, sondern auch nach oben und unten. Die Abstände zwischen den LIstenpunkten kannst du also über den ersten und dritten Wert von margin verändern

mfG Jörg

Ja, da gibt es noch Unterschiede in der vertikalen Anordnung. Diese lässt sich bei allen Browsern wohl dadurch auf einen Nenner bringen, dass die Höhe des Bildes (7px) der line-height entspricht (die über die übergeordnete td auf 13px festgelegt ist).

Du hast nun zwei Möglichkeiten:

1. Du könntest nun für .list1 li die line-height auf die Höhe des Bildes, also 7px, festlegen

.list1 li {list-style-image:url(images/pfeilchen.gif); margin:5px 0 10px 10px; padding-left:10px; line-height:7px; }

Das würde bei Zeilenumbruch (dritter Listenpunkt) aber etwas gequetscht ausschauen ;).

2. Deswegen wäre es vielleicht besser, die Grafik so zu bearbeiten, dass dessen Höhe der line-height, also 13px, entspricht (oben und unten jeweils noch eine Fläche von drei pixel Höhe in Hintergrundfarbe hinzufügen)

mfG Jörg


Nachtrag:

wenn du die Grafikgröße der line-height anpasst, kannst du natürlich auch wieder den ursprünglichen Code nehmen :):

.list1 {list-style-image:url(images/pfeilchen.gif); margin-left:10; padding-left:10px; line-height:20px;}

in dem Fall muss pfeilchen.gif 20 pixel hoch sein