Beste SD'ers,

ik denk mijn 2e toppic met deze naam, maar bij vorige dus zonder resultaat..
Ik zoek een manier om dergelijke (zie bijlage) rolovers te kunnen maken

-afgeronde hoeken
-onbepaalde breedte


Alvast bedankt !
Frederik VDBerge

Dat is niet mogelijk met CSS. Je moet het dan gewoon met achtergrond plaatjes doen.

Misschien dat het met geweldige manieren in JavaScript mogelijk is, maar dan zou ik voor de plaatjes gaan.

Ook is er een functie in CSS (kan er niet zo 1, 2, 3 op komen) die de hoeken afrond van een DIV bijvoorbeeld, maar deze werkt niet in IE.

(iets met -moz-radius geloof ik)

html:

<ul>
<li><a href="#"><span class="hover">tekst1</span><a></li>
<li><a href="#"><span class="hover">tekst2</span><a></li>
</ul>

css:

ul li a:hover { background:url('afbeelding1.png') no-repeat left top }
ul li span.hover a:hover { background:url('afbeelding2.png') no-repeat right top }

Nou moet je nog de afbeeldingen op de juiste manier slicen;
afbeelding1: pak de linkse afgeronde hoeken, en pak daarbij zoveel
mogelijk de 'niet afgeronde' achtergrond kleur mee. (dit moet je doen bij de langste url, dus een zo lang mogelijke afbeelding
afbeelding2: slice de rechtse afgeronde hoeken, maar deze moeten zo
kort mogelijk worden afgesneden.

Als ik niet erg duidelijk ben geweest kan ik je op msn misschien wel helpen morgen of overmorgen ;)

edit: ongeveer zo werkt het: http://www.xhtmlvalid.com/blog/2008/...tabs-tutorial/

Origineel gepost door gast2960

html:



css:


Nou moet je nog de afbeeldingen op de juiste manier slicen;
afbeelding1: pak de linkse afgeronde hoeken, en pak daarbij zoveel
mogelijk de 'niet afgeronde' achtergrond kleur mee. (dit moet je doen bij de langste url, dus een zo lang mogelijke afbeelding
afbeelding2: slice de rechtse afgeronde hoeken, maar deze moeten zo
kort mogelijk worden afgesneden.

Als ik niet erg duidelijk ben geweest kan ik je op msn misschien wel helpen morgen of overmorgen ;)

edit: ongeveer zo werkt het: http://www.xhtmlvalid.com/blog/2008/...tabs-tutorial/

Ik begrijp waar je naartoe wilt gaan, maar lukt nog niet volledig. Kan je me eens aanspreken op msn ?
Bedankt!!

mvg
Aanvullend bericht:
Nog altijd niet gelukt.
Nog steeds hulp gezocht !

dank bij voorbaat

mmh ik zit met het zelfde probleem en heb ook al vanalles geprobeerd...
dus inderdaad een oplossing graag:)

Ik heb Frederik op allerlei manieren geprobeert te helpen door mijn tactiek
toe te passen, helaas werkt deze manier bij Frederik nog steeds niet.

Maar normaal gesproken zou het makkelijk moeten werken,
een voorbeeld het ik gemaakt op:
http://gijsbertsimon.com/test/menu/
Bekijk de broncode voor de html en css.

Hopelijk heb je er iets aan,

Gr. Gijsbert

ps: mijn voorbeeld is een demo van de tutorial die ik een aantal posts geleden voorstelde. Het principe is dus hetzelfde ;)

edit: mijn voorbeeld werkt nog niet in IE6, dat ga ik zo fixen als het goed is
edit2: het voorbeeld werkt op alle moderne browsers en IE6.

Mijn laptop werkt nog met IE 6 (bewust) daar ziet het menu er niet uit, kale tekst en wanneer ik mijn muis er overheen ga, is de achtergrond rood en ongeveer 900px breed. Ik zal deze avond nog een beter voorbeeld plaatsen wat ook oudere versie's van IE (en de nieuwe) ondersteund.

Origineel gepost door dWork

Mijn laptop werkt nog met IE 6 (bewust) daar ziet het menu er niet uit, kale tekst en wanneer ik mijn muis er overheen ga, is de achtergrond rood en ongeveer 900px breed. Ik zal deze avond nog een beter voorbeeld plaatsen wat ook oudere versie's van IE (en de nieuwe) ondersteund.

Inmiddels ondersteund mijn voorbeeld ook de oudere browsers, ik had het voorbeeldje
's avonds laat gemaakt op een slechte pc, en ik had een aantal wijntjes op, vandaar dat ik een paar float's
over het hoofd had gezien ;)

Aanvullend bericht:
Oke, de update is klaar, nu heb ik het een beetje normaal opgemaakt,
ook staan er nu comments bij de opmaak styles, hopelijk help het.

De nieuwe demo is ook te bekijken op: http://gijsbertsimon.com/test/menu/

Ik zal zo een tutorial maken hiervoor in het tutorial forum.

Bedankt Gijsbert ! Duizendmaal dank !
Ik ga meteen eens kijken of het werkt bij mij ;)

Bij deze een tutorial over een afgeronde hover menu ;)
https://www.sitedeals.nl/tutorials/44...nde-hover.html

Respect Gijsbert ! Het is gelukt !

Duizendmaal dank !!
Ik geef je trouwens positieve itreader !

Origineel gepost door Frederik Vdb

Respect Gijsbert ! Het is gelukt !

Duizendmaal dank !!
Ik geef je trouwens positieve itreader !

hartlelijk bedankt alvast voor die iTrader hè :)

Je menu kon ik maar niet aan de kant zetten,
ik haat het wanneer iets niet goed is afgewerkt ;)

Origineel gepost door gast2960

hartlelijk bedankt alvast voor die iTrader hè :)

Je menu kon ik maar niet aan de kant zetten,
ik haat het wanneer iets niet goed is afgewerkt ;)

Hier ook, net daarom had ik al gans het internet afgeschuimd en niets gevonden..
Vind het echt knap dat je zo zelf een oplossing hebt kunnen vinden. Dat zou me nooit gelukt zijn !
Nouja, nogmaals dank ;)

Ik heb nog iets aanvullend gevionden,..

http://www.13styles.com/css-menus/gloss/

ik denk dat je dit ook zeer gemakkelijk met een CSS sprite menu kan oplossen.

link van google:
http://www.webdesignersgids.nl/glossarium/css-sprites

veel succes nog