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.
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.
Foei Mirel, nieuwe openen als je de vorige dichtgooit.
Tevens even het Wordpress topic gelinked, aangezien daar ook best wat vragen over gaan.
Tevens even het Wordpress topic gelinked, aangezien daar ook best wat vragen over gaan.
Is het nou wel of niet zo dat er vanzelf een nieuwe komt? 
Hier de laatste posts, zet ze eventueel in de OP
Op het moment dat je een 2e element er naast zet die met margin-left gescheiden is vanaf het 1e, gaat 'ie niet tot 100% breedte,.
Zie www.mirelmasic.nl binnen m'n menu div.
[ Bericht 3% gewijzigd door Mirel op 08-01-2012 02:35:22 ]
Hier de laatste posts, zet ze eventueel in de OP
quote:Op zaterdag 7 januari 2012 22:46 schreef Neraice het volgende:
Ik heb een inspiratieblock: Ik ben bezig met een theme voor telefoons. Nou heb ik een sidebar gemaakt waar plaats is voor een menu, maar ik ben er nog niet uit wat ik erin wil. Ik wil namelijk niet zo'n standaard lijstje maar iets leuks doen met de opmaak. Iemand een idee?
Hier een link: http://dahndesigns.net/theme.png
Ik ben zelf benieuwd wat de beste manier is om deze opstelling te nemen. Een body met een achtergrond (in mijn geval een patroon), met bovenaan een menucontainer, en erin 2 elementen. Dat het menu links margin-left heeft is niet zo belangrijk. Het gaat om die scheiding tussen de 2 elementen, waarbij het 2e element tot over de hele breedte van de pagina moet gaanquote:
Voor telefoonbrowsers? En wat zijn de menu-items? Als het bijv. over aardbeien en sinaasappels gaat, dan kan je die als knoppen doen bijvoorbeeld
Op het moment dat je een 2e element er naast zet die met margin-left gescheiden is vanaf het 1e, gaat 'ie niet tot 100% breedte,.
Zie www.mirelmasic.nl binnen m'n menu div.
[ Bericht 3% gewijzigd door Mirel op 08-01-2012 02:35:22 ]
When all else fails, you always have delusion.
1e element naar links floaten zou genoeg moeten zijn.
Of anders beide floaten of display:inline-block geven, de achtergrondkleur + bottom border op de wrapper zetten en het eerste element een border links en rechts geven.
Of anders beide floaten of display:inline-block geven, de achtergrondkleur + bottom border op de wrapper zetten en het eerste element een border links en rechts geven.
Oh om even duidelijk te zijn, dat gedoe eromheen is de wrapper, geen border Die scheiding is in mijn geval de kleur van m'n achtergrond Even plaatje updaten. Voorlopig lijkt dit de beste manier. De hele container een kleurtje geven werkt niet want die overlapt dan de scheiding, of je die maakt met margins, lege divs of lege borders.
Dit lijkt me nu de beste manier:
1e element float: left; zodat het 2e element er naast komt.
Als je het 2e element 10px vanaf het 1e element wilt, én tot aan het einde van het scherm wilt hebben, dan moet je met margin-left dat doen, MAAR, maar die margin-left heeft als nulpunt het eerste element.
Als je wilt dat het 0 punt rechts van het 1e element is, dan moet je float: left; ook bij het 2e element doen, maar in ruil daarvoor loopt je element niet over de hele breedte van je pagina.
[ Bericht 33% gewijzigd door Mirel op 08-01-2012 02:26:44 ]
Die scheiding is in mijn geval de kleur van m'n achtergrond Even plaatje updaten. Voorlopig lijkt dit de beste manier. De hele container een kleurtje geven werkt niet want die overlapt dan de scheiding, of je die maakt met margins, lege divs of lege borders.Dit lijkt me nu de beste manier:
1e element float: left; zodat het 2e element er naast komt.
Als je het 2e element 10px vanaf het 1e element wilt, én tot aan het einde van het scherm wilt hebben, dan moet je met margin-left dat doen, MAAR, maar die margin-left heeft als nulpunt het eerste element.
Als je wilt dat het 0 punt rechts van het 1e element is, dan moet je float: left; ook bij het 2e element doen, maar in ruil daarvoor loopt je element niet over de hele breedte van je pagina.
[ Bericht 33% gewijzigd door Mirel op 08-01-2012 02:26:44 ]
When all else fails, you always have delusion.
Hoe dan ook, een block element spant vanzelf de gehele breedte, behalve als het inline-block is of als hij float. Kortom: als je het tweede element een block laat en de eerste float zou het goed moeten komen.
Als je het 2e element display block doet, en ook niet float, dan neemt margin-left als 0 punt het 1e element. Net getest
When all else fails, you always have delusion.
Dat doet ook niks. Ik ben benieuwd of het beter kan, maar voorlopig is het dus bij mij margin-left: 430px; ipv 10;. Vanaf element 1 dus
Slapen doei
Ik ben benieuwd of het beter kan, maar voorlopig is het dus bij mij margin-left: 430px; ipv 10;. Vanaf element 1 dus Slapen doei
When all else fails, you always have delusion.
Hmm, ik ben bang dat je gelijk hebt. Zolang je zeker weet dat dat eerste item altijd even breed is is dat geen probleem. Het probleem is als die een variabele breedte heeft, daar zou toch een manier voor moeten zijn. Ik kom er alleen niet op.
Of je geeft natuurlijk het eerste element een border-right van 10px. Dat werkt wel.
http://jsfiddle.net/rBmYa/
http://jsfiddle.net/rBmYa/
Ik heb een background patroon voor de gehele body, kan in dat geval niet. En dan weet ik niet wat ik met border-right nog meer moet doen. Kleurtje geven is uit den boze. http://jsfiddle.net/rBmYa/4/ Hij maakt 'em weer dicht http://jsfiddle.net/rBmYa/9/ ook niet
[ Bericht 34% gewijzigd door Mirel op 08-01-2012 11:39:12 ]
http://jsfiddle.net/rBmYa/9/ ook niet[ Bericht 34% gewijzigd door Mirel op 08-01-2012 11:39:12 ]
When all else fails, you always have delusion.
Dit hele probleem lijkt simpel op te lossen door percentages mee te geven aan de lengte.quote:Op zondag 8 januari 2012 02:36 schreef picodealion het volgende:
Hmm, ik ben bang dat je gelijk hebt. Zolang je zeker weet dat dat eerste item altijd even breed is is dat geen probleem. Het probleem is als die een variabele breedte heeft, daar zou toch een manier voor moeten zijn. Ik kom er alleen niet op.
De vraag blijft altijd waarom je perse deze opbouw wilt hebben en dat de lengte aangepast wordt?
Hoezeer dit cruciaal is. Vaste lengte's geven meestal betere resultaten dan een variabele percentage.
Maarja mijn opbouw zou zijn
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | #left{ float:left; background-color: #000 //black (short code hex 3 ipv 6) width: 5%; //of hoeveel percentage height: 20px; } #right{ float: right; background-color: #000; //black (short code hex 3 ipv 6) margin-left: 10px; width: 95%; height: 20px; } |
2 divs neer te zetten en deze percentages width mee te geven.
Border-right werkt ook niet zonder het een kleur mee te geven en een type soort. Hierover meer op: http://www.w3schools.com/css/css_border.aspquote:
Ik heb een background patroon voor de gehele body, kan in dat geval niet. En dan weet ik niet wat ik met border-right nog meer moet doen. Kleurtje geven is uit den boze. http://jsfiddle.net/rBmYa/4/ Hij maakt 'em weer dicht
Je kan meerdere argumenten combineren bij de border, kortom je wilde een 10px border die eigenlijk niet bestond want er was geen type en kleur meegegeven.
| 1 2 3 4 5 6 7 8 | div { background: silver; } body { background: red; } #left { width: 200px; float: left; border-right: 1px #000 solid; } |
[ Bericht 6% gewijzigd door cablegunmaster op 08-01-2012 20:25:55 ]
Redacted
Is het mogelijk om de getallen van een ordered list te stylen?
Stel ik heb zoiets:
Dan ontstaat daar zo'n soort lijstje uit:
Stel ik heb zoiets:
| 1 2 3 4 5 6 | <ol> <li> iets</li> <li> iets</li> <li> iets</li> <li> iets</li> </ol> |
Dan ontstaat daar zo'n soort lijstje uit:
Nu wil ik de opmaak van die getallen veranderen. Kan dat, of moet ik er dan een unordered list van maken en zelf de getallen toevoegen aan de list items?quote:1. iets
2. iets
3. iets
4. iets
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?
Niet dat het een probleem maar ik heb dus dit: www.mirelmasic.nl Het gedoe bovenaan is net zo lang als de post eronder, en de rest van het menu is dan gescheiden en loopt door tot het einde.quote:
[..]
Dit hele probleem lijkt simpel op te lossen door percentages mee te geven aan de lengte.
De vraag blijft altijd waarom je perse deze opbouw wilt hebben en dat de lengte aangepast wordt?
Hoezeer dit cruciaal is. Vaste lengte's geven meestal betere resultaten dan een variabele percentage.
Maarja mijn opbouw zou zijn
[ code verwijderd ]
Is een mogelijke oplossing. Mogelijke 2e oplossing is float: left geven aan beide Divs
2 divs neer te zetten en deze percentages width mee te geven.
[..]
Border-right werkt ook niet zonder het een kleur mee te geven en een type soort. Hierover meer op: http://www.w3schools.com/css/css_border.asp
Je kan meerdere argumenten combineren bij de border, kortom je wilde een 10px border die eigenlijk niet bestond want er was geen type en kleur meegegeven.
[ code verwijderd ]
When all else fails, you always have delusion.
Ja, dat snap ik. Maar ik bedoel: stel ik wil de getallen die ontstaan door list-style-decimal te gebruiken bijvoorbeeld groter maken, of een andere kleur, zonder verder de inhoud van het list item te stylen.quote:Op dinsdag 10 januari 2012 15:50 schreef Catch22- het volgende:
http://www.handleidinghtm(...)ype/voorbeelden.html
list-style:decimal?
Ik denk niet dat het kan eerlijk gezegd.
Mja, dan moet je bijvoorbeeld die li een font-size geven en de inhoud in een span, die weer een kleinere font-size geven.
De getallen/tekens van de list-style nemen de stijl (kleur/grootte) van je LI over namelijk. Als je in de inhoud in een span zet, kan je die weer apart stylen.
De getallen/tekens van de list-style nemen de stijl (kleur/grootte) van je LI over namelijk. Als je in de inhoud in een span zet, kan je die weer apart stylen.
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?
Jawel hoor, kan prima.quote:
[..]
Ik denk niet dat het kan eerlijk gezegd.
| 1 2 3 4 5 6 7 8 | ol { counter-reset:li; } li:before { content:counter(li); counter-increment:li; } |
Meer info: http://www.456bereastreet(...)rdered_list_numbers/
Uiteraard pas vanaf IE8 ofzo. Maar voor IE7 is normale nummering of een Javascript-fallback natuurlijk zo gemaakt, mocht je dat nog willen supporten.
Bleuh.
http://jsfiddle.net/codefuze/HYjEB/1/
Iemand een idee hoe ik dit in het midden krijg met een width van 320px? Het lukt me niet met een wrapper.
Iemand een idee hoe ik dit in het midden krijg met een width van 320px? Het lukt me niet met een wrapper.
"A goal without a plan is just a wish." - Antoine de Saint-Exupery
Wat moet in het midden? Alles?quote:
http://jsfiddle.net/codefuze/HYjEB/1/
Iemand een idee hoe ik dit in het midden krijg met een width van 320px? Het lukt me niet met een wrapper.
Gewoon een wrapper met
| 1 | width: 320px; margin: 0 auto; |
Dat had ik dus ook gedaan, maar er is iets met de position:fixed van die main div vermoed ik. Krijg jij het aan de praat op jsfiddle?
Edit: Niet meer nodig, heb al een beter script.
[ Bericht 18% gewijzigd door Neraice op 10-01-2012 20:16:45 ]
Edit: Niet meer nodig, heb al een beter script.
[ Bericht 18% gewijzigd door Neraice op 10-01-2012 20:16:45 ]
"A goal without a plan is just a wish." - Antoine de Saint-Exupery
Ja de content moest naar rechts schuiven, dat vind ik het juist het gave.
Maar ik heb inmiddels al een beter script gevonden.
Maar ik heb inmiddels al een beter script gevonden.
"A goal without a plan is just a wish." - Antoine de Saint-Exupery
