semitransparentes png als Hintergrund für Menü (superfish)

[Claudi]

Hallo Zusammen,

Jetzt muss ich nach ewigem Probieren doch mal eure Hilfe in Anspruch nehmen!
Habe das wohl bekannte Superfish-Menü versucht auf meine Bedürfnisse hin anzupassen! Hierzu wurden unter anderem die einzelnen Elmente mit einem transparenten Hintergrund (png-Datei)versehen! Beim "hovern" wird dieses gegen ein weiters png getauscht! Soweit alles in Ordnung! Bei einem dropdown-Listenelement jedoch funktioniert das irgendwie nicht (sh. z.B. Punkt "Wohnugen")! Bewege ich den Mauszeiger in ein untergeordnetes Element, ändert sich die Farbe von "Wohnungen" bzw. scheint weniger transparent zu werden!
Schwieriger zu erklären, als es eigentlich ist! Hier das Beispiel dazu! Kann mir einer erkären, womit das zu tun hat? Bin vollkommen ratlos!

Vielen lieben Dank

[Matthias Apsel]

Om nah hoo pez nyeetz, Claudi!

Ich glaube nicht, dass das auf das Bild zurückzuführen ist. Aus Performancegründen wäre es besser, nur eine Grafik zu verwenden (CSS-Sprites).

Versuche zunächst folgendes: Schmeiße alle Hintergrundbilder raus, das geht am sichersten, indem du Kommentare /* */ verwendest oder am schnellsten indem du einen Rechtschreibfehler in den Namen der Eigenschaft einbaust (*background-image). Dies sollte man allerdings bei komplexeren Projekten unterlassen.

Setze für die entsprechenden Elemente deutlich unterscheidbare Hintergrundfarben.

Verhält sich die Liste so, wie du es erwartest?

Matthias

[Claudi]

Hallo Matthias,

Danke für deine Antwort! Schnelligkeit scheint wohl ebenfalls eine positive Eigenschaft des Kautschukbaumvolkes zu sein ;) !?

Setze für die entsprechenden Elemente _deutlich unterscheidbare_ Hintergrundfarben.

Das hab ich schon gemacht! Mit Hintergrundfarben gibt es dieses Problem nicht! Wollte es aber zwecks Design mittels transparentem Hintergund dargstellt haben!

Ist denn im Javascript irgendetwas "versteckt", was eine fehlerfreie Darstellung verhindert?

Liebe Grüße

[bleicher]

Grüße,
jetzt ist ja dein urbesipiel nicht mehr zu sehenn, wechselst du ggf zurück?
MFG
bleicher

[Claudi]

Grüße,
jetzt ist ja dein urbesipiel nicht mehr zu sehenn, wechselst du ggf zurück?
MFG
bleicher

Was genau meinst du denn?

[ChrisB]

Hi,

Das hab ich schon gemacht! Mit Hintergrundfarben gibt es dieses Problem nicht! Wollte es aber zwecks Design mittels transparentem Hintergund dargstellt haben!

Mach mal 'n Punkt. Und zwar am Ende von normalen Sätzen.

MfG ChrisB

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

Aus Performancegründen wäre es besser, nur eine Grafik zu verwenden (CSS-Sprites).

Nein! Aus Performancegründen wäre es besser, gar keine Grafik zu verwenden.

Ist für einen einfarbigen transparenten Hintergrund in modernen Browser ja überhaupt nicht nötig, dafür gibt es Farbangaben mit rgba(). [CSS3-COLOR §4.2.2]

Für ältere Browser entweder keinen transparenten, sondern opaken Hintergrund

li  
{  
  background: #F00;  
  background: rgba(255, 0, 0, 0.8);  
}  
  
li:hover  
{  
  background: #666;  
  background: rgba(102, 102, 102, 0.8);  
}

oder eine Grafik als Fallback:

li  
{  
  background: url(myBackground.png) 0 0;  
  background: rgba(255, 0, 0, 0.8);  
}  
  
li:hover  
{  
  background: url(myBackground.png) 0 42px;  
  background: rgba(102, 102, 102, 0.8);  
}

(Wobei das mit der Höhe der Hintergrundfrafik problematisch ist. Was, wenn ein Menüpunkt mehrzeilig ist?)

Qapla'

[Claudi]

Hallo Gunnar,

Für ältere Browser entweder keinen transparenten, sondern opaken Hintergrund

li

{
  background: #F00;
  background: rgba(255, 0, 0, 0.8);
}

li:hover
{
  background: #666;
  background: rgba(102, 102, 102, 0.8);
}

>   
> oder eine Grafik als Fallback:  
>   
> ~~~css

li  

> {  
>   background: url(myBackground.png) 0 0;  
>   background: rgba(255, 0, 0, 0.8);  
> }  
>   
> li:hover  
> {  
>   background: url(myBackground.png) 0 42px;  
>   background: rgba(102, 102, 102, 0.8);  
> }

Vielen Dank für deine Antwort, jedoch löst das das Probelm nicht. Die unterschiedliche Transparenz ist trotzdem noch vorhanden. Siehe hier
Einfach mal die Hauptelemente hovern und dann in die Unterpunkte gehen, dann siehst du, dass sich auch die Transparenz des entsprechenden Hauptelementes ändert!

Schönen Gruß

[MudGuard]

Hi,

Hallo Gunnar,»» Vielen Dank für deine Antwort, jedoch löst das das Probelm nicht. Die unterschiedliche Transparenz ist trotzdem noch vorhanden. Siehe hier
Einfach mal die Hauptelemente hovern und dann in die Unterpunkte gehen, dann siehst du, dass sich auch die Transparenz des entsprechenden Hauptelementes ändert!

Ist doch logisch.

.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
  background: rgba(100%, 50%, 0%, 0.2);
outline: 0;
}

Solange man auf dem "Hauptelement" ist, ist dieses a und das umschließende li gehovert. Also liegt dort zweimal eine 0.2-transparente Hintergrundfarbe übereinander (eine im a, eine im li).
Geht man dann mit der Mauszeiger auf das Untermenü, ist das a des "Hauptelements" nicht mehr gehovert, nur noch das li. Also nur noch einmal 0.2-transparente Hintergrundfarbe.

cu,
Andreas

[Claudi]

Hallo,

Vielen lieben Dank, glaub jetzt hab ich´s!

Solange man auf dem "Hauptelement" ist, ist dieses a und das umschließende li gehovert. Also liegt dort zweimal eine 0.2-transparente Hintergrundfarbe übereinander (eine im a, eine im li).
Geht man dann mit der Mauszeiger auf das Untermenü, ist das a des "Hauptelements" nicht mehr gehovert, nur noch das li. Also nur noch einmal 0.2-transparente Hintergrundfarbe.

Würde also reichen, wenn ich das .sf-menu a:hover einfach ausschließe, dann funktionierts!

Liebe Grüße

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

oder eine Grafik als Fallback:

Und auch in dem Fall die Hintergrundfarbe als Fallback, wenn die Grafik aus irgendeinem Grund nicht angezeigt wird:

li  
{  
  background: #F00 url(myBackground.png) 0 0;  
  background: rgba(255, 0, 0, 0.8);  
}  
  
li:hover  
{  
  background: #666 url(myBackground.png) 0 42px;  
  background: rgba(102, 102, 102, 0.8);  
}

Qapla'

[ChrisB]

Hi,

Bewege ich den Mauszeiger in ein untergeordnetes Element, ändert sich die Farbe von "Wohnungen" bzw. scheint weniger transparent zu werden!

Dabei bekommt das LI-Element die zusätzliche Klasse "sfHover" zugewiesen, und dadurch wird das Hintergrundbild
footer-bg.png gegen footer-bgh.png ausgetauscht ... noch Fragen?

MfG ChrisB

[Claudi]

Hallo Chris,

Dabei bekommt das LI-Element die zusätzliche Klasse "sfHover" zugewiesen, und dadurch wird das Hintergrundbild ausgetauscht ... noch Fragen?

Danke für deine Antwort! Mir ist bewusst, dass das LI-Element bei hover diese Klasse zugewiesen bekommt. Ist es dann so, dass beim "hovern" der Hauptmenüpunkte die Bilder nur überlagert und nicht ausgetauscht werden? Wenn ja, wo ist das geregelt (Css, javascript..)?

Liebe Grüße

[Matthias Apsel]

Om nah hoo pez nyeetz, Claudi!

Hallo Chris,

... und dadurch wird das Hintergrundbild ausgetauscht ... noch Fragen?

Danke für deine Antwort! Mir ist bewusst, dass das LI-Element bei hover diese Klasse zugewiesen bekommt. Ist es dann so, dass ... die Bilder ... nicht ausgetauscht werden?

Hä?

Matthias

[Claudi]

Danke für deine Antwort! Mir ist bewusst, dass das LI-Element bei hover diese Klasse zugewiesen bekommt. Ist es dann so, dass ... die Bilder ... nicht ausgetauscht werden?

Hä?

Na es gibt doch einen Unterschied zwischen überlagern und austauschen!? Und da bei den 4 Hauptelementen bei einem hover die ursprüngliche png-Datei wohl durchscheint, gehe ich davon aus, dass diese nur überlagert und nicht ausgetauscht werden (was wohl zur unterschiedlichen Farbdarstellung führt).

[Gunnar Bittersmann]

@@ChrisB:

nuqneH

Hintergrundbild […] noch Fragen?

Ja. Wozu?

Qapla'