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
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.
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
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 weet niks van Hindoes. Wel van Samoerai en andere dingen.
quote:Op maandag 14 november 2011 21:29 schreef Dimens het volgende:
Dit is wat ik nu heb:SPOILER: HTMLOm spoilers te kunnen lezen moet je zijn ingelogd. Je moet je daarvoor eerst gratis Registreren. Ook kun je spoilers niet lezen als je een ban hebt.SPOILER: CSSOm spoilers te kunnen lezen moet je zijn ingelogd. Je moet je daarvoor eerst gratis Registreren. Ook kun je spoilers niet lezen als je een ban hebt.Het foutje met de header is eruit, die staat nu in elke browser goed. Helaas kan Internet Explorer nog steeds niet goed omgaan met de list.
Hoe doen jullie dat?Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
Ik heb het gevonden en heb het volgende toegevoegd aan de CSS.
Met dank aan boem-dikkie.
Al ben ik er nog niet precies achter wat dit nu eigenlijk doet.
| 1 2 3 | ul { margin: 0; } |
Met dank aan boem-dikkie.
Al ben ik er nog niet precies achter wat dit nu eigenlijk doet.
Waarschijnlijk heeft de User Agent stylesheet van IE een standaard margin van 20px of iets dergelijks op een ul staan. Als je dat niet duidelijk genoeg 'omschrijft' aan IE snapt hij het niet. IE een soort mongooltje, die moet je alles precies zo en niet anders uitleggen anders doet hij gewoon niet wat je wil.
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
Wat dacht je van alle margins van alle <ul>'s op 0 zetten?quote:
Ik heb het gevonden en heb het volgende toegevoegd aan de CSS.
[ code verwijderd ]
Met dank aan boem-dikkie.
Al ben ik er nog niet precies achter wat dit nu eigenlijk doet.
Beter hou je het dus op ul#menu, anders zijn eventuele lists in je content ineens verneukt qua layout.
Volgens mij zet IE standaard een margin van 20px op de UL terwijl Chrome, Firefox en Safari dit op de LI doen. Want zodra ik margin-left: 0px; weg haal bij LI, dan staat het menu in Internet Explorer nog perfect links maar is deze in Chrome etc. weer niet goed en kom je bij hetzelfde punt aan.quote:Op maandag 14 november 2011 21:43 schreef boem-dikkie het volgende:
Waarschijnlijk heeft de User Agent stylesheet van IE een standaard margin van 20px of iets dergelijks op een ul staan. Als je dat niet duidelijk genoeg 'omschrijft' aan IE snapt hij het niet. IE een soort mongooltje, die moet je alles precies zo en niet anders uitleggen anders doet hij gewoon niet wat je wil.
Nou, even onthouden dus en ik heb inderdaad even de #menu eraan toegevoegd en dat werkt prima. Heel erg bedankt, zo kan ik weer even verder gaan met de website.
Ik zet altijd in mijn stylesheets:
Weet niet of dat netjes is maar het werkt wel.
Dan tieft hij alles op nul tot ik het anders zeg.
| 1 2 3 4 | * { margin: 0; padding: 0; } |
Weet niet of dat netjes is maar het werkt wel.
Dan tieft hij alles op nul tot ik het anders zeg.
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
Wel of niet gebruiken van een reset is onderdeel van discussie (ik ben zelf pertinent tegen), maar op deze manier is niemand voorstander eigenlijk. Je CSS wordt er megatraag van doordat je zo įlle elementen selecteert, plus je verneukt een heleboel default stijl die gewoon hardstikke prettig is.quote:
Ik zet altijd in mijn stylesheets:
[ code verwijderd ]
Weet niet of dat netjes is maar het werkt wel.
Dan tieft hij alles op nul tot ik het anders zeg.
Behalve misschien voor een menu, maar daar defineer ik toch altijd wel zelf de margins voor, dus dan zou ik die reset weer overschrijven en is'ie ook nutteloos.
de universele selector (asterisk) wordt o.a. door Google afgeraden omdat dit aanzienlijk meer rendertijd kost dan een lijst met alle elementen.quote:
Ik zet altijd in mijn stylesheets:
[ code verwijderd ]
Weet niet of dat netjes is maar het werkt wel.
Dan tieft hij alles op nul tot ik het anders zeg.
“Specialization is for insects”.—Robert Heinlein
Als je een reset eenmaal gewend bent kan je veel sneller bereiken wat je wilt en hoef je minder om te kijken naar onderlinge renderglitches. Met name voor mobiele sites waar een klein verschil veel uit kan maken vind ik het onmisbaar gewordenquote:
[..]
Wel of niet gebruiken van een reset is onderdeel van discussie (ik ben zelf pertinent tegen), maar op deze manier is niemand voorstander eigenlijk. Je CSS wordt er megatraag van doordat je zo įlle elementen selecteert, plus je verneukt een heleboel default stijl die gewoon hardstikke prettig is.
Behalve misschien voor een menu, maar daar defineer ik toch altijd wel zelf de margins voor, dus dan zou ik die reset weer overschrijven en is'ie ook nutteloos.
“Specialization is for insects”.—Robert Heinlein
Nu even iets anders.
Ik wil aan de rechterkant van het menu een div hebben waar ik tekst in kan plaatsen. Helaas weet ik niet hoe zoiets moet als je geen position gebruikt. De div zet hij nu namelijk onder het menu, dat is niet de bedoeling.
[ Bericht 15% gewijzigd door #ANONIEM op 14-11-2011 22:41:16 ]
Ik wil aan de rechterkant van het menu een div hebben waar ik tekst in kan plaatsen. Helaas weet ik niet hoe zoiets moet als je geen position gebruikt. De div zet hij nu namelijk onder het menu, dat is niet de bedoeling.
[ Bericht 15% gewijzigd door #ANONIEM op 14-11-2011 22:41:16 ]
Gewoon met float?quote:
Nu even iets anders.
Ik wil aan de rechterkant van het menu een div hebben waar ik tekst in kan plaatsen. Helaas weet ik niet hoe zoiets moet als je geen position gebruikt. De div zet hij nu namelijk onder het menu, dat is niet de bedoeling.
Ik had hier laatst ook al een discussie over waar ik op een gegeven moment maar mee gestopt ben omdat er toch geen einde aan komt dus ik ga er nu ook niet al te veel woorden aan vuil maken. Maar in mijn ogen is de standaard browserstijl nog steeds vooral nuttig, voornamelijk voor je content gedeelte. Als je klakkeloos alle styles reset, zul je ook voor alle elementen zelf weer een stijl moeten toevoegen, zodat ze niet helemaal verneukt zijn mocht iemand ze ooit gebruiken in de content. Voor elementen waar je die standaard stijl niet op wilt (een h1, h2 enz misschien), wil je 9 van die 10 keer toch wel zelf een margin e.d. instellen dus dan heeft resetten ook geen nut. En het zelfde geldt voor template elementen.quote:Op maandag 14 november 2011 22:12 schreef n8n het volgende:
[..]
Als je een reset eenmaal gewend bent kan je veel sneller bereiken wat je wilt en hoef je minder om te kijken naar onderlinge renderglitches. Met name voor mobiele sites waar een klein verschil veel uit kan maken vind ik het onmisbaar geworden
Met een reset verneuk je dus de "fallback" voor elementen die je op het eerste gezicht niet gebruikt, en voor elementen die je wel veel gebruikt voegt het eigenlijk niets toe.
Maargoed, niet iedereen is het daar mee eens, dus ik ga er verder dan dit ook niet meer over discussiėren.
-edit- ja nu doe ik het toch
Als je bijv. op de nieuwe dumpert kijkt, daar zit ook de ranzigste van alle resets in, * {margin: 0}. Maar het enige wat verandert als je die uitschakelt is dat een paar titeltjes een paar pixels naar beneden schuiven. Voor de rest hebben alle elementen blijkbaar of standaard al geen margin, of verderop in de CSS is de reset overschreven. Dan denk ik: had je dat nou echt niet op een normale manier op kunnen lossen?
[ Bericht 10% gewijzigd door KomtTijd... op 14-11-2011 23:00:09 ]
Nee, gewoon alles naar links floaten is het makkelijkst. Het laatste element hoef je zelfs helemaal niet te floaten.
weet je wel zeker dat ze naast elkaar passen dan? inclusief borders, margins en margins? (die worden bij de breedte opgeteld, google op "css box model")
Ik had het gekopieerd uit mijn vorige css en daar stond de margin-left nog op 140px. Toen paste het niet meer en heeft hij hem op de volgende regel gezet. Beetje stom van mijzelf, maar het is nu gelukt.quote:
weet je wel zeker dat ze naast elkaar passen dan? inclusief borders, margins en margins? (die worden bij de breedte opgeteld, google op "css box model")
Ben nog niet goed in html en css, soms doe ik foute dingen maar ik moet het nog leren.
Ik sluit me hier bij aanquote:
[..]
Gewoon met float?
[..]
Ik had hier laatst ook al een discussie over waar ik op een gegeven moment maar mee gestopt ben omdat er toch geen einde aan komt dus ik ga er nu ook niet al te veel woorden aan vuil maken. Maar in mijn ogen is de standaard browserstijl nog steeds vooral nuttig, voornamelijk voor je content gedeelte. Als je klakkeloos alle styles reset, zul je ook voor alle elementen zelf weer een stijl moeten toevoegen, zodat ze niet helemaal verneukt zijn mocht iemand ze ooit gebruiken in de content. Voor elementen waar je die standaard stijl niet op wilt (een h1, h2 enz misschien), wil je 9 van die 10 keer toch wel zelf een margin e.d. instellen dus dan heeft resetten ook geen nut. En het zelfde geldt voor template elementen.
Met een reset verneuk je dus de "fallback" voor elementen die je op het eerste gezicht niet gebruikt, en voor elementen die je wel veel gebruikt voegt het eigenlijk niets toe.
Maargoed, niet iedereen is het daar mee eens, dus ik ga er verder dan dit ook niet meer over discussiėren.
Hoe zet je eigenlijk een mooie footer aan het einde van je pagina?
Een die automatisch aan de onderkant van je browser komt en als je browser langer wordt, dat deze dan automatisch naar onder gaat.
Ik ben aan het zoeken, maar misschien heeft iemand een tip.
Een die automatisch aan de onderkant van je browser komt en als je browser langer wordt, dat deze dan automatisch naar onder gaat.
Ik ben aan het zoeken, maar misschien heeft iemand een tip.
zou de rest een min-height van 100% geven, de content een margin aan de onderkant ter grootte van de footer en de footer een negatieve margin aan de bovenkant
“Specialization is for insects”.—Robert Heinlein
bottom: 0;quote:Op dinsdag 15 november 2011 09:01 schreef Dimens het volgende:
Hoe zet je eigenlijk een mooie footer aan het einde van je pagina?
Een die automatisch aan de onderkant van je browser komt en als je browser langer wordt, dat deze dan automatisch naar onder gaat.
Ik ben aan het zoeken, maar misschien heeft iemand een tip.
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
dan zit deze altijd aan de onderkant van de viewport, ook als de content groter is?quote:
“Specialization is for insects”.—Robert Heinlein
Heb m'n content altijd op min-height:100% dan drukt hij hem gewoon naar beneden als ik veel content heb.quote:Op dinsdag 15 november 2011 09:07 schreef n8n het volgende:
[..]
dan zit deze altijd aan de onderkant van de viewport, ook als de content groter is?
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
ok interessant, kom nog uit de tijd dat het alleen werkte met een absoluut of gefixeerd gepositioneerd elementquote:
[..]
Heb m'n content altijd op min-height:100% dan drukt hij hem gewoon naar beneden als ik veel content heb.
“Specialization is for insects”.—Robert Heinlein
| Forum Opties | |
|---|---|
| Forumhop: | |
| Hop naar: | |