Menu hover met meerdere achtergronden

[ZpAz]

Hallo,

Ik zit met een probleempje.

Ik heb een menu, welke in de breedte variabel moet zijn, maar het is een menu die er nogal 'fancy' uitziet, en dat kan dus niet zomaar met 1 achtergond op repeat-x, aan de linker en rechterkant moet een mooi afrondingkje komen, dit heb ik opgelost door de li links een afronding als achtergrond in te stellen, en een span toe te voegen welke aan de rechterkant een achtergrond heeft.

So far so good, en het werkt ook. Maar de hover heeft weer een andere achtergrond van verschillende grootte, nu ondersteund IE6 alleen op het a object een hover, dus die zakt daar al door de stront. (Daarnaast zit het menu ook nog op een achtergrond met diverse kriebeltjes om het op te leuken, dus een niet transparant plaatje wil daar ook niet, en met een gif ziet het er niet al te mooi uit, dus dat is een transparante png, wat als background in IE6 ook niet fatsoenlijk werkt, nu zijn daar wel workarounds voor.. maar goed dat probleem kijk ik later wel naar. )

Nu het probleem zeg maar, als je met de muis hovert over het object wordt alles netjes groter, dat is als je midden op het menu staat, ga je naar de rand van een knopje, wordt 1 van de elementen niet meer meegenomen, en krijgen alleen de randjes nog maar een 'hover' effect en gaat het midden naar de normaal stand

Al met al zwaar frustrerend, was CSS3 er maar, want dan was dit een piece of cake met multiple backgrounds. Maar ja, dat is nu nog toekomstmuziek.

Hier het linkje.

[hide]http://www.wingsofadove.nl/slicing/dias/index.html[/hide]
[hide]http://www.wingsofadove.nl/slicing/dias/style.css[/hide]

Ik hoop dat iemand me kan helpen.

[RobIII]

Bovenaan in het menu "Faq" tref je en hele mooie UBB Codes link aan; ik zie niet zo snel wat je met '[hide]' bedoelt, maar waarschijnlijk [url]

Volgens mij ben je er als je dit wijzigt:

Cascading Stylesheet:

.menu span:hover {

in:

Cascading Stylesheet:

.menu li:hover span {

Dan neem je namelijk in de hover van de li alle onderliggende span's.
Mijn test-case.

Verder wil ik je er wel op wijzen dat we graag (lees: liever) 'uitgeklede' testcases zien dan de code waar jij naar verwijst (hoewel die an sich niet enorm is staan er veel irrelevante dingen in, je ziet het gestripte resultaat in mijn testcase goed terug). Ook zien we graag wat je zelf eventueel al geprobeerd hebt, dat zie ik in je topic ook niet terug helaas.

[ Voor 27% gewijzigd door RobIII op 22-12-2007 22:57 ]

[ZpAz]

Bedankt, dat is het.

Dus wat dat zegt is als ik hover op de li, dan moet je voor alle onderliggende span's daar ook de hover van uitvoeren?

In ieder geval erg bedankt.

[RobIII]

ZpAz schreef op zondag 23 december 2007 @ 13:19:
Dus wat dat zegt is als ik hover op de li, dan moet je voor alle onderliggende span's daar ook de hover van uitvoeren?

Dat is wel het idee achter Cascading Style Sheets ja

[ZpAz]

Weer wat geleerd dus

Iig bedankt.