quote:Op zaterdag 27 april 2013 12:02 schreef InTrePidIvity het volgende:
[..]
Dankjewel! Ik snap wat je bedoelt en heb het op zich wel werkend weten te krijgen, maar ik vraag me af of dit de 'mooiste' manier is. Ik ben het mezelf allemaal aan het aanleren en probeer het semantisch meteen goed onder de knie te krijgen. En zo efficiënt mogelijk natuurlijk, zou je er naar willen kijken?
http://intel.comli.com/index.html
De blokjes zijn CSS, maar kan ik de span elementen daar makkelijk naast krijgen, i.p.v. dat ze zoals nu in het blok zelf beginnen? Kan uiteraard met margin, maar kan het ook anders?
ja dat bedoel ik. dat de site die je noemde wel een goede tip was want ik kende hem nog nietquote:
Het glijden van de underline heb ik van de week toevallig als open source ding gevonden:quote:Op zaterdag 27 april 2013 14:15 schreef karton2 het volgende:
Ik wil een vertikaal scrollende website maken zoals in het voorbeeld hieronder:
[ afbeelding ]
Op de Welkompagina staat het menu statisch weergegeven zodat de bezoeker snel het deel kan bezoeken wat hij wil.
Zodra het beeld naar beneden scrollt en voorbij de rode lijn raakt is het de bedoeling dat linksboven een menu tevoorschijn komt (bijv. het beeld inglijden of via transparency).
Verder moet dat menu reageren op mousovers en laten zien op welke pagina de bezoeker zich bevindt.
Dat laatste wil ik doen dmv van underline. Maar de lijn van underline moet glijden ipv van menu-woord naar men-woord springen.
Ik heb al begrepen dat die glijdende underline javascript werk gaat worden. Over de rest van het menu heb ik nog niks zinvols kunnen vinden, hopelijk dat jullie hier meer over kunnen vertellen.
De site zelf van pagina naar pagina laten glijden werkt al. De underline kwam ik alleen tegen met JS code erin verwerkt (hier). Jouw voorbeeld gebruikt alleen CSS maar is op de lavalamp plugin gebaseerd die ik heb gevonden.quote:Op zaterdag 27 april 2013 14:22 schreef Maringo het volgende:
[..]
Het glijden van de underline heb ik van de week toevallig als open source ding gevonden:
http://cssdeck.com/labs/wwahaw2y
Maar verder, wat heb je zelf al geprobeerd of opgezocht?
Mijn eerste hit van google:quote:Op zaterdag 27 april 2013 14:46 schreef karton2 het volgende:
[..]
De site zelf van pagina naar pagina laten glijden werkt al. De underline kwam ik alleen tegen met JS code erin verwerkt (hier). Jouw voorbeeld gebruikt alleen CSS maar is op de lavalamp plugin gebaseerd die ik heb gevonden.
Het menu ineens tevoorschijn laten komen zodra de site voorbij een bepaald punt scrollt heb ik nog niks over kunnen vinden.
boeit niet veel. JS en CSS is wel minimizedquote:Op zondag 28 april 2013 21:33 schreef robin007bond het volgende:
Wat een hoop witregels in de code van FOK!.
Boeit juist voor de HTML het meest. CSS en JS gaat toch maar één keer over de lijn.quote:Op maandag 29 april 2013 15:06 schreef Catch22- het volgende:
[..]
boeit niet veel. JS en CSS is wel minimized
Maakt dat uit?quote:Op zondag 28 april 2013 21:33 schreef robin007bond het volgende:
Wat een hoop witregels in de code van FOK!.
Ach, anno 2013 is de impact beperkt.quote:Op maandag 29 april 2013 15:08 schreef KomtTijd... het volgende:
[..]
Boeit juist voor de HTML het meest. CSS en JS gaat toch maar één keer over de lijn.
De opmaak van code moet netjes zijn. Maar de opmaak van gegenereerde html vind ik een stuk minder spannend. Ik zou persoonlijk niet geneigd zijn om extra code te schrijven met als enige doel zorgen dat de gegenereerde html netter is.quote:Op maandag 29 april 2013 18:46 schreef Devv het volgende:
En toch blijf ik het "bad practice" vinden om de opmaak van je code niet even netjes te maken. Maar verder boeit het inderdaad ook niet.
Inderdaad. Zolang de sourcecode waar je dagelijks mee moet werken maar fatsoenlijk is. Wat je uiteindelijk naar de client stuurt moet vooral klein en snel zijn, leesbaarheid van de code is daarbij nauwelijks relevant.quote:Op maandag 29 april 2013 22:01 schreef Light het volgende:
[..]
De opmaak van code moet netjes zijn. Maar de opmaak van gegenereerde html vind ik een stuk minder spannend. Ik zou persoonlijk niet geneigd zijn om extra code te schrijven met als enige doel zorgen dat de gegenereerde html netter is.
Er zit ruim 8KB aan onnodige whitespace in de source van deze pagina. 5,5% van het totaal (144,7KB). Dat vind ik toch aardig substantieel.quote:Op maandag 29 april 2013 18:28 schreef Scorpie het volgende:
[..]
Ach, anno 2013 is de impact beperkt.
Ik vind dat eigenlijk pas relevant op een mobiel apparaat.quote:Op woensdag 1 mei 2013 10:33 schreef KomtTijd... het volgende:
[..]
Er zit ruim 8KB aan onnodige whitespace in de source van deze pagina. 5,5% van het totaal (144,7KB). Dat vind ik toch aardig substantieel.
En dan reken ik de html-comments nog niet mee.
Ja mij maakt het ook niet uit, maar ik hoef ook het dataverkeer van FOK! niet te managen.quote:Op woensdag 1 mei 2013 10:37 schreef Scorpie het volgende:
[..]
Ik vind dat eigenlijk pas relevant op een mobiel apparaat.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <header> <a href=""><img src="logo.png"></a> <nav> <ul> <li><a href="/">home</a></li> <li><a href="/about">about</a></li> <li><a href="/cases">cases</a></li> <li><a href="/blog">blog</a></li> </ul> </nav> <div> <!-- hier staat het rode gebeuren --> </div> </header> |
quote:Op donderdag 2 mei 2013 09:02 schreef mstx het volgende:
Zwarte achtergrond in de <ul> of <a> die je bij de hover vervangt door een PNG waar dat driehoekje transparant is.
Moet je wel zorgen dat daar achter niet nog een zwarte achtergrond zit van de container.
Maar hoe zorg ik dan dat de rest van de balk ook donker wordt zonder dat-ie achter het menu zit?quote:Op donderdag 2 mei 2013 09:03 schreef KomtTijd... het volgende:
background-color of image op de Li's zetten ipv de ul? en een andere truc verzinnen om de balk door te laten lopen over de hele breedte
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
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.
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:Op donderdag 2 mei 2013 10:59 schreef Dimauro het volgende:
[..]
Maar wil je dat driehoekje mee laten glijden over de hele menubalk of alleen als je hovert ?
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; } |
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.
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:
Sorry voor de beperkte informatie, maar dat was idd het probleemquote:Op zaterdag 4 mei 2013 15:22 schreef Alfje het volgende:
link je in je html bestand wel naar je css bestand?
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/
1 | return $(this).hasClass(fruitColor) && $(this).hasClass(fruitType) && $(this).hasClass('always'); |
Dat werkt niet goedquote:Op zondag 5 mei 2013 11:40 schreef Maringo het volgende:
[..]
Een dirty oplossing:
Nog een extra class meegegeven (bijvoorbeeld 'always') aan die items en dan regel 6 van het js veranderen in:
[ code verwijderd ]
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 goedMaar hij moet ook maar op een select altijd laten zien. Dus bij fruit en berry en niet bij kleur of andersom.
1 | return ($(this).hasClass(fruitColor) && $(this).hasClass(fruitType)) + $(this).hasClass('always'); |
Oke die werkt, alleen nu blijft het object bij beide staan (kleuren en soort fruit). Ik wil dat hij alleen bij 1 blijft staan.quote:Op zondag 5 mei 2013 12:06 schreef Maringo het volgende:
[..]
Ach, ik zet het ook helemaal verkeerd neer. Ik was nog niet helemaal wakker...
[ code verwijderd ]
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 43 44 45 46 47 48 49 50 51 52 53 54 | body, html, #map { margin: 0; width: 100%; height: 85%; } #bovenkant{ width: 100%; height: 40px; background-color: black; text-align: center; line-height: 150%; vertical-align: middle; color: white; font-weight: bold; font-size: 18px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif } #box{ width: 300px; background: rgba(0,0,0,0.8); z-index: 1000; position: absolute; top: 50px; left: 50px; color: white; padding: 10px; border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -webkit-border-radius: 10px; -ms-border-radius: 10px; } #midden{ position: absolute; background-color: #DBA901; width: 100%; height: 750px; } #onderkant{ width: 100%; height: 40px; background-color: black; text-align: left; line-height: 150%; vertical-align: middle; color: white; font-weight: bold; font-size: 11px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif } |
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 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="nl"> <head> <title>Google Maps API V3</title> <link rel="stylesheet" href="./css/style.css" type="text/css"> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDypT9N2T2imUPhILy_zfWJP1EGUiSTDKY&sensor=false"></script> <script type="text/javascript" src="./js/kaart.php"></script> </head> <body onload="getMap()"> <div id="bovenkant"><? echo MENU; ?></div> <div id="map"> </div> <div id="box"> <b><? echo INDEX_BOX_WELKOM; ?></b> <p><? echo INDEX_BOX_INHOUD; ?></p> </div> <div id="midden"> </div> <div id="onderkant"> </div> </body> </html> |
Thanks! Dat heeft geholpenquote:Op zondag 5 mei 2013 16:51 schreef Dimauro het volgende:
#midden{
position: absolute;
Ik denk dat het aan de absolute positie van je #midden div ligt.
Ja, maar waarom?quote:Op zondag 5 mei 2013 18:12 schreef Crimyclown het volgende:
Is het mogelijk een CMS achter een applicatie te stoppen (Android app).
Natuurlijk. Data ophalen met JSON is daar een goede methode voor.quote:Op zondag 5 mei 2013 18:12 schreef Crimyclown het volgende:
Is het mogelijk een CMS achter een applicatie te stoppen (Android app).
in de regel is dit een matig idee ja.quote:
Om content in de applicatie beheersbaar te maken. Er zit veel informatie in die door de opdrachtgever gewijzigd moeten kunnen worden. Ik ga niet elke keer een nieuwe code voor hem schrijven.quote:
Bedanktquote:Op zondag 5 mei 2013 21:22 schreef boem-dikkie het volgende:
[..]
Natuurlijk. Data ophalen met JSON is daar een goede methode voor.
quote:Op maandag 6 mei 2013 12:11 schreef Holograph het volgende:
Mijn site is bijna af, ik stuit alleen op de laatste problemen:
Onderaan mijn website heb ik twee boxen staan voor informatie e.d. Het probleem is alleen dat de boxen meesschuiven op het moment dat ik mijn internet venster kleiner maakt. Hierdoor komt rechter box onder de linker box te staan, wat er totaal niet uitziet. Het liefst zou ik willen dat ze gewoon allebei in het midden van de pagina (blijven) staan.
http://jsfiddle.net/VTe8P/1/
Weet iemand hier een oplossing voor? Het betreffen #box_midden_inhoud en #box_midden_inhoud1.
1 2 3 4 5 6 | *knip*..#box_midden_inhoud1{ width: 500px; height:auto; margin-left:auto; margin-right:auto;..*knip* |
1 2 3 4 5 6 7 | section ol li { } section ul li { } |
Ik zal wel iets niet goed gedaan hebben, dit dacht ik namelijk al geprobeerd te hebben. Dankjewel in elk gevalquote:Op woensdag 8 mei 2013 14:16 schreef Crutch het volgende:
[ code verwijderd ]
http://jsfiddle.net/DruSS/
Zo geef je specifiek aan welke <li>'s je wil hebben.
Als dat nog steeds niet werkt, kun je dan je css eens posten?quote:Op woensdag 8 mei 2013 14:24 schreef InTrePidIvity het volgende:
[..]
Ik zal wel iets niet goed gedaan hebben, dit dacht ik namelijk al geprobeerd te hebben. Dankjewel in elk geval
Ik schreef het niet helemaal duidelijk op: jouw oplossing werkt perfect, maar ik dacht dat ik dat eerder al geprobeerd had zonder succes. Zal eerder wel iets fout gedaan hebbenquote:Op woensdag 8 mei 2013 14:25 schreef Crutch het volgende:
[..]
Als dat nog steeds niet werkt, kun je dan je css eens posten?
Oh ok.quote:Op woensdag 8 mei 2013 14:43 schreef InTrePidIvity het volgende:
[..]
Ik schreef het niet helemaal duidelijk op: jouw oplossing werkt perfect, maar ik dacht dat ik dat eerder al geprobeerd had zonder succes. Zal eerder wel iets fout gedaan hebben
Why.. Ze bestaan niet voor niets. Of bedoel je dat je comments in je html heb staan?quote:Op vrijdag 10 mei 2013 20:19 schreef Qontroller het volgende:
Dan haal ik de comments er uit, thanks!
Ja dat bedoel ikquote:Op vrijdag 10 mei 2013 20:25 schreef Maringo het volgende:
[..]
Why.. Ze bestaan niet voor niets. Of bedoel je dat je comments in je html heb staan?
Forum Opties | |
---|---|
Forumhop: | |
Hop naar: |