Linkpfeilchen durch Bild ersetzen?

docpacey

Hallo!

habe das Forum größtenteils durchgestöbert und viele interessante andere Dinge gelesen, aber nicht eine Lösung für die folgende Frage gefunden, die im Grunde Theme-übergreifend ist:

Ich verwende das Neat-Template und würde gerne das "Text-Pfeilchen-Symbol" vor den Links, Kategorien etc. durch eine kleine Bilddatei ersetzen.

Folgender Auszug der style.css scheint dafür die richtige Stelle zu sein:

Zitat

#sidebar ul ul li:before { [color=red]content: "\00BB \0020"[/color]; }
#sidebar ul, #sidebar ul ol {
margin: 0;
padding: 0;
}
#sidebar ul li {
list-style-type: none;
list-style-image: none;
margin-bottom: 15px;
}
#sidebar ul p, #sidebar ul select { margin: 5px 0 8px; }
#sidebar ul ul, #sidebar ul ol { margin: 5px 0 0 10px; }
#sidebar ul ul ul, #sidebar ul ol { margin: 0 0 0 10px; }
ol li, #sidebar ul ol li { list-style: decimal outside; }
#sidebar ul ul li, #sidebar ul ol li {
margin: 3px 0 0;
padding: 0;

Alles anzeigen

Probieren (etwa: #sidebar ul ul li:before {background: url(/images/linkpfeil.gif) no-repeat; } oder ähnlich -> trial and error in reinform :)
ergab bisher nur, dass zumindest der jeweils erste Link eines Feldes mit dem Bild versehen wurde, allerdings von der Schrift überlagert.

Frage: Welche margin/padding-Einstellung muss ich ändern, um das Bild VOR den Link zu stellen und wie wird das Bild bei allen Links etc. angezeigt?

Gruß!

/e
Achso, list-style-image: none; zu ändern habe ich auch ausprobiert, allerdings wird das Bild dann in jeder Zeile der sidebar angezeigt...

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Monika

Code

#sidebar2 a{width:145px;}
#sidebar2 p{padding-left:6px;}
li {list-style-type: none; 	
list-style-image:none; }


#sidebar2 ul, #sidebar2 ul li {margin:0px 0px 0px 2px; 	padding:0px; width:150px;}




#sidebar2 ul li ul li{margin:0px 0px 0px 7px;
	padding:4px 0px 0px 13px; background: url(images/texto-extern.gif) no-repeat 0% ; }

Alles anzeigen

hilft Dir das weiter...

die :before Angabe verstehen nicht alle Browser (IE und so ) ;)

anschauen kannst es Dir auf texto.de
lg
Monika

p3t3r

Code

#sidebar ul ul li:before { content: url('deinedgrafik.png'); }

So müsste es eigentlich auch gehen, allerdings interpretieren IE < 7 die Pseudoklasse :before nicht richtig.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Linkpfeilchen durch Bild ersetzen?

Jetzt mitmachen!