Navi: Text-Menüpunkte durch Icons ersetzen

**Moosmutzel** · 14.12.2011, 16:58

Hallo Welt!

Mein erster Eintrag zu Nicht-Installationsfragen. Ich bitte um Nachsicht, da Anfänger.

Meine momentane Herausforderung:
Ich habe für eine Webseite ein einfaches Menü erstellt, dass im "header" horizontal dargestellt wird.
Nun sollen die einzelnen Text-Menüpunkte durch .png Grafiken ersetzt werden.
Ich bin so weit, dass statt der Text-Links immer ein und dasselbe Bild gezeigt wird, und sich dieses bei Mausdrüber verändert.
Frage: Wie bekomme ich es möglichst barrierearm (IE6) hin, dass jedem Link ein anderes Bild zugeordnet wird.

Hier der Quelltext meiner navigation.css:

Code:

@media screen #header .mod_navigation
{
	margin-top:18px;
	padding:50px 18px;
}

#header .mod_navigation ul
{
	width:auto;
	float:left;
	margin-bottom:0;
}

#header .mod_navigation li
{
	width:auto;
	float:left;
	margin:0;
}

#header .mod_navigation a,
#header .mod_navigation span
{
	width:110px;
	height:80px;
	display:block;
	background-image:url("tl_files/Themes/Fogo1/Grafiken/home.png");
	background-repeat:no-repeat;
	text-indent:-5000px;
}

#header .mod_navigation a:hover
{
	background-image:url("tl_files/Themes/Fogo1/Grafiken/home-hover.png");
}

Habe, glaube ich, im Forum schon was in der Richtung gefunden. Stichwort: für jede Seite eine eigene CSS-Klasse vergeben, die dann im Stylesheet angesprochen werden kann:
http://www.contao.org/board/topic/11254.html

Ich werde aber nicht schlau daraus.

Freue mich schon auf eure Tipps!

LG Moos

***hofff*** · 14.12.2011, 17:30

Hallo,

um das zu erreichen, musst du jeweiligen Seiten im der Seitenstruktur eine CSS-Klasse zuweisen. Diese wird dann auch im Menü mit ausgegeben und du kannst die gewünschten Icons setzen.

fg
nicky

von meinem iPad mit Tapatalk gesendet.

**dieselboy** · 14.12.2011, 17:33

Hallo moosmutzel,

das ist eigentlich ganz einfach. Du gibst jeder Seite in den Einstellungen eine eigene Klasse, die ein Icon erhalten soll. Diese Klasse wird auch in der Navigation ausgegeben.

Im CSS kannst du nun individuelle Icons mit Hilfe der Klasse angeben, z.B. so

Code:

.mod_navigation li.startseite a, .mod_navigation li.startseite span { background:url(pfad/zum/bild.png) no-repeat }

Ich weiß grad nicht aus dem Kopf, zu welchem Element die Klasse ausgegeben wird, aber ich denke das Beispiel sollte so funktionieren.

Viele Grüße
Daniel