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.
[html, css, js] Voor Dummies
Dit topic is bedoeld voor alle vragen m.b.t. HTML, CSS en javascript, kortom alles wat je nodig hebt om (de frontend van) een website te maken.
HTML: Hyper Text Markup Language is de structuur van een website. Door middel van verschillende html tags geef je aan welke elementen bij elkaar horen (bijv: <div>, <ul>), of wat de betekenis van deze data is (bijv. <p>, <h1>). HTML leent zich ook voor opmaak, maar het is makkelijker en verstandiger om hier CSS voor te gebruiken.
CSS: Cascading StyleSheet is de opmaak van een website. In je CSS specificeer je bijvoorbeeld welke kleur bepaalde elementen moeten hebben, hoe groot ze zijn en hoe je ze wilt rangschikken.
JS: Javascript Javascript (niet te verwarren met programmeertaal Java) is een scripttaal, waarmee het mogelijk is je website dynamisch te maken. Javascript kan bijvoorbeeld HTML-elementen aanpassen, toevoegen of verwijderen. Omdat javascript zeer veelzijdig is, is er voor specifieke JS vragen ook een specaal topic, zie: [Javascript] voor dummies
Vragen over PHP, SQL of andere serverside programmeertalen horen niet in dit topic. Stel deze in [PHP/MySQL] voor dummies of open zelf een topic.
Voor vragen over webhosting, domeinnamen enz. is ook een ander topic: Het grote (betaalde) webhosting topic
En voor Wordpress is er ook een speciaal topic, als het om meer gaat dan de HTML/CSS van een theme: Topicreeks: Algemeen Wordpress topic
Code posten
Het is, als je een vraag stelt, vaak handig om hier een stukje code bij te voegen. Post niet klakkeloos je hele website, maar post alleen het stukje code waar je vraag over gaat. Gebruik bovendien de [code]-tag (
), zodat je HTML, CSS of Javascript code goed leesbaar is. Dus niet [quote] of [spoiler] of wat dan ook.
Veel voorkomende problemen
Veel problemen zijn te wijden aan het niet kloppen van HTML of CSS code. Een kleine typfout is snel gemaakt, en de webbrowser kan daar soms erg slecht mee omgaan. Om te controleren of je code technisch in orde is, kun je deze controleren met de W3 validator.
Is je code niet correct? Los dan eerst de fouten op zodat de validator geen foutmeldingen meer geeft. Dit lost niet altijd je probleem op, maar zorgt in ieder geval dat alles werkt zoals het hoort te werken, waardoor overige fouten ook veel makkelijker te achterhalen zijn.
IK SNAP ER NIETS VAN HELLEP! WAT IS CSS?
We helpen iedereen graag in dit topic, ook mensen die er helemaal niets van begrijpen. Maar we verwachten wel dat je je best doet om het wel te gaan begrijpen. Lees eens wat tutorials en probeer het altijd eerst zelf. Je krijgt hier tips waar je zelf iets mee moet doen.
Voor je een vraag stel hier, verplichte kost
http://www.alistapart.com/articles/css-floats-101/
http://www.alistapart.com/articles/css-positioning-101/
Dit topic is bedoeld voor alle vragen m.b.t. HTML, CSS en javascript, kortom alles wat je nodig hebt om (de frontend van) een website te maken.
HTML: Hyper Text Markup Language is de structuur van een website. Door middel van verschillende html tags geef je aan welke elementen bij elkaar horen (bijv: <div>, <ul>), of wat de betekenis van deze data is (bijv. <p>, <h1>). HTML leent zich ook voor opmaak, maar het is makkelijker en verstandiger om hier CSS voor te gebruiken.
CSS: Cascading StyleSheet is de opmaak van een website. In je CSS specificeer je bijvoorbeeld welke kleur bepaalde elementen moeten hebben, hoe groot ze zijn en hoe je ze wilt rangschikken.
JS: Javascript Javascript (niet te verwarren met programmeertaal Java) is een scripttaal, waarmee het mogelijk is je website dynamisch te maken. Javascript kan bijvoorbeeld HTML-elementen aanpassen, toevoegen of verwijderen. Omdat javascript zeer veelzijdig is, is er voor specifieke JS vragen ook een specaal topic, zie: [Javascript] voor dummies
Vragen over PHP, SQL of andere serverside programmeertalen horen niet in dit topic. Stel deze in [PHP/MySQL] voor dummies of open zelf een topic.
Voor vragen over webhosting, domeinnamen enz. is ook een ander topic: Het grote (betaalde) webhosting topic
En voor Wordpress is er ook een speciaal topic, als het om meer gaat dan de HTML/CSS van een theme: Topicreeks: Algemeen Wordpress topic
Code posten
Het is, als je een vraag stelt, vaak handig om hier een stukje code bij te voegen. Post niet klakkeloos je hele website, maar post alleen het stukje code waar je vraag over gaat. Gebruik bovendien de [code]-tag (
), zodat je HTML, CSS of Javascript code goed leesbaar is. Dus niet [quote] of [spoiler] of wat dan ook.Veel voorkomende problemen
Veel problemen zijn te wijden aan het niet kloppen van HTML of CSS code. Een kleine typfout is snel gemaakt, en de webbrowser kan daar soms erg slecht mee omgaan. Om te controleren of je code technisch in orde is, kun je deze controleren met de W3 validator.
Is je code niet correct? Los dan eerst de fouten op zodat de validator geen foutmeldingen meer geeft. Dit lost niet altijd je probleem op, maar zorgt in ieder geval dat alles werkt zoals het hoort te werken, waardoor overige fouten ook veel makkelijker te achterhalen zijn.
IK SNAP ER NIETS VAN HELLEP! WAT IS CSS?
We helpen iedereen graag in dit topic, ook mensen die er helemaal niets van begrijpen. Maar we verwachten wel dat je je best doet om het wel te gaan begrijpen. Lees eens wat tutorials en probeer het altijd eerst zelf. Je krijgt hier tips waar je zelf iets mee moet doen.
Voor je een vraag stel hier, verplichte kost
http://www.alistapart.com/articles/css-floats-101/
http://www.alistapart.com/articles/css-positioning-101/
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?
Deze muziek smaakt naar bier :)
Es bedarf keiner Psychoanalyse, um festzustellen, dass das Leben ein einziger Friedhof gescheiterter Pläne ist!
Es bedarf keiner Psychoanalyse, um festzustellen, dass das Leben ein einziger Friedhof gescheiterter Pläne ist!
Staat al in de op he 
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?
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:
Deze muziek smaakt naar bier :)
Es bedarf keiner Psychoanalyse, um festzustellen, dass das Leben ein einziger Friedhof gescheiterter Pläne ist!
Es bedarf keiner Psychoanalyse, um festzustellen, dass das Leben ein einziger Friedhof gescheiterter Pläne ist!
Ik wil een vertikaal scrollende website maken zoals in het voorbeeld hieronder:
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.
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.
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.
http://cssdeck.com/labs/wwahaw2y
Maar verder, wat heb je zelf al geprobeerd of opgezocht?
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?
Het menu ineens tevoorschijn laten komen zodra de site voorbij een bepaald punt scrollt heb ik nog niks over kunnen vinden.
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.
http://stackoverflow.com/(...)crolling-1000px-down
Met als gekozen antwoord een fiddle met wat je wilt.
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!.
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?
Boeit juist voor de HTML het meest. CSS en JS gaat toch maar één keer over de lijn.quote:
[..]
boeit niet veel. JS en CSS is wel minimized
Maakt dat uit?quote:
Wat een hoop witregels in de code van FOK!.
2000 light years from home
Ach, anno 2013 is de impact beperkt.quote:
[..]
Boeit juist voor de HTML het meest. CSS en JS gaat toch maar één keer over de lijn.
Op dinsdag 13 augustus schreef Xa1pt:
Neuh, fraude mag best aangepakt worden. Maar dat het de maatschappij meer oplevert of beter is voor de samenleving, is nog maar de vraag.
Op donderdag 25 juni 2015 schreef KoosVogels:
Klopt. Ik ben een racist.
Neuh, fraude mag best aangepakt worden. Maar dat het de maatschappij meer oplevert of beter is voor de samenleving, is nog maar de vraag.
Op donderdag 25 juni 2015 schreef KoosVogels:
Klopt. Ik ben een racist.
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.
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:
[..]
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.
En dan reken ik de html-comments nog niet mee.
Ik vind dat eigenlijk pas relevant op een mobiel apparaat.quote:
[..]
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.
Op dinsdag 13 augustus schreef Xa1pt:
Neuh, fraude mag best aangepakt worden. Maar dat het de maatschappij meer oplevert of beter is voor de samenleving, is nog maar de vraag.
Op donderdag 25 juni 2015 schreef KoosVogels:
Klopt. Ik ben een racist.
Neuh, fraude mag best aangepakt worden. Maar dat het de maatschappij meer oplevert of beter is voor de samenleving, is nog maar de vraag.
Op donderdag 25 juni 2015 schreef KoosVogels:
Klopt. Ik ben een racist.
als het geGZIPt is, valt die impact wel mee toch?
En het meeste komt uit de cache hier (350 wv 230 uit de cache).
En het meeste komt uit de cache hier (350 wv 230 uit de cache).
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?
Ja mij maakt het ook niet uit, maar ik hoef ook het dataverkeer van FOK! niet te managen.quote:
[..]
Ik vind dat eigenlijk pas relevant op een mobiel apparaat.
Hoe zouden jullie dit aanpakken? Het gaat om het driehoekje bij het geselecteerde menu-item. Het moeilijke punt is het rode vlak eronder een plaatje is en per pagina kan verschillen. Het is dus niet altijd een rood puntje en zelfs niet altijd een puntje met 1 kleur. Eigenlijk is het een stukje transparantie waar je het vlak dat eronder staat doorheen ziet.
Ik heb wel eerder van dit soort dingen gemaakt, maar dan gebruikte ik altijd een achtergrondplaatje bij het geselecteerde menu-item met daarin een driehoekje. Dat gaat nu niet omdat het driehoekje er dus niet altijd hetzelfde uitziet. En een transparant plaatje gaat ook niet, want dan zie je gewoon het donkergrijs van de balk erdoorheen
De HTML structuur ziet er ongeveer zo uit:
| 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> |
Heeft iemand een slim idee om dit op te lossen?
Zwarte achtergrond in de <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.
Moet je wel zorgen dat daar achter niet nog een zwarte achtergrond zit van de container.
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.
👾
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
quote:
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:
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
Ik zou het zonde vinden om extra elementen te maken alleen maar om alles links en rechts van het menu een kleur te geven
