Hi!

Irgendwie habe ich Moment ein kleines Blackout...

Nach einem kurzen Text habe ich eine Liste mit mehreren Links. Zur optischen Aufbesserung möchte ich die Links nun durch Bilder ersetzen, aber so, dass diese je nach Textgröße/länge flexibel mit nach unten wandern. So als "Pfusch" habe ich mal statt dem Text gleich die Bilder eingefügt. Das ganze muss aber ja auch per CSS gehen - also den Text durch Bilder ersetzen. Aber irgendwie ist der Wurm drin und es will einfach nicht funktionieren.

Im Hauptmenü funktioniert das ganze perfekt mit Listen, text-indent: -9999px, Hintergrundgrafik und absoluter Positionierung. Auch die Ersetzung von Überschriften funktioniert problemlos.
Da aufgrund der Flexibilität eine absolute Positionierung nicht in Frage kommt, raus damit. Jetzt wird das Bild gar nicht oder nur gemeinsam mit dem Text angezeigt - hier auch nur so lange wie der Text lang ist. Hab' mich auch schon mit <span> und "display:none" gespielt, aber nix ist. Großteils ist mir schon klar warum das nicht funktionieren will, aber die Lösung will sich mir einfach nicht zeigen...

HTML

Code

<div id="inhalt"> 
   <p>Text Text Text</p> 
   <ul id="links_liste"> 
      <li id="liste_link1"><a href="URL">Link1</a></li> 
      <li id="liste_link2"><a href="URL">Link2</a></li> 
   </ul> 
</div> 

CSS

Code

div#inhalt li#liste_link1 {text-indent;} 
div#inhalt li#liste_link1 a:link, div#inhalt li#liste_link1 a:visited {width: 300px; height: 15px; outline:none; background: url(../images/bild_link1.jpg) 0 0 no-repeat;}  
div#inhalt li#liste_link1 a:hover {background: url(../images/bild_link1_katalog.jpg) 0 115px no-repeat;} 
 
... 

Kann mir hier jemand weiterhelfen?

MfG und schon mal einen guten Rutsch ins neue Jahr, Thomas

Hi Thomas,

versuch es mal mit display:inline-block; und width:Xpx;

Viele Grüße
Florian