Navi: Text-Menüpunkte durch Icons ersetzen
Hallo Welt!
Mein erster Eintrag zu Nicht-Installationsfragen. Ich bitte um Nachsicht, da Anfänger. :o
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. :o
Freue mich schon auf eure Tipps!:eek:
LG Moos