Zur Navigation

grafik vor einem link mit css einbinden ?

1 Gustafsson

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

03.11.2005 10:01

2 Jörg

Hallo Uwe,

wenn die Links in einer Liste angeordnet sind, kann man dieser eine Bullet-Grafik zuordnen


ul {
list-style-image:url(grafik-1.gif)
}

für die Listenpunkte, die nicht durch eine Grafik eingeleitet werden, könnte eine Klasse definiert werden


<li class="keinbild"><a href="datei.html">Linktext</a></li>


li.keinbild {
list-style-type:none;
}

Bei Links innerhalb von Texten könnte man die Grafik vielleicht als Hintergrundgrafik einbauen, mithilfe von background-image:url();

mfG Jörg

03.11.2005 11:08

3 Gustafsson

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

03.11.2005 11:32

4 Gustafsson

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

beim firefox sind sie mittig, beim IE oberhalb und bei opera gnz oben...

cu uwe

03.11.2005 11:33 | geändert: 03.11.2005 11:50

5 Jörg

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

03.11.2005 12:18 | geändert: 03.11.2005 12:19

6 Gustafsson

ne ich mein die horizontale zentrierung von grafik und nachfolgendem text.

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

03.11.2005 13:06 | geändert: 03.11.2005 13:08

7 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

03.11.2005 13:51 | geändert: 03.11.2005 13:53

8 Gustafsson

nö - klappt immer noch nicht, leider. ich schick dir mal die url

cu uwe

03.11.2005 15:14

9 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

03.11.2005 15:47 | geändert: 03.11.2005 16:00

10 max (Gast)

hallo, ich hab hier jetzt ein ähnliches problem, und zwar das das bild größer als der text ist z.b. Bild 16px hoch, der text jedoch nur 14px.

der text klebt somit immer am unteren rand fest, und ich bekomm ihn nicht zentriert, auch nicht mit dem was bis jetzt hier gepostet worden ist

eventuell weiß ja einer noch einen rat

tia
max

21.11.2005 10:34