problem mit kombination von BG-img und BG-color bei menüpunkten

[cruisi]

hallo,

ich habe ein problem mit meinem menü und hoffe, daß mir jemand von euch den entscheidenden tipp gegen kann, was ich falsch mache.

1. die listenpunkte (menüeinträge) haben bei mouse-over eine andere bg-color und color.
das habe ich bereits.
2. damit der menüpunkt, auf dessen seite man sich momentan befindet, dann fest die oben genannten eigenschaften hat, habe ich ihm eine id gegeben und die formatierung so fest zugewiesen. klappt auch.
3. jetzt sollen aber einige menüpunkte unterschiedliche background-images bekommen (müssen sich bei mouse-over nicht ändern). das mache ich halt auch mit id's. nur wenn ich (bisher ist es nur einer) einem menüpunkt per id einen background zuweise, funktioniert die background-color bei mouse-over nicht mehr. die schriftfarbe hingegen verhält sich bei mouse-over noch korrekt.
4. und wenn das problem gelöst wäre, käme noch ein weiteres. wie vereine ich punkte 2 (s.o.) mit dem background-image?

ich hoffe, es war einigermassen verständlich. hier kommt noch der code dazu und ein screenshot, wie das menü aussehen soll.

wenn ihr die url hier oben anklickt, gelangt ihr zu der ansicht, wie das menü mal aussehen soll.

viele grüße und vielen dank im voraus für jeden tipp,
cruisi

<div class="ordermenue">
<span class="ordermenue_headline">
Order
</span>
<ul>
<li>
<a href="#" id="aktiv3">Button 1</a></li>
<li>
<a href="#">Button 2</a></li>
<li>
<a href="#">Button 3</a></li>
<li>
<a href="#">Button 4</a></li>
<li>
<a href="#" id="frage">Button 5</a></li>
</ul>
</div>

a#frage {
background:url(../img/ordermenue_frage.gif) no-repeat;
background-position: bottom right;
}
a#aktiv3 {
background-color: #AB565D;
color: #fff;
}
.ordermenue {
margin: 0;
}
.ordermenue ul {
list-style-type: none;
color: #AB565D;
text-align: left;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, Lucida;
background-color: #C99089;
padding:26px 0 2px 0;
}
.ordermenue ul li {
display: inline-block;
color:#ffffff;
font-size: 11px;
line-height:1.45em;
}
.ordermenue ul li a {
text-decoration: none;
background-color: #C99089;
color: #AB565D;
padding: 1px 0 1px 10px;
display: block;
}
.ordermenue ul li a:hover {
background-color: #AB565D;
color: #fff;
}
.ordermenue_headline {
position: absolute;
left: 10px;
font-weight: bold;
font-family: Verdana, Arial;
color:#ffffff;
font-size: 13px;
background-color:#7D262C;
padding:5px 0 5px 10px;
width:174px;
}

[wahsaga]

hi,

3. jetzt sollen aber einige menüpunkte unterschiedliche background-images bekommen (müssen sich bei mouse-over nicht ändern). das mache ich halt auch mit id's. nur wenn ich (bisher ist es nur einer) einem menüpunkt per id einen background zuweise, funktioniert die background-color bei mouse-over nicht mehr. die schriftfarbe hingegen verhält sich bei mouse-over noch korrekt.

Vermutlich ein Problem mit der Spezifität der Selektoren.
Erweitere die Hover-Formatierung um einen weiteren Selektor für den per ID als aktiv gekennzeichneten Menüpunkt, der die ID in den Selektor mit einbezieht.

4. und wenn das problem gelöst wäre, käme noch ein weiteres. wie vereine ich punkte 2 (s.o.) mit dem background-image?

Wie meinen?

gruß,
wahsaga

[cruisi]

hallo und danke für deine antwort,

äh, ich habe gerade ein brett vorm kopf und das nicht ganz richtig verstanden. kannst du wohl mal ein kurzes beispiel am quellcode zeigen? das wäre supernett von dir!

mit punkt 4 meine ich, daß ich ja z.B. den "button2" auf der seite "button2" per id so formatieren will, daß der mouse-over effekt auf der seite, auf der ich mich gerade befinde, bei dem button dauerhaft sichtbar ist, also nicht nur bei mouse-over. dabei sollte aber trotzdem je nach listenpunkt ein anderes background-image einfügbar sein.

viele grüße,
cruisi

hi,

3. jetzt sollen aber einige menüpunkte unterschiedliche background-images bekommen (müssen sich bei mouse-over nicht ändern). das mache ich halt auch mit id's. nur wenn ich (bisher ist es nur einer) einem menüpunkt per id einen background zuweise, funktioniert die background-color bei mouse-over nicht mehr. die schriftfarbe hingegen verhält sich bei mouse-over noch korrekt.

Vermutlich ein Problem mit der Spezifität der Selektoren.
Erweitere die Hover-Formatierung um einen weiteren Selektor für den per ID als aktiv gekennzeichneten Menüpunkt, der die ID in den Selektor mit einbezieht.

4. und wenn das problem gelöst wäre, käme noch ein weiteres. wie vereine ich punkte 2 (s.o.) mit dem background-image?

Wie meinen?

gruß,
wahsaga

[cruisi]

hallo nochmal,
habe es jetzt doch verstanden und es klappt auch. super, vielen dank.
kann ich eigentlich diese zuweisungen auch anders als mit id's umsetzen? meine seite dient nur als vorlage für ein system, für das ich nach möglichkeit nur klassen verwenden soll. geht das wohl?
viele grüße,
cruisi

hi,

3. jetzt sollen aber einige menüpunkte unterschiedliche background-images bekommen (müssen sich bei mouse-over nicht ändern). das mache ich halt auch mit id's. nur wenn ich (bisher ist es nur einer) einem menüpunkt per id einen background zuweise, funktioniert die background-color bei mouse-over nicht mehr. die schriftfarbe hingegen verhält sich bei mouse-over noch korrekt.

Vermutlich ein Problem mit der Spezifität der Selektoren.
Erweitere die Hover-Formatierung um einen weiteren Selektor für den per ID als aktiv gekennzeichneten Menüpunkt, der die ID in den Selektor mit einbezieht.

4. und wenn das problem gelöst wäre, käme noch ein weiteres. wie vereine ich punkte 2 (s.o.) mit dem background-image?

Wie meinen?

gruß,
wahsaga

[Marc]

Hallo zusammen,

habe es jetzt doch verstanden und es klappt auch. super, vielen dank.
kann ich eigentlich diese zuweisungen auch anders als mit id's umsetzen? meine seite dient nur als vorlage für ein system, für das ich nach möglichkeit nur klassen verwenden soll. geht das wohl?

Warum nicht? Eine Klasse darf zwar mehrfach in einem Dokument vorkommen, muss aber nicht - einziger (trheoretischer?) Nachteil: der Validatr meckert nciht, wenn Du eine Klasse mehrfach verwendest (die du eigentlich nur für ein einziges Element einsetzen möchtest).

Das heißt: du musst eine fehlerhafte Darstellung, die eventuell auf dem merhfachem Einsatz einer Klasse beruht, selber finden...

Viele Grüße,
Marc.

[cruisi]

hallo und danke für die nachricht,

hatte irgendwie mal wieder ein brett vorm kopf und jetzt hat es bereits geklappt. also alles gut :)

viele grüße,
cruisi

[MudGuard]

Hi,

3. jetzt sollen aber einige menüpunkte unterschiedliche background-images bekommen (müssen sich bei mouse-over nicht ändern). das mache ich halt auch mit id's. nur wenn ich (bisher ist es nur einer) einem menüpunkt per id einen background zuweise, funktioniert die background-color bei mouse-over nicht mehr. die schriftfarbe hingegen verhält sich bei mouse-over noch korrekt.

a#frage {

specificity: 0 1 0 1  (0 style-attribut, 1 id, 0 class/attribut-Selektoren, 1 Elementname)

background:url(../img/ordermenue_frage.gif) no-repeat;

Hier setzt Du für a#frage alle Background-Eigenschaften auf ihre default-Werte und anschließend background-image und background-repeat auf die angegebenen Werte.
Also wird background-color auf transparent gesetzt.

background-position: bottom right;
}

.ordermenue ul li a:hover {

specificity: 0 0 1 3

obiger Selektor hat 0101
dieser hier hat nur 0013, dieser kann also gegen den obigen nicht anstinken.

Die obige Definition von background-color:transparent (implizit durch background:) gewinnt also.

Lösung: setze nicht per background alle background-Eigenschaften, sondern nur mit den einzelnen (background-image, background-repeat, ...) die Werte, die Du tatsächlich setzen willst.

cu,
Andreas