Topmenu Background Highlighten

[svenheupel]

Hi,
irgendwie verzweifele ich gerade bei dem Versuch den Hintergrund vom Topmenu beim einem Mouse hover zu hightlighten (sprich heller zu machen).

Bei mir will der nur den Hintergrund vom Text anders darstellen aber nicht den "kompletten" Button.

[ Für Gäste sind keine Dateianhänge sichtbar ]

Hat da jmd. ne Idee?
Gruß
Sven

Hier mein erfolgloser Versuch ...

Code: CSS  [Auswählen]

/* TOPMENU AS LIST */
#topmenuwrap {
        background: url(img/bg_topmenu.gif) repeat-x;
}
#topmenuwrap:hover {
        background: url(img/bg_topmenu_hi.gif) repeat-x;
}

#topmenu {
        float:left;
        padding:0;
        margin:0;
        list-style-type:none;
        height:36px;
        font-size:13px;
        background: url(img/bg_topmenu.gif) repeat-x;
}
#topmenu li {
        height:36px;
        float:left;
        padding: 0px 25px 0px 25px;
        margin:0;
        background: url("img/bg_topmenu_breakline_li.gif") no-repeat;
        background-position:right;
}

#topmenu a, #topmenu a:link, #topmenu a:visited, #topmenu a:hover, #topmenu a:active {
        line-height:36px;
        vertical-align:middle;
        text-decoration:none;
        font-weight:bold;
        cursor:pointer;
        color:#fff;
        margin:0px 35px 0px 35px;
        padding:0;

}
#topmenu li a:hover {
        color:#CCCCCC;
        background-image: url("img/bg_topmenu.gif");
}

/*
#topmenu a:hover {
        color:#CCCCCC;
        background: url(img/bg_topmenu_hi.gif) repeat-x;
}
*/

Linkback: https://www.modified-shop.org/forum/index.php?topic=924.0

[Tomcraft]

Funktioniert doch so, wie du es angegeben hast. =) Aber das ist vielleicht nicht das, was du eigentlich wolltest. Das Problem ist, dass du hinter jedem Menupunkt img/bg_topmenu.gif liegen hast und das wird in X-Richtung "repeated". Für das, was du willst musst du das Menu oben ein wenig umbauen und jeweils 2 Buttons mit definierten Proportionen als background-image hinter jedes <li> packen, einmal für den link und einmal für hover. Für diese Buttons kannst du img/bg_topmenu.gif als Vorlage nehmen und in Photoshop oder in der Opensource Variante GIMP verlielfältigen, damit du auf eine ordentlich Breita kommst.

Verstehst du, was ich meine?

[svenheupel]

ok also img/bg_topmenu.gif habe ich jetzt auf eine ordenliche breite gezogen aber wie sieht die hover anweisung im css dafür aus?
 :

Danke schon mal

[svenheupel]

habs hinbekommen hier meine Lösung

Code: CSS  [Auswählen]

#topmenu li {
        height:36px;
        float:left;
        padding: 0px 25px 0px 25px;
        margin:0;
        display:block;
        width:auto;
        background:transparent url('img/bg_new.gif') no-repeat bottom left;
}

}
#topmenu li:hover {
        display:block;
        width:auto;
        height:36px;
        background: transparent url('img/bg_new.gif') no-repeat top left;

[svenheupel]

Anbei noch die Datei "bg_new.gif".