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/
Ik ben weer eens aan de knutsel met mijn weblog en vroeg me het volgende af:
De weblog bestaat uit een post gedeelte en een sidebar. Persoonlijk vind ik het niet mooi als de een langer of korter is dan de ander, maar aangezien posts altijd afwisselende lengte hebben is het niet echt mogelijk om een sidebar te maken die altijd lang genoeg is.
Nu vroeg ik me af of er middels html/css of met een tabel een manier is om te zorgen dat de overgebleven ruimte op wordt gevuld met plaatjes en of andere inhoud, maar op zo'n manier dat deze precies ophoudt waar de posts op houden.
Ik heb al zitten Googlen en zelf zitten denken hoe dit mogelijk zou zijn, maar kom helaas niet tot een antwoord, ookal heb ik het gevoel wellicht iets heel voordehandliggends over het hoofd te zien..
Heeft iemand een idee in wat voor een richting ik moet denken om iets dergelijks te maken?
De weblog bestaat uit een post gedeelte en een sidebar. Persoonlijk vind ik het niet mooi als de een langer of korter is dan de ander, maar aangezien posts altijd afwisselende lengte hebben is het niet echt mogelijk om een sidebar te maken die altijd lang genoeg is.
Nu vroeg ik me af of er middels html/css of met een tabel een manier is om te zorgen dat de overgebleven ruimte op wordt gevuld met plaatjes en of andere inhoud, maar op zo'n manier dat deze precies ophoudt waar de posts op houden.
Ik heb al zitten Googlen en zelf zitten denken hoe dit mogelijk zou zijn, maar kom helaas niet tot een antwoord, ookal heb ik het gevoel wellicht iets heel voordehandliggends over het hoofd te zien..
Heeft iemand een idee in wat voor een richting ik moet denken om iets dergelijks te maken?
Wellicht de post een min-height geven die net zo hoog is als de height van de sidebar?
When all else fails, you always have delusion.
Uhm, ja maar er verschijnen 10 posts per pagina, dus ik vermoed dat wat lengte betreft aan het post gedeelte niet veel te doen is!
eerste hit via google:quote:Op zaterdag 26 mei 2012 21:03 schreef Maartel het volgende:
Uhm, ja maar er verschijnen 10 posts per pagina, dus ik vermoed dat wat lengte betreft aan het post gedeelte niet veel te doen is!
http://www.ejeliot.com/blog/61
It was an opportunity to honour our memories and to make room for new ones
Bedankt! Weer een gevalletje van op totaal verkeerde formuleringen Googlen dus 
(al krijg ik de indruk dat dit met name om een achtergrondkleur/afbeelding gaat en dat heb ik al wel)
(al krijg ik de indruk dat dit met name om een achtergrondkleur/afbeelding gaat en dat heb ik al wel)
ik ben aan het pielen met een tab slide,
op internet een plugin gevonden
http://www.building58.com/examples/tabSlideOut.html
maar dit doet net niet wat ik wil...
maar ik kom er niet uit...
ik wil graag de tab gebruiken EN een andere div om dezelfde tab te openen...
krijg het dus niet voor elkaar
op internet een plugin gevonden
http://www.building58.com/examples/tabSlideOut.html
maar dit doet net niet wat ik wil...
maar ik kom er niet uit...
ik wil graag de tab gebruiken EN een andere div om dezelfde tab te openen...
krijg het dus niet voor elkaar
Wat werkt niet, wat heb je zelf geprobeerd, waar is je code voorbeeld en waar denk je dat het aan kan liggen.
sorryquote:Op maandag 28 mei 2012 10:22 schreef Scorpie het volgende:
Wat werkt niet, wat heb je zelf geprobeerd, waar is je code voorbeeld en waar denk je dat het aan kan liggen.
ik gebruik de plugin als in de webpagina...werkt prima
maar nu wil ik ook aan een andere div toewijzen dat de tab open gaat
| 1 2 3 4 5 6 | $('.slide-out-div').tabSlideOut({ tabHandle: '.handle', //class of the element that will be your tab -doesnt have to be an anchor pathToTabImage: 'images/contact_tab.gif', //relative path to the image for the tab imageHeight: '133px', //height of tab image imageWidth: '44px', //width of tab image }); |
dit is de code die in de html moet om de plugin te laten werken
heel simpel gedacht dacht ik, als ik de "handle" als class bij een andere div zet dat deze dan de tab zou aansturen...hmm..niet dus..of iig ik doe het fout
waarschijnlijk zal de plugin zo inelkaar zitten dat het niet kan
De plugin hecht zichzelf aan een element, dus dat werkt idd niet. Zal straks die plugin eens doorspitten.
ik was de bloglijst aan het doorspitten..quote:
De plugin hecht zichzelf aan een element, dus dat werkt idd niet. Zal straks die plugin eens doorspitten.
kwam daar iets tegen van
| 1 2 3 4 5 | $(”.handle”).click(); Actually, since I’m extending this class, I did this: obj.find(”.handle”).click(); |
maar hoe ik dat dan zou moeten inpassen
Zodra je clicked op de andere div vuur je een event af die de klik op de andere div nabootst.quote:
[..]
ik was de bloglijst aan het doorspitten..
kwam daar iets tegen van
[ code verwijderd ]
maar hoe ik dat dan zou moeten inpassen
Dus:
| 1 2 3 | $('divClassOfId').on('click', function() { $('.slide-out-div').click(); }); |
[ Bericht 0% gewijzigd door #ANONIEM op 28-05-2012 10:53:36 ]
klinkt goed...lees ook iets vergelijkbaars in de blogquote:
[..]
Zodra je clicked op de andere div vuur je een event af die de klik op de andere div nabootst.
Dus:
[ code verwijderd ]
maar het zal wel aan de warmte liggen...t werkt nie
divje gemaakt
<div class="slidediv"></div>
is een widht en height gegeven..is dus een zichtbaar vierkantje
onder het instelscript
dit gezet
| 1 2 3 | <script> $(’.slidediv’).click(function(){$(’.handle’).click();}); </script> |
.slide-out-div vervangen door handle
tab doet niets als ik op de div klik
werkt nog wel op de gewone manier
[ Bericht 33% gewijzigd door MrNiles op 28-05-2012 12:01:49 ]
Is er met html/css een methode om een soort van verticale marquée te doen, maar dan eentje die niet continu scrollt, maar om de paar seconden eventjes een regel verder schuift? Of moet ik me dan toch echt meer in javascript ed verdiepen?
Met CSS transitions moet zoiets wel te doen zijn. Of je dat wilt doen is natuurlijk een tweede. Voor mijn gevoel is zo'n marquee eerder gedrag en zou het w.m.b. opgelost moeten worden in Javascript.
Nee.
Dat klopt, faux columns werkt door een achtergrond plaatje in de omvattende container te zetten en die verticaal te herhalen zodat de illusie ontstaat dat de kortste van de kolommen net zo lang is.quote:
Bedankt! Weer een gevalletje van op totaal verkeerde formuleringen Googlen dus
(al krijg ik de indruk dat dit met name om een achtergrondkleur/afbeelding gaat en dat heb ik al wel)
Je kunt het ook doen door de omvattende container "display: table" mee te geven in de css en de sidebar en post gedeelte "display:table-cell;"
Mijn eerder genoemde probleem is opgelost mede door de hulp van MrNiles.
Ik moest deze regel toevoegen bij de head.phtml
Ik moest deze regel toevoegen bij de head.phtml
| 1 | Cufon.replace('.stone-help .title', { fontFamily: 'AlternateGothic2 BT' }); |
If not now, then when.
-fixed-quote:
Is .handle de naam van de div waar de plugin mee is geinitaliseerd?
[ Bericht 85% gewijzigd door MrNiles op 29-05-2012 13:39:34 ]
ik heb een horizontaal menu opgemaakt als tabbladen, maar meer tabbladen dan horizontale ruimte, waardoor de tabbladen 2 regels innemen. De tabs op de bovenste regel zijn daardoor niet echt tabs meer:
Weten jullie een (makkelijke) manier om dat elegant op te lossen?
Weten jullie een (makkelijke) manier om dat elegant op te lossen?
Een rij van tabs boven en een rij van tabs beneden, als je op een rij klikt, schuift die naar voren?
Netzoals windows doet of deed bij optievensters met teveel tabbladen.
Bij options:
Netzoals windows doet of deed bij optievensters met teveel tabbladen.
Bij options:
When all else fails, you always have delusion.
anders grouperen, als je zoveel tabs hebt dan doe je iets niet goedquote:
ik heb een horizontaal menu opgemaakt als tabbladen, maar meer tabbladen dan horizontale ruimte, waardoor de tabbladen 2 regels innemen. De tabs op de bovenste regel zijn daardoor niet echt tabs meer:
[ link | afbeelding ]
Weten jullie een (makkelijke) manier om dat elegant op te lossen?
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?
Mee eens hoor, maar dat neemt het probleem niet weg. Als het er 5 zouden zijn kunnen ze bij elkaar nog steeds breder zijn dan iemands beeldscherm.quote:Op donderdag 31 mei 2012 15:28 schreef Catch22- het volgende:
[..]
anders grouperen, als je zoveel tabs hebt dan doe je iets niet goed
...Dat kan, maar dan gaat het nog een halve dag uitzoekwerk worden... hoopte eigenlijk op een easy fix...quote:
Een rij van tabs boven en een rij van tabs beneden, als je op een rij klikt, schuift die naar voren?
Netzoals windows doet of deed bij optievensters met teveel tabbladen.
Bij options:
[ afbeelding ]
Misschien klus ik wel wat firefox-achtigs dat je met pijltjes naar links en rechts kunt schuiven...
