WP Nav Bild statt Text

[Wully]

Hallo!

Ich versuche gerade in meiner Navigationsleiste die ich unter Design----> Menü erstellt habe statt dem Text ein Bild anzuzeigen. Dem Menüpunkt hab ich natürlich eine Klasse zugewiesen.

Das ist mein Ansatz:

.classname {
background-image: url(images/facebook.png);
background-repeat: no-repeat;
height: 24px;
width: 24px;
background-position: center center;
text-indent: -99999px;
}

Nur hab ich das Problem das jetzt der Link nicht funktioniert!
Warum? und wie kann ich das beheben?

Danke für die Hilfe!

Lg

 

[cythux]

AW: WP Nav Bild statt Text

Könntest Du uns einen Link posten, normaler weise musst du jeden menupunkt aus dem source code mit angeben

zu Beispiel : .menu item .classname

 

[afr0kalypse]

AW: WP Nav Bild statt Text

Könntest Du uns einen Link posten, normaler weise musst du jeden menupunkt aus dem source code mit angeben
zu Beispiel : .menu item .classname

Das ist nur bedingt richtig. Wenn du für jeden Link das gleiche Bild anzeigen willst reicht .classname.
Bei unterschiedlichen Bildern wirst du das Menuitem mit angeben müssen oder du vergibst jedem Menuitem einen eindeutigen Klassennamen.
Dass der Link nicht funktioniert liegt daran, dass du den eigentlichen Link mit text-indent aus dem sichtbaren Bereich verschoben hast.
Das Bild steckt im li Tag und der Text steckt im a Tag (dem eigentlichen Link). Du könntest das Bild auch in den a Tag packen mittels

.classname a { ... }

. Problem ist dann nur, dass es nicht ausreicht eine Höhe und Breite anzugeben, da das a Tag per default ein Inline-Element ist und deshalb noch ein

display:block;

notwendig ist.
Dann könnte es funktionieren.

 

[Wully]

AW: WP Nav Bild statt Text

Danke an alle für die Hilfe! Hab es so gemacht wie afro..... gepostet hat uns es funzt. Der Fehler lag am li tag . Mit dem a tag hat es geklappt.

Danke