DIG Digital Corner
Alles wat je altijd al over computers, hardware, software, internet en elektronische gadgets had willen weten, maar niet op Tweakers.net durft te vragen.
Misschien als ik de <ul> een hele dikke border-left en border-right geef en daarmee de donkere balk maak, zou dat wat zijn? Wel tricky om de achtergrond png van de <li> dan te laten matchen met de border-kleur...
Ik zou heel nasty verschillende achtergrondplaatjes gebruiken voor de verschillende items
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
Het lastige is dat de site en het menu geen vaste breedte hebben (responsive enzo), dus het is best moeilijk om plaatjes te maken die altijd werken.quote:Op donderdag 2 mei 2013 09:08 schreef Catch22- het volgende:
Ik zou heel nasty verschillende achtergrondplaatjes gebruiken voor de verschillende items
Ik kan ook 1 plaatje maken met een heel brede donkere balk en een driehoekje eruit en de positie hiervan verschuiven op basis van het geselecteerde item. Ik denk alleen dan dat ik de positie met JS moet bepalen en ik zou het mooier vinden als het met CSS zou kunnen. Het voordeel van deze optie is wel dat het mogelijk wordt om het driehoekje te laten bewegen naar een andere plek wanneer een ander item wordt gekozen, dat is misschien wel een tof effect.
Maar wil je dat driehoekje mee laten glijden over de hele menubalk of alleen als je hovert ?quote:Op donderdag 2 mei 2013 09:12 schreef Tijn het volgende:
[..]
Het lastige is dat de site en het menu geen vaste breedte hebben (responsive enzo), dus het is best moeilijk om plaatjes te maken die altijd werken.
Ik kan ook 1 plaatje maken met een heel brede donkere balk en een driehoekje eruit en de positie hiervan verschuiven op basis van het geselecteerde item. Ik denk alleen dan dat ik de positie met JS moet bepalen en ik zou het mooier vinden als het met CSS zou kunnen. Het voordeel van deze optie is wel dat het mogelijk wordt om het driehoekje te laten bewegen naar een andere plek wanneer een ander item wordt gekozen, dat is misschien wel een tof effect.
I'm not the girl in the picture..
Dat glijden is niet per se nodig, ik bedacht me gewoon dat dat kan als het 1 groot plaatje is waarvan ik de positie verander.quote:
[..]
Maar wil je dat driehoekje mee laten glijden over de hele menubalk of alleen als je hovert ?
Als ik het zo doe, doe ik het alleen na click denk ik en niet al bij hover. Sowieso wil ik zo min mogelijk met hover doen vanwege tablets enzo.
Of dit:
En als je menu dynamisch is, dan met Less een berekening over de margin-left en margin-right gooien met het ((breedte li * aantal elementen) / 2)
In JSFiddle werkte die niet, maar op een volledige pagina wel.
| 1 2 3 4 5 6 7 8 | <nav id="menu"> <ul> <li id="first"><a href="/">home</a></li> <li><a href="/about">about</a></li> <li><a href="/cases">cases</a></li> <li id="last"><a href="/blog">blog</a></li> </ul> </nav> |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | #menu { text-align: center; width: 100%; } ul { list-style: none; display: inline-block; margin: 0; padding: 0; } li { background-color: rgba(244,134,78,0.5); width: 50px; height: 50px; float: left; margin: 0; padding: 0; } #first:before{ content: ''; width: 100%; height: 50px; background-color: rgba(255,0,255,0.5); position: absolute; z-index: -1; right: 50%; margin-right: 100px; } #last:after{ content: ''; width: 50%; height: 50px; background-color: rgba(0,0,255,0.5); position: absolute; z-index: -1; left: 50%; margin-left: 100px; } |
En als je menu dynamisch is, dan met Less een berekening over de margin-left en margin-right gooien met het ((breedte li * aantal elementen) / 2)
In JSFiddle werkte die niet, maar op een volledige pagina wel.
Ik zit nu in de trein, maar zal zo even kijken wanneer ik weer achter mn computer zit. Bedankt in elk geval voor het meedenken 
Het menu is niet dynamisch trouwens, het zijn altijd deze 4 links.
Het menu is niet dynamisch trouwens, het zijn altijd deze 4 links.
De derde optie in m'n navigatie loopt over twee regels, waarvan de tweede regel is opgemaakt d.m.v. <em> tags. Het is echter de bedoeling dat de eerste regel op gelijke hoogte met de andere twee links loopt, hoe krijg ik dat voor elkaar?
http://jsfiddle.net/Mq5d9/2/
http://jsfiddle.net/Mq5d9/2/
Is het een optie om aan de andere li's ook een (lege) <em> toe te voegen? Dan staan ze automatisch op dezelfde hoogte.
Hm, dat zou misschien wel werken, maar is er geen mooiere manier om het voor elkaar te krijgen?quote:Op donderdag 2 mei 2013 12:40 schreef Tijn het volgende:
Is het een optie om aan de andere li's ook een (lege) <em> toe te voegen? Dan staan ze automatisch op dezelfde hoogte.
Je zou de li's relatief kunnen positioneren en de <em> absoluut, dan verstoort-ie de flow niet en blijft alles op dezelfde plek staan. Is dat wat?
http://jsfiddle.net/Mq5d9/14/
http://jsfiddle.net/Mq5d9/14/
http://jsfiddle.net/Mq5d9/15/
Wat vind je van deze? Vertical-align: top op de linkjes, en een negative bottom margin op de <em> om het streepje eronder weer terug omhoog te trekken.
Wat vind je van deze? Vertical-align: top op de linkjes, en een negative bottom margin op de <em> om het streepje eronder weer terug omhoog te trekken.
Op donderdag 2 juli 2009 22:41 schreef RTB het volgende:
als ik elk rap"liedje" een kans moest geven was ik aan het eind van dit millennium nog bezig met het tempo waarin die kotshoop uitgebraakt wordt.
👾
als ik elk rap"liedje" een kans moest geven was ik aan het eind van dit millennium nog bezig met het tempo waarin die kotshoop uitgebraakt wordt.
👾
Ik probeer deze CSS-code
in mijn CSS-bestand te verwerken, in dat bestand heb ik dit staan:
Het probleem is alleen dat het dan niet werkt.. wat doe ik verkeerd?
| 1 2 3 | <style type="text/css"> body, html, #map { margin: 0; width: 100%; height: 80%; } </style> |
| 1 2 3 4 5 | body, html, #map { margin: 0; width: 100%; height: 80%; } |
Iets dat wij niet kunnen zien met deze beperkte informatie.quote:
Op donderdag 2 juli 2009 22:41 schreef RTB het volgende:
als ik elk rap"liedje" een kans moest geven was ik aan het eind van dit millennium nog bezig met het tempo waarin die kotshoop uitgebraakt wordt.
👾
als ik elk rap"liedje" een kans moest geven was ik aan het eind van dit millennium nog bezig met het tempo waarin die kotshoop uitgebraakt wordt.
👾
Sorry voor de beperkte informatie, maar dat was idd het probleemquote:
link je in je html bestand wel naar je css bestand?
.
Oke nog een vraagje dan een paar dagen geleden had ik een vraag met betrekking tot lijsten sorteren en javascript nu was ik daar heel goed mee geholpen, maar ik had nog 1 vraag.
Is er een mogelijkheid om een voorwerp altijd te laten zien dus ongeacht of het fruit of berry is? Een soort van catch all? Dus dat je berry selecteert dat hij er bij staat en ook als je fruit selecteert?
Ik snap dat het makkelijk lukt als je de class alles mee geeft dus class="item fruit berry" alleen heb ik nu wel wat meer dan alleen fruit en berry en wel een stuk of 12 dingen.
Zie hier dat ene voorbeeld waar ik heel goed mee geholpen was
http://jsfiddle.net/maxx0r/uKHXs/55/
Is er een mogelijkheid om een voorwerp altijd te laten zien dus ongeacht of het fruit of berry is? Een soort van catch all? Dus dat je berry selecteert dat hij er bij staat en ook als je fruit selecteert?
Ik snap dat het makkelijk lukt als je de class alles mee geeft dus class="item fruit berry" alleen heb ik nu wel wat meer dan alleen fruit en berry en wel een stuk of 12 dingen.
Zie hier dat ene voorbeeld waar ik heel goed mee geholpen was
http://jsfiddle.net/maxx0r/uKHXs/55/
Een dirty oplossing:quote:Op zondag 5 mei 2013 11:17 schreef DutchErrorist het volgende:
Oke nog een vraagje dan een paar dagen geleden had ik een vraag met betrekking tot lijsten sorteren en javascript nu was ik daar heel goed mee geholpen, maar ik had nog 1 vraag.
Is er een mogelijkheid om een voorwerp altijd te laten zien dus ongeacht of het fruit of berry is? Een soort van catch all? Dus dat je berry selecteert dat hij er bij staat en ook als je fruit selecteert?
Ik snap dat het makkelijk lukt als je de class alles mee geeft dus class="item fruit berry" alleen heb ik nu wel wat meer dan alleen fruit en berry en wel een stuk of 12 dingen.
Zie hier dat ene voorbeeld waar ik heel goed mee geholpen was
http://jsfiddle.net/maxx0r/uKHXs/55/
Nog een extra class meegegeven (bijvoorbeeld 'always') aan die items en dan regel 6 van het js veranderen in:
| 1 | return $(this).hasClass(fruitColor) && $(this).hasClass(fruitType) && $(this).hasClass('always'); |
Dat werkt niet goedquote:
[..]
Een dirty oplossing:
Nog een extra class meegegeven (bijvoorbeeld 'always') aan die items en dan regel 6 van het js veranderen in:
[ code verwijderd ]
Maar hij moet ook maar op een select altijd laten zien. Dus bij fruit en berry en niet bij kleur of andersom.
Dan moet je hem een class 'always_fruit' o.i.d. geven en die tonen als fruit!="".
Op donderdag 2 juli 2009 22:41 schreef RTB het volgende:
als ik elk rap"liedje" een kans moest geven was ik aan het eind van dit millennium nog bezig met het tempo waarin die kotshoop uitgebraakt wordt.
👾
als ik elk rap"liedje" een kans moest geven was ik aan het eind van dit millennium nog bezig met het tempo waarin die kotshoop uitgebraakt wordt.
👾
Ach, ik zet het ook helemaal verkeerd neer. Ik was nog niet helemaal wakker...quote:Op zondag 5 mei 2013 11:59 schreef DutchErrorist het volgende:
[..]
Dat werkt niet goed
| 1 | return ($(this).hasClass(fruitColor) && $(this).hasClass(fruitType)) + $(this).hasClass('always'); |
