[GastForen Web allgemein HTML und CSS / Stylesheets Links im Text durch Bilder ersetzen

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Themen
Beiträge
Moderatoren
Letzter Beitrag

Links im Text durch Bilder ersetzen

TheTom
Beiträge gesamt: 39

30. Dez 2011, 10:33
Beitrag # 1 von 2
Bewertung:
(2798 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
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
X

Links im Text durch Bilder ersetzen

flobaer
Beiträge gesamt: 317

30. Dez 2011, 11:15
Beitrag # 2 von 2
Beitrag ID: #487129
Bewertung:
(2781 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hi Thomas,

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

Viele Grüße
Florian


als Antwort auf: [#487126]

Veranstaltungskalender

Hier können Sie Ihre Anlässe eintragen, welche einen Zusammenhang mit den Angeboten von HilfDirSelbst.ch wie z.B. Adobe InDesign, Photoshop, Illustrator, PDF, Pitstop, Affinity, Marketing, SEO, Büro- und Rechtsthemen etc. haben. Die Einträge werden moderiert freigeschaltet. Dies wird werktags üblicherweise innert 24 Stunden erfolgen.

pdf-icon Hier eine kleine Anleitung hinsichtlich Bedeutung der auszufüllenden Formularfelder.

Veranstaltungen
02.02.2023

Prozesse optimieren und effizient gestalten

Zürich
Donnerstag, 02. Feb. 2023, 08.00 - 10.00 Uhr

Digitalisierung, Webauftritt

Digitalisierung mitgestalten - Worauf kommt es an? Wie wichtig ist die Webseite? Webseite mit Word Press? Interne Prozesse optimieren

Ja

Organisator: B. Isik - SNF Academy

Kontaktinformation: Birol Isik, E-Mailinfo AT bkcc DOT ch

https://digitalisierung-heute.ch/digitalisierung-informationstag-schweiz/

Veranstaltungen
01.03.2023 - 09.03.2023

Online
Mittwoch, 01. März 2023, 00.00 Uhr - Donnerstag, 09. März 2023, 00.00 Uhr

Online Webinar

Wie gehen wir mit diesen Veränderungen um? Was ist notwendig, damit wir die Digitalisierung im Unternehmen klappt? Veränderungsprozesse verstehen und entsprechend handeln Mitarbeiter als Botschafter Webseite mit WordPress erstellen SEA /SEO (Ads aufschalten)

Ja

Organisator: B. Isik - SNF Academy

Kontaktinformation: B. Isik, E-Mailinfo AT snfa DOT ch

https://www.fernstudiumfitness.ch/digitalisierung-schweiz/