Kann man Links zusätzlich ein bestimmtes Bild per CSS zuweisen?

[MuGo]

Hallo,

ich habe eine Frage, bei der es mich wundert, dazu nichts im Forums-Archiv gefunden zu haben:

Ich möchte gerne in einer Navigationsleiste vor jeden Begriff ein kleines Bild stellen, dass ebenfalls verlinkt ist. So weit, so gut, das lässt sich mit HTML ja ohne Probleme fabrizieren. Nun ist es aber so, dass ich immer das selbe Bild verwende und darum in jedem Link das gleiche img einsetze. Daraus ist in mir die Frage gewachsen, ob es nicht irgendwie möglich ist, den Links in der Navigationsliste dieses Bild einfach per CSS zuzuweisen - aber so, dass danach immer ein Leerzeichen steht und dann der (individuelle) Text folgt.

Ich hoffe, es ist klar, was mir vorschwebt und es gibt eine Lösung für das Problem. Andere Anwendungen als CSS sind auch okay, sofern sie weniger Aufwand sind als mit Copy&Paste die img-Zeilen zu kopieren und nicht die Browser-Navigation zerstören - wie es Links mit JavaScript anscheinend gerne tun.

Vielleicht weiß der Eine oder Andere ja, wie man so was gestalten kann oder kennt eine Seite, wo es steht. Oder jemand kann definitiv sagen, dass Aufwand und Nutzen nicht im Einklang stehen. Dann wüsste ich ja auch schon, wo ich dran bin.

Ich bin gespannt,
MuGo

[MuGo]

ich habe eine Frage, bei der es mich wundert, dazu nichts im Forums-Archiv gefunden zu haben:

Okay, Problem hat sich erledigt. Mir war der Begriff "Bullet-Zeichen" nicht geläufig. Kein Wunder, dass ich dann nichts finden kann.^^

[Gunnar Bittersmann]

@@MuGo:

Nun ist es aber so, dass ich immer das selbe Bild verwende und darum in jedem Link das gleiche img einsetze.

Das Bild gehört also nicht zum Inhalt (also nicht in HTML), sondern ist Verzierung (also ein Hintergrundbild → CSS).

<ul id="nav">  
  <li><a href="foo">foo</a></li>  
  <li><a href="bar">bar</a></li>  
</ul>

Deine Navigationsleiste ist doch eine Liste, oder?

#nav li  
{  
  list-style-image: url(meinBild);  
}

Oder ggfs.

#nav a  
{  
  background: url(meinBild) no-repeat;  
  display: block;  
  padding-left: 42px; /* Bildbreite + Zwischenraum */  
}

Live long and prosper,
Gunnar

[netsation Internetagentur]

Hi,

also wenn ich dich richtig verstehe, dann kannst du das bild deinem Link in den background legen und deinen Text mit padding nach rechts verschieben.

Grüße