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/
Dat doet elke browser in principe. Kan je dus oplossen door in je css:quote:Op dinsdag 21 augustus 2012 13:38 schreef KomtTijd... het volgende:
[..]
Verschilt misschien per browser. Firefox bijv. laat allen een scrollbalk zien als het nodig is, vandaar dat gecentreerde pagina's een paar pixels verspringen als ze langer worden, er verdwijnt rechts 20px beeldruimte dus de gecentreerde pagina moet 10px naar links.
| 1 | html {overflow-y: scroll;} |
te zetten. Dan krijg je altijd een scrollbalk, ook als er niets te scrollen is.
dat dus.
Zou een website sowieso nooit fixed maken qua breedte. Iedereen browsed tegenwoordig anders. niet iedereen heeft vensters full screen staan en mobiele apparaten verschillen nog meer onderling.
“Specialization is for insects”.—Robert Heinlein
Volgens mij doet IE nog steeds altijd alle scrollbalken tonen (of is dat achterhaald?).quote:Op dinsdag 21 augustus 2012 16:16 schreef QM84 het volgende:
[..]
Dat doet elke browser in principe. Kan je dus oplossen door in je css:
[ code verwijderd ]
te zetten. Dan krijg je altijd een scrollbalk, ook als er niets te scrollen is.
op zich is er niet zoveel mis met een fixed-width layout. Een meeschalende layout is mooi maar daar moet je wel goed over nadenken, zomaar width:100% invullen is garantie op een compleet onleesbare website.quote:Op dinsdag 21 augustus 2012 16:20 schreef n8n het volgende:
Zou een website sowieso nooit fixed maken qua breedte. Iedereen browsed tegenwoordig anders. niet iedereen heeft vensters full screen staan en mobiele apparaten verschillen nog meer onderling.
IE7 en hoger iig niet meer.quote:
[..]
Volgens mij doet IE nog steeds altijd alle scrollbalken tonen (of is dat achterhaald?).
dat dus.
daarom moet je een website niet door een amateur laten maken. Sinds wanneer is er iets mis met na moeten denkenquote:
op zich is er niet zoveel mis met een fixed-width layout. Een meeschalende layout is mooi maar daar moet je wel goed over nadenken, zomaar width:100% invullen is garantie op een compleet onleesbare website.
“Specialization is for insects”.—Robert Heinlein
ik heb een nested ul waarvan ik de text graag rechts wil uitlijnen
text-align:right; in het #contentmenu erbij zetten werkt niet...wat doe ik fout?
HTML
CSS
text-align:right; in het #contentmenu erbij zetten werkt niet...wat doe ik fout?
HTML
| 1 2 3 4 5 6 7 8 | <div id="contentmenu"> <ul> <li><a href="index.php?p=ontstaan">ONTSTAAN</a></li> <li><a href="index.php?p=nieuws">NIEUWS</a></li> <li><a href="index.php?p=agenda">AGENDA</a></li> <li><a href="index.php?p=gastenboek">GASTENBOEK</a></li> </ul> </div> |
CSS
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | #contentmenu ul li { padding:0px; list-style-type: none; } #contentmenu { display:block; position: absolute; left:500px; top:300px; } #contentmenu a { border: 0px; line-height:16px; text-decoration: none; color: #000; font-weight:bold; letter-spacing:-0.5px; } |
werkt ook niet directquote:Op zaterdag 25 augustus 2012 11:52 schreef Tijn het volgende:
Ik denk dat je de links eerst als block moet laten weergeven.
nu zit contentmenu in menu...en ik zie in firebug dat contentmenu een float:left mee krijgt, als ik die uitzet dan lijnt ie wel rechts uit
maar nu weet ik eigenlijk niet hoe ik dat nu in css moet vertellen dat ie die float in het contentmenu niet mee krijgt
Op
Klein vraagje:
Als ik bijvoorbeeld deze functie heb:
Is er dan een manier om deze te laten stoppen bij een bepaalde callback?
Als ik bijvoorbeeld deze functie heb:
| 1 2 3 | $('.hover_items').projectHover({ color: '#222222' }); |
Is er dan een manier om deze te laten stoppen bij een bepaalde callback?
"A goal without a plan is just a wish." - Antoine de Saint-Exupery
Eens kijken of ik mijn vraag helder kan stellen...
Op deze site heeft het menu (bovenste gedeelte) bepaalde eigenschappen in de CSS-file staan. Ik heb ontdekt dat dat navr heet (als ik het goed heb), maar ik zie ook nav1, nav-left, nav-right enz staan.
Nu heb ik een submenu eronder gezet, maar deze heeft nog niet de eigenschappen van het zojuist genoemde menu.
Hoe kan ik het submenu dezelfde eigenschappen (zoals achtergrond) geven als het menu er vlak boven zodat ik daarna kan stoeien hoe ik die code kan aanpassen zodat het onderste menu (dat ik submenu noem) qua kleuren mooi bijpassend kan maken?
Hoe kan ik het submenu iets naar rechts op laten schuiven zodat het pas onder Home begint?
Mijn dank is groot voor iedereen die even meedenkt! Mocht je een suggestie hebben hoe het mooier kan, is dat natuurlijk ook goed!
[ Bericht 4% gewijzigd door -J-D- op 26-08-2012 19:58:28 ]
Op deze site heeft het menu (bovenste gedeelte) bepaalde eigenschappen in de CSS-file staan. Ik heb ontdekt dat dat navr heet (als ik het goed heb), maar ik zie ook nav1, nav-left, nav-right enz staan.
Nu heb ik een submenu eronder gezet, maar deze heeft nog niet de eigenschappen van het zojuist genoemde menu.
Hoe kan ik het submenu dezelfde eigenschappen (zoals achtergrond) geven als het menu er vlak boven zodat ik daarna kan stoeien hoe ik die code kan aanpassen zodat het onderste menu (dat ik submenu noem) qua kleuren mooi bijpassend kan maken?
Hoe kan ik het submenu iets naar rechts op laten schuiven zodat het pas onder Home begint?
Mijn dank is groot voor iedereen die even meedenkt! Mocht je een suggestie hebben hoe het mooier kan, is dat natuurlijk ook goed!
[ Bericht 4% gewijzigd door -J-D- op 26-08-2012 19:58:28 ]
I asked God for a bike, but I know God doesn't work that way.
So I stole a bike and asked for forgiveness.
So I stole a bike and asked for forgiveness.
Nieuwe versie van Twitter Bootstrap is best netjes. Wat vinden jullie?
@Neraice
Wat is dat voor functie projectHover?
@-J-D-
Je kan meerdere elementen dezelfde eigenschappen geven door een aparte class te maken met daarin de eigenschappen en de elementen dan die class geven.
Met margin of padding kan je elementen verschuiven.
@Neraice
Wat is dat voor functie projectHover?
@-J-D-
Je kan meerdere elementen dezelfde eigenschappen geven door een aparte class te maken met daarin de eigenschappen en de elementen dan die class geven.
Met margin of padding kan je elementen verschuiven.
Wat kun je met dat programma? Ben nog een totale leek op het gebied van webdevelopment. Heb alleen nog Notepad++ gebruikt voor HTML en CSS.
Bootstrap is een CSS framework. Heb het ook nooit gebruikt maar je schijnt er wel makkelijk schaalbare layouts mee te kunnen maken.
Pfff, ik ben echt een beginner. Dat gaat me een berg tijd kosten, want ik weet nog niet precies waar ik moet beginnen.quote:
@-J-D-
Je kan meerdere elementen dezelfde eigenschappen geven door een aparte class te maken met daarin de eigenschappen en de elementen dan die class geven.
Met margin of padding kan je elementen verschuiven.
Bedankt voor de tips iig.
I asked God for a bike, but I know God doesn't work that way.
So I stole a bike and asked for forgiveness.
So I stole a bike and asked for forgiveness.
ik moet echt kotsen van zulke sites. Ik browse wel eens op 1920 pixels breedte en als je dan een textblock van 1400pixels voor je krijgt dan ben ik weg, want dat is onleesbaar.quote:
[..]
Volgens mij doet IE nog steeds altijd alle scrollbalken tonen (of is dat achterhaald?).
[..]
op zich is er niet zoveel mis met een fixed-width layout. Een meeschalende layout is mooi maar daar moet je wel goed over nadenken, zomaar width:100% invullen is garantie op een compleet onleesbare website.
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?
Daarvoor kan je je browservenster kleiner maken...
Vanuit usability-oogpunt is dat juist de meest optimale situatie: geef de gebruiker de controle over hoeveel tekst deze op 1 regel wilt hebben.
Vanuit usability-oogpunt is dat juist de meest optimale situatie: geef de gebruiker de controle over hoeveel tekst deze op 1 regel wilt hebben.
dat dus.
Vanuit usability-oogpunt verwachten dat de gebruiker voor iedere website zijn browservenster gaat verschalen... 
valt onder 'User control and freedom'.
Daarnaast: als iedere website 100% is en zich aan de richtlijnen voor fontgroottes houdt, hoef je je browservenster echt niet voor íedere website te schalen, maar slechts 1x. Op een grootte die de gebruiker het beste vindt.
Daarnaast: als iedere website 100% is en zich aan de richtlijnen voor fontgroottes houdt, hoef je je browservenster echt niet voor íedere website te schalen, maar slechts 1x. Op een grootte die de gebruiker het beste vindt.
dat dus.
...en dan stel je ook gelijk een verplichte menubreedte e.d. voor? En mogen we wel of geen sidebar aan de rechterkant?
Er is letterlijk niemand die het prettig vindt om tekstregels van 1500px te lezen. Dat je als gebruiker enige invloed hebt op hoe de content wordt weergegeven is natuurlijk mooi, maar je moet geen situatie kunnen creëren die alleen maar hinderlijk is.quote:
Daarvoor kan je je browservenster kleiner maken...
Vanuit usability-oogpunt is dat juist de meest optimale situatie: geef de gebruiker de controle over hoeveel tekst deze op 1 regel wilt hebben.
Denk hierbij ook aan mensen die de font-instellingen van hun OS groter hebben ingesteld, waardoor de tekst bij een 1000px-website standaard buiten de containers zou gaan lopen, of de hele lay-out verneukt. Of mensen (zoals ik), die standaard inzoomen op een website, omdat 99% van de websites een te klein font heeft. Of mensen die het gewoon prettig vinden om veel tekst naast elkaar te hebben.
Je geeft mensen de vrijheid om de website zo te lezen hoe ze het zelf het liefst willen.
Je geeft mensen de vrijheid om de website zo te lezen hoe ze het zelf het liefst willen.
dat dus.
Scriptje voor een speciaal hover-effect.quote:
Nieuwe versie van Twitter Bootstrap is best netjes. Wat vinden jullie?
@Neraice
Wat is dat voor functie projectHover?
@-J-D-
Je kan meerdere elementen dezelfde eigenschappen geven door een aparte class te maken met daarin de eigenschappen en de elementen dan die class geven.
Met margin of padding kan je elementen verschuiven.
Het gaat mij erom hoe ik zo'n jQuery plugin cancel na 'm gecalled te hebben. Enig idee?
"A goal without a plan is just a wish." - Antoine de Saint-Exupery
