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.
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.
Vragen over PHP, SQL of andere serverside programmeertalen horen niet in dit topic. Deze kun je stellen in [PHP/MySQL] voor dummies of open zelf een topic.
Voor vragen over webhosting, domeinnamen enz. kun je terecht in 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: [Wordpress]Algemeen 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.Nog beter is om een snippet in Codepen of JSFiddle te plakken. Hierdoor kunnen anderen je ook makkelijker helpen.
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.
Hier een paar artikelen over CSS elementen die vaak voor verwarring zorgen
• CSS Floats 101
• CSS Positioning 101
Heb je zin om HTML, CSS of Javascript leren, dan zijn deze video tutorials een goede plek om te beginnen
• 30 Days to Learn HTML & CSS
• 30 Days to Learn jQuery
• JavaScript from null
Overige tips & tricks
• jQuery Tips and Tricks
• Hidden Features of JavaScript
Populaire frameworks
• [HTML/CSS] Bootstrap
• [HTML/CSS] Foundation
• [JS] jQuery
• [JS] AngularJS
• [JS] Backbone
• [JS] Ember.js
Mijn laatste vraag
http://codepen.io/anon/pen/OyvmBR
Er zijn vier bolletjes die naar een foto sliden, de rest slide nergens heen. Misschien kan iemand mij helpen?
http://codepen.io/anon/pen/OyvmBR
Er zijn vier bolletjes die naar een foto sliden, de rest slide nergens heen. Misschien kan iemand mij helpen?
1. je bolletjes staan allemaal door elkaar, kijk naar de margin-leftquote:Op zondag 25 oktober 2015 20:19 schreef ikbenrond het volgende:
Mijn laatste vraag
http://codepen.io/anon/pen/OyvmBR
Er zijn vier bolletjes die naar een foto sliden, de rest slide nergens heen. Misschien kan iemand mij helpen?
2. .overflow-wrapper moet 1000% breed zijn bij 10 items, het was 400% voor 4 items
3. .slide img moet 10% breed zijn voor 10 items, het was 25% voor 4 items
4. #Slide10:checked ~ .overflow-wrapper moet -900% zijn
http://codepen.io/anon/pen/Qjmvzq
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.
👾
Ohhquote:Op zondag 25 oktober 2015 20:26 schreef mstx het volgende:
[..]
1. je bolletjes staan allemaal door elkaar, kijk naar de margin-left
2. .overflow-wrapper moet 1000% breed zijn bij 10 items, het was 400% voor 4 items
3. .slide img moet 10% breed zijn voor 10 items, het was 25% voor 4 items
4. #Slide10:checked ~ .overflow-wrapper moet -900% zijn
http://codepen.io/anon/pen/Qjmvzq
Thanks man. 
Ze staan ook alle 10 netjes in het midden nu.
Nog een puntje om je code wat leesbaarder te houden. Als je stijlen hebt die op veel elementen terug komen kun je die beter samen in een class zetten die je dan aan al die elementen plakt.quote:Op zondag 25 oktober 2015 20:56 schreef ikbenrond het volgende:
[..]
Ohh
Ze staan ook alle 10 netjes in het midden nu.
In jouw geval kopieer je nu de hele stijl van je labels voor alle 10 de labels. Echter veranderen alleen de margin-left en de bottom. De rest van de regels kunnen dus prima samen een class krijgen.
Daarmee het je minder code, 70 regels minder in dit geval, wat niet alleen leesbaarder is maar ook makkelijker aanpasbaar. Nu hoef je een toekomstige wijziging maar op één plek uit te voeren in plaats van het naar 10 plekken te moeten kopiëren.
http://codepen.io/anon/pen/XmEgJO
Whether or not you can become great at something, you can always become better.
And one day you'll wake up and find out how good you actually became, having transcended whatever limits you might have thought you couldn't pass.
Neil Degrasse Tyson
And one day you'll wake up and find out how good you actually became, having transcended whatever limits you might have thought you couldn't pass.
Neil Degrasse Tyson
Thanks voor de tip, dat is inderdaad wat duidelijkerquote:
[..]
Nog een puntje om je code wat leesbaarder te houden. Als je stijlen hebt die op veel elementen terug komen kun je die beter samen in een class zetten die je dan aan al die elementen plakt.
In jouw geval kopieer je nu de hele stijl van je labels voor alle 10 de labels. Echter veranderen alleen de margin-left en de bottom. De rest van de regels kunnen dus prima samen een class krijgen.
Daarmee het je minder code, 70 regels minder in dit geval, wat niet alleen leesbaarder is maar ook makkelijker aanpasbaar. Nu hoef je een toekomstige wijziging maar op één plek uit te voeren in plaats van het naar 10 plekken te moeten kopiëren.
http://codepen.io/anon/pen/XmEgJO
Volgens mij verandert "bottom" helemaal niet. En als het voor een paar items wel verandert, kun je alsnog de standaardwaarde bij de class zetten en de afwijkende waarde bij de betreffende id's.quote:
[..]
Nog een puntje om je code wat leesbaarder te houden. Als je stijlen hebt die op veel elementen terug komen kun je die beter samen in een class zetten die je dan aan al die elementen plakt.
In jouw geval kopieer je nu de hele stijl van je labels voor alle 10 de labels. Echter veranderen alleen de margin-left en de bottom. De rest van de regels kunnen dus prima samen een class krijgen.
Daarmee het je minder code, 70 regels minder in dit geval, wat niet alleen leesbaarder is maar ook makkelijker aanpasbaar. Nu hoef je een toekomstige wijziging maar op één plek uit te voeren in plaats van het naar 10 plekken te moeten kopiëren.
http://codepen.io/anon/pen/XmEgJO
Helemaal gelijk in, niet goed genoeg opgelet bij het aanpassen. Wat ironisch genoeg mijn punt alleen maar duidelijker maakt. Hou je code zo overzichtelijk mogelijk.quote:
[..]
Volgens mij verandert "bottom" helemaal niet. En als het voor een paar items wel verandert, kun je alsnog de standaardwaarde bij de class zetten en de afwijkende waarde bij de betreffende id's.
Een standaardwaarde opnemen in je class die je bij uitzonderingen overschrijft vanuit een andere class/id is inderdaad makkelijker dan geen standaardwaarde op te nemen.
Uiteindelijk valt het allemaal terug op het principe van Don't Repeat Yourself (DRY). Als je merkt dat je code vaak hergebruikt moet je je afvragen of er niet een betere manier is om diezelfde code vanuit verschillende plekken aan te spreken.
In het geval van CSS kan dat door het in een class te zetten. Bij Javascript kun je het in een functie zetten die je aanspreekt waneer je het nodig hebt.
Whether or not you can become great at something, you can always become better.
And one day you'll wake up and find out how good you actually became, having transcended whatever limits you might have thought you couldn't pass.
Neil Degrasse Tyson
And one day you'll wake up and find out how good you actually became, having transcended whatever limits you might have thought you couldn't pass.
Neil Degrasse Tyson
Nog beter is om een CSS preprocessor te gebruiken (sass of less). Houdt je code netter en beter onderhoudbaar. En je hebt ook minder classes nodig.
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?
Dan had je waarschijnlijk een mixin gepakt in plaats van een class te gebruiken. Dat zou ik juist een nadeel vinden, al was het maar omdat je denkt dat je DRY bezig bent maar de uiteindelijke css dat helemaal niet meer is.quote:
Nog beter is om een CSS preprocessor te gebruiken (sass of less). Houdt je code netter en beter onderhoudbaar. En je hebt ook minder classes nodig.
In plaats van classes toevoegen in je dom, voeg je een mixin toe aan je class. Vind ik persoonlijk netter.quote:
[..]
Dan had je waarschijnlijk een mixin gepakt in plaats van een class te gebruiken. Dat zou ik juist een nadeel vinden, al was het maar omdat je denkt dat je DRY bezig bent maar de uiteindelijke css dat helemaal niet meer is.
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?
Blijft een lastige discussie, of je nou mixins moet gebruiken, extends of gewoon extra classes in je HTML. Ik neig nog steeds heel erg naar extra classes. Misschien dat je het 'composition over inheritance' zou kunnen noemen.
Nee.
Afhankelijk van de situatie. Als je uitgaat van de css in de tweede post van dit topic, is het handiger om het eerst op te ruimen zoals BrainOverfloW gedaan heeft. Daarna kun je misschien nog wat doen met een css preprocessor. Als je eerst preprocessors gaat gebruiken, krijg je 10 id's met dezelfde mixin.quote:Op maandag 26 oktober 2015 08:11 schreef Catch22- het volgende:
[..]
In plaats van classes toevoegen in je dom, voeg je een mixin toe aan je class. Vind ik persoonlijk netter.
Ik vind vooral de variabelen en het kunnen uitvoeren van berekeningen van preprocessors erg makkelijk. Dan kunnen dingen ineens logische namen krijgen. Wel zo prettig bij het nalezen van code en het zien van afhankelijkheden.quote:
Blijft een lastige discussie, of je nou mixins moet gebruiken, extends of gewoon extra classes in je HTML. Ik neig nog steeds heel erg naar extra classes. Misschien dat je het 'composition over inheritance' zou kunnen noemen.
Ik schrijf mijn css net anders dan de meeste developers die ik ken. Ben indertijd met de fok lay-out mobiel op zoek gegaan naar een compacte manier om css te schrijven in een tijd dat mobiele browsers niet meer dan 25KB uncompressed wilden cachen.
In plaats van per selector meerdere regels declaraties neer te zetten, doe ik het andersom. Eén declaratie met meerdere selectors waar die van toepassing is. Mijn sheet deel ik dan op in een reset, typografie, layout, en ornamenten. Nog een raw file om dingen uit te proberen - wat je achteraf wel op moet schonen. De variabelen haal ik uit een var.color.scss en var.size.scss waar ik een naming convention - bijna - heb uitgedokterd.
Het ziet er dan als volgt uit:
style.scss
en een deel van layout.scss
Het is wat meer moeite om op te zetten maar je houdt een serieus compacte css over, en zonder je html te vervuilen met allerhande classes overal.
In plaats van per selector meerdere regels declaraties neer te zetten, doe ik het andersom. Eén declaratie met meerdere selectors waar die van toepassing is. Mijn sheet deel ik dan op in een reset, typografie, layout, en ornamenten. Nog een raw file om dingen uit te proberen - wat je achteraf wel op moet schonen. De variabelen haal ik uit een var.color.scss en var.size.scss waar ik een naming convention - bijna - heb uitgedokterd.
Het ziet er dan als volgt uit:
style.scss
en een deel van layout.scss
Het is wat meer moeite om op te zetten maar je houdt een serieus compacte css over, en zonder je html te vervuilen met allerhande classes overal.
“Specialization is for insects”.—Robert Heinlein
Je kunt calc() tegenwoordig ook zonder preprocessor gebruiken.quote:
[..]
Ik vind vooral de variabelen en het kunnen uitvoeren van berekeningen van preprocessors erg makkelijk.
voor mij geen issue meer met border-box, had IE6 het toch bij het juiste eind.quote:
[..]
Je kunt calc() tegenwoordig ook zonder preprocessor gebruiken.
“Specialization is for insects”.—Robert Heinlein
Daar zijn wel wat issues mee.quote:
[..]
Je kunt calc() tegenwoordig ook zonder preprocessor gebruiken.
[ Bericht 29% gewijzigd door Light op 26-10-2015 21:28:39 ]
Ik zit een beetje op de n8n route maar dan met Stylus, ben zelf alleen wel erg van het benoemen van dingen.
Zou bij mij eerder zoiets zijn
En even wat anders, schaam me haast om het te zeggen. Maar ik ben laatst voor de grap eens in flexbox gedoken.
Mijn leven is sindsdien veranderd.
| 1 | header .icon |
Zou bij mij eerder zoiets zijn
| 1 | .Header__icon |
En even wat anders, schaam me haast om het te zeggen. Maar ik ben laatst voor de grap eens in flexbox gedoken. Mijn leven is sindsdien veranderd.
Die .icon heeft nog andere styling die onafhankelijk is van de header context. Met jouw voorbeeld heb je dan - wellicht - ook een .Section__icon (waarom die interpunctie zo?).
Maak er dan .header.icon van, dan kan je ze nog los van elkaar selecteren.
Maak er dan .header.icon van, dan kan je ze nog los van elkaar selecteren.
“Specialization is for insects”.—Robert Heinlein
Bem he. Ik ben er geen fan van
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?
Ik doop mijn syntax do:css, declaration oriented. Just do it, zoals ze zo mooi zeggen.
Edit: https://css-tricks.com/bem-101 meh
Edit: https://css-tricks.com/bem-101 meh
“Specialization is for insects”.—Robert Heinlein
Inderdaad, http://getbem.com/naming/quote:
Ik heb hiervoor gekozen omdat de css van bij ons op het werk een grote bende is, en de !importants je om de oren vliegen. Gebruik het nu een aantal maanden en valt me nog niet tegen, en anders is het in ieder geval een consistente bende.
Ik ben geen "frontender" maar ik sta altijd open voor betere alternatieven.
BEM en namespacing, ik ben er groot fan van. Zorgt er IMO echt voor dat je veel beter nadenkt over hergebruik en het opsplitsen van je CSS in herbruikbare stukjes.
Flexbox is inderdaad briljant, hoewel we het nu wel gaan misbruiken voor dingen waar eigenlijk de Grid-module van CSS voor bedoeld is - maar ja, die wordt nog nauwelijks ondersteund.
Flexbox is inderdaad briljant, hoewel we het nu wel gaan misbruiken voor dingen waar eigenlijk de Grid-module van CSS voor bedoeld is - maar ja, die wordt nog nauwelijks ondersteund.
Nee.
