[html, css, js] Frontend is het nieuwe backend

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
  zaterdag 27 april 2013 @ 12:06:30 #1
56176 Catch22-
Ben je Blind?!
pi_125791755
[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 (code.png), 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/
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?
  zaterdag 27 april 2013 @ 12:27:17 #2
50623 Matty___
Konichiwa Bitches
pi_125792190
Deze site is wel een goede tip:
http://alistapart.com/ :)
Deze muziek smaakt naar bier :)
Es bedarf keiner Psychoanalyse, um festzustellen, dass das Leben ein einziger Friedhof gescheiterter Pläne ist!
  zaterdag 27 april 2013 @ 12:58:30 #3
56176 Catch22-
Ben je Blind?!
pi_125792960
Staat al in de op he :)
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?
  zaterdag 27 april 2013 @ 13:41:08 #4
27454 InTrePidIvity
Looks like it's broken...
pi_125793904
quote:
14s.gif Op zaterdag 27 april 2013 12:02 schreef InTrePidIvity het volgende:

[..]

Dankjewel! Ik snap wat je bedoelt en heb het op zich wel werkend weten te krijgen, maar ik vraag me af of dit de 'mooiste' manier is. Ik ben het mezelf allemaal aan het aanleren en probeer het semantisch meteen goed onder de knie te krijgen. En zo efficiënt mogelijk natuurlijk, zou je er naar willen kijken?

http://intel.comli.com/index.html

De blokjes zijn CSS, maar kan ik de span elementen daar makkelijk naast krijgen, i.p.v. dat ze zoals nu in het blok zelf beginnen? Kan uiteraard met margin, maar kan het ook anders?
...it's rielie broken... It's rielie, rielie broken... Let's go wecycle!
[Tournament] Beste Remake
  zaterdag 27 april 2013 @ 13:48:48 #5
50623 Matty___
Konichiwa Bitches
pi_125794083
quote:
0s.gif Op zaterdag 27 april 2013 12:58 schreef Catch22- het volgende:
Staat al in de op he :)
ja dat bedoel ik. dat de site die je noemde wel een goede tip was want ik kende hem nog niet
Deze muziek smaakt naar bier :)
Es bedarf keiner Psychoanalyse, um festzustellen, dass das Leben ein einziger Friedhof gescheiterter Pläne ist!
pi_125794659
Ik wil een vertikaal scrollende website maken zoals in het voorbeeld hieronder:


Op de Welkompagina staat het menu statisch weergegeven zodat de bezoeker snel het deel kan bezoeken wat hij wil.
Zodra het beeld naar beneden scrollt en voorbij de rode lijn raakt is het de bedoeling dat linksboven een menu tevoorschijn komt (bijv. het beeld inglijden of via transparency).
Verder moet dat menu reageren op mousovers en laten zien op welke pagina de bezoeker zich bevindt.
Dat laatste wil ik doen dmv van underline. Maar de lijn van underline moet glijden ipv van menu-woord naar men-woord springen.
Ik heb al begrepen dat die glijdende underline javascript werk gaat worden. Over de rest van het menu heb ik nog niks zinvols kunnen vinden, hopelijk dat jullie hier meer over kunnen vertellen.
  zaterdag 27 april 2013 @ 14:22:33 #7
166255 Maringo
Bèhèhèhèh
pi_125794806
quote:
5s.gif Op zaterdag 27 april 2013 14:15 schreef karton2 het volgende:
Ik wil een vertikaal scrollende website maken zoals in het voorbeeld hieronder:
[ afbeelding ]

Op de Welkompagina staat het menu statisch weergegeven zodat de bezoeker snel het deel kan bezoeken wat hij wil.
Zodra het beeld naar beneden scrollt en voorbij de rode lijn raakt is het de bedoeling dat linksboven een menu tevoorschijn komt (bijv. het beeld inglijden of via transparency).
Verder moet dat menu reageren op mousovers en laten zien op welke pagina de bezoeker zich bevindt.
Dat laatste wil ik doen dmv van underline. Maar de lijn van underline moet glijden ipv van menu-woord naar men-woord springen.
Ik heb al begrepen dat die glijdende underline javascript werk gaat worden. Over de rest van het menu heb ik nog niks zinvols kunnen vinden, hopelijk dat jullie hier meer over kunnen vertellen.
Het glijden van de underline heb ik van de week toevallig als open source ding gevonden:

http://cssdeck.com/labs/wwahaw2y

Maar verder, wat heb je zelf al geprobeerd of opgezocht?
Die volg topic-knop hè...
Op 02-06-2014 16:38 schreef Moeraskat
Je bent te goed voor de mensheid.
pi_125795262
quote:
2s.gif Op zaterdag 27 april 2013 14:22 schreef Maringo het volgende:

[..]

Het glijden van de underline heb ik van de week toevallig als open source ding gevonden:

http://cssdeck.com/labs/wwahaw2y

Maar verder, wat heb je zelf al geprobeerd of opgezocht?
De site zelf van pagina naar pagina laten glijden werkt al. De underline kwam ik alleen tegen met JS code erin verwerkt (hier). Jouw voorbeeld gebruikt alleen CSS maar is op de lavalamp plugin gebaseerd die ik heb gevonden.
Het menu ineens tevoorschijn laten komen zodra de site voorbij een bepaald punt scrollt heb ik nog niks over kunnen vinden.
  zaterdag 27 april 2013 @ 15:24:03 #9
166255 Maringo
Bèhèhèhèh
pi_125796139
quote:
0s.gif Op zaterdag 27 april 2013 14:46 schreef karton2 het volgende:

[..]

De site zelf van pagina naar pagina laten glijden werkt al. De underline kwam ik alleen tegen met JS code erin verwerkt (hier). Jouw voorbeeld gebruikt alleen CSS maar is op de lavalamp plugin gebaseerd die ik heb gevonden.
Het menu ineens tevoorschijn laten komen zodra de site voorbij een bepaald punt scrollt heb ik nog niks over kunnen vinden.
Mijn eerste hit van google:

http://stackoverflow.com/(...)crolling-1000px-down

Met als gekozen antwoord een fiddle met wat je wilt.
Die volg topic-knop hè...
Op 02-06-2014 16:38 schreef Moeraskat
Je bent te goed voor de mensheid.
pi_125842618
Wat een hoop witregels in de code van FOK!.
  maandag 29 april 2013 @ 15:06:52 #11
56176 Catch22-
Ben je Blind?!
pi_125866242
quote:
11s.gif Op zondag 28 april 2013 21:33 schreef robin007bond het volgende:
Wat een hoop witregels in de code van FOK!.
boeit niet veel. JS en CSS is wel minimized
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?
pi_125866292
quote:
11s.gif Op maandag 29 april 2013 15:06 schreef Catch22- het volgende:

[..]

boeit niet veel. JS en CSS is wel minimized
Boeit juist voor de HTML het meest. CSS en JS gaat toch maar één keer over de lijn.
zcflevo.nl
  maandag 29 april 2013 @ 18:02:25 #13
123869 Merkie
Surprisingly contagious
pi_125872492
quote:
11s.gif Op zondag 28 april 2013 21:33 schreef robin007bond het volgende:
Wat een hoop witregels in de code van FOK!.
Maakt dat uit?
2000 light years from home
pi_125873373
quote:
14s.gif Op maandag 29 april 2013 15:08 schreef KomtTijd... het volgende:

[..]

Boeit juist voor de HTML het meest. CSS en JS gaat toch maar één keer over de lijn.
Ach, anno 2013 is de impact beperkt.
pi_125873885
En toch blijf ik het "bad practice" vinden om de opmaak van je code niet even netjes te maken. Maar verder boeit het inderdaad ook niet.
pi_125882527
quote:
7s.gif Op maandag 29 april 2013 18:46 schreef Devv het volgende:
En toch blijf ik het "bad practice" vinden om de opmaak van je code niet even netjes te maken. Maar verder boeit het inderdaad ook niet.
De opmaak van code moet netjes zijn. Maar de opmaak van gegenereerde html vind ik een stuk minder spannend. Ik zou persoonlijk niet geneigd zijn om extra code te schrijven met als enige doel zorgen dat de gegenereerde html netter is.
fokstok.nl
  maandag 29 april 2013 @ 22:06:14 #17
12221 Tijn
Powered by MS Paint
pi_125882705
quote:
0s.gif Op maandag 29 april 2013 22:01 schreef Light het volgende:

[..]

De opmaak van code moet netjes zijn. Maar de opmaak van gegenereerde html vind ik een stuk minder spannend. Ik zou persoonlijk niet geneigd zijn om extra code te schrijven met als enige doel zorgen dat de gegenereerde html netter is.
Inderdaad. Zolang de sourcecode waar je dagelijks mee moet werken maar fatsoenlijk is. Wat je uiteindelijk naar de client stuurt moet vooral klein en snel zijn, leesbaarheid van de code is daarbij nauwelijks relevant.
Verberg de nieuwsticker
pi_125934922
quote:
1s.gif Op maandag 29 april 2013 18:28 schreef Scorpie het volgende:

[..]

Ach, anno 2013 is de impact beperkt.
Er zit ruim 8KB aan onnodige whitespace in de source van deze pagina. 5,5% van het totaal (144,7KB). Dat vind ik toch aardig substantieel.

En dan reken ik de html-comments nog niet mee.
zcflevo.nl
pi_125935018
quote:
14s.gif Op woensdag 1 mei 2013 10:33 schreef KomtTijd... het volgende:

[..]

Er zit ruim 8KB aan onnodige whitespace in de source van deze pagina. 5,5% van het totaal (144,7KB). Dat vind ik toch aardig substantieel.

En dan reken ik de html-comments nog niet mee.
Ik vind dat eigenlijk pas relevant op een mobiel apparaat.
  woensdag 1 mei 2013 @ 10:37:59 #20
56176 Catch22-
Ben je Blind?!
pi_125935023
als het geGZIPt is, valt die impact wel mee toch?

En het meeste komt uit de cache hier (350 wv 230 uit de cache).
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?
pi_125935672
quote:
7s.gif Op woensdag 1 mei 2013 10:37 schreef Scorpie het volgende:

[..]

Ik vind dat eigenlijk pas relevant op een mobiel apparaat.
Ja mij maakt het ook niet uit, maar ik hoef ook het dataverkeer van FOK! niet te managen.
zcflevo.nl
  donderdag 2 mei 2013 @ 08:44:17 #22
12221 Tijn
Powered by MS Paint
pi_125969610


Hoe zouden jullie dit aanpakken? Het gaat om het driehoekje bij het geselecteerde menu-item. Het moeilijke punt is het rode vlak eronder een plaatje is en per pagina kan verschillen. Het is dus niet altijd een rood puntje en zelfs niet altijd een puntje met 1 kleur. Eigenlijk is het een stukje transparantie waar je het vlak dat eronder staat doorheen ziet.

Ik heb wel eerder van dit soort dingen gemaakt, maar dan gebruikte ik altijd een achtergrondplaatje bij het geselecteerde menu-item met daarin een driehoekje. Dat gaat nu niet omdat het driehoekje er dus niet altijd hetzelfde uitziet. En een transparant plaatje gaat ook niet, want dan zie je gewoon het donkergrijs van de balk erdoorheen :')

De HTML structuur ziet er ongeveer zo uit:

1
2
3
4
5
6
7
8
9
10
11
12
13
14		<header>
   <a href=""><img src="logo.png"></a>
   <nav>
      <ul>
         <li><a href="/">home</a></li>
         <li><a href="/about">about</a></li>
         <li><a href="/cases">cases</a></li>
         <li><a href="/blog">blog</a></li>
      </ul>
   </nav>
   <div>
       <!-- hier staat het rode gebeuren -->
   </div>
</header>

Heeft iemand een slim idee om dit op te lossen?
Verberg de nieuwsticker
  donderdag 2 mei 2013 @ 09:02:14 #23
91039 mstx
2x1/2 = 1/2 x 1/2
pi_125969861
Zwarte achtergrond in de <a> die je bij de hover vervangt door een PNG waar dat driehoekje transparant is.
Moet je wel zorgen dat daar achter niet nog een zwarte achtergrond zit van de container.
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.
👾
pi_125969886
background-color of image op de Li's zetten ipv de ul? en een andere truc verzinnen om de balk door te laten lopen over de hele breedte
zcflevo.nl
  donderdag 2 mei 2013 @ 09:05:57 #25
12221 Tijn
Powered by MS Paint
pi_125969934
quote:
0s.gif Op donderdag 2 mei 2013 09:02 schreef mstx het volgende:
Zwarte achtergrond in de <ul> of <a> die je bij de hover vervangt door een PNG waar dat driehoekje transparant is.
Moet je wel zorgen dat daar achter niet nog een zwarte achtergrond zit van de container.
quote:
1s.gif Op donderdag 2 mei 2013 09:03 schreef KomtTijd... het volgende:
background-color of image op de Li's zetten ipv de ul? en een andere truc verzinnen om de balk door te laten lopen over de hele breedte
Maar hoe zorg ik dan dat de rest van de balk ook donker wordt zonder dat-ie achter het menu zit?

Ik zou het zonde vinden om extra elementen te maken alleen maar om alles links en rechts van het menu een kleur te geven :{
Verberg de nieuwsticker
  donderdag 2 mei 2013 @ 09:08:02 #26
12221 Tijn
Powered by MS Paint
pi_125969971
Misschien als ik de <ul> een hele dikke border-left en border-right geef en daarmee de donkere balk maak, zou dat wat zijn? Wel tricky om de achtergrond png van de <li> dan te laten matchen met de border-kleur...
Verberg de nieuwsticker
  donderdag 2 mei 2013 @ 09:08:41 #27
56176 Catch22-
Ben je Blind?!
pi_125969987
Ik zou heel nasty verschillende achtergrondplaatjes gebruiken voor de verschillende items
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?
  donderdag 2 mei 2013 @ 09:12:11 #28
12221 Tijn
Powered by MS Paint
pi_125970048
quote:
0s.gif Op donderdag 2 mei 2013 09:08 schreef Catch22- het volgende:
Ik zou heel nasty verschillende achtergrondplaatjes gebruiken voor de verschillende items
Het lastige is dat de site en het menu geen vaste breedte hebben (responsive enzo), dus het is best moeilijk om plaatjes te maken die altijd werken.

Ik kan ook 1 plaatje maken met een heel brede donkere balk en een driehoekje eruit en de positie hiervan verschuiven op basis van het geselecteerde item. Ik denk alleen dan dat ik de positie met JS moet bepalen en ik zou het mooier vinden als het met CSS zou kunnen. Het voordeel van deze optie is wel dat het mogelijk wordt om het driehoekje te laten bewegen naar een andere plek wanneer een ander item wordt gekozen, dat is misschien wel een tof effect.
Verberg de nieuwsticker
  donderdag 2 mei 2013 @ 10:59:36 #29
390538 Dimauro
Vuurbezweerder
pi_125973029
quote:
2s.gif Op donderdag 2 mei 2013 09:12 schreef Tijn het volgende:

[..]

Het lastige is dat de site en het menu geen vaste breedte hebben (responsive enzo), dus het is best moeilijk om plaatjes te maken die altijd werken.

Ik kan ook 1 plaatje maken met een heel brede donkere balk en een driehoekje eruit en de positie hiervan verschuiven op basis van het geselecteerde item. Ik denk alleen dan dat ik de positie met JS moet bepalen en ik zou het mooier vinden als het met CSS zou kunnen. Het voordeel van deze optie is wel dat het mogelijk wordt om het driehoekje te laten bewegen naar een andere plek wanneer een ander item wordt gekozen, dat is misschien wel een tof effect.
Maar wil je dat driehoekje mee laten glijden over de hele menubalk of alleen als je hovert ?
I'm not the girl in the picture..
  donderdag 2 mei 2013 @ 11:03:53 #30
12221 Tijn
Powered by MS Paint
pi_125973177
quote:
0s.gif Op donderdag 2 mei 2013 10:59 schreef Dimauro het volgende:

[..]

Maar wil je dat driehoekje mee laten glijden over de hele menubalk of alleen als je hovert ?
Dat glijden is niet per se nodig, ik bedacht me gewoon dat dat kan als het 1 groot plaatje is waarvan ik de positie verander.

Als ik het zo doe, doe ik het alleen na click denk ik en niet al bij hover. Sowieso wil ik zo min mogelijk met hover doen vanwege tablets enzo.
Verberg de nieuwsticker
  donderdag 2 mei 2013 @ 11:23:16 #31
166255 Maringo
Bèhèhèhèh
pi_125973799
Of dit:

1
2
3
4
5
6
7
8		    <nav id="menu">
        <ul>
            <li id="first"><a href="/">home</a></li>
            <li><a href="/about">about</a></li>
            <li><a href="/cases">cases</a></li>
            <li id="last"><a href="/blog">blog</a></li>
        </ul>
    </nav>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42		        #menu {
            text-align: center;
            width: 100%;
        }
        
        ul {
            list-style: none;
            display: inline-block;
            margin: 0;
            padding: 0;
        }
        
        li {
            background-color: rgba(244,134,78,0.5);
            width: 50px;
            height: 50px;
            float: left;
            margin: 0;
            padding: 0;
        }
        
        #first:before{
            content: '';
            width: 100%;
            height: 50px;
            background-color: rgba(255,0,255,0.5);
            position: absolute;
            z-index: -1;
            right: 50%;
            margin-right: 100px;
        }

        #last:after{
            content: '';
            width: 50%;
            height: 50px;
            background-color: rgba(0,0,255,0.5);
            position: absolute;
            z-index: -1;
            left: 50%;
            margin-left: 100px;
        }

En als je menu dynamisch is, dan met Less een berekening over de margin-left en margin-right gooien met het ((breedte li * aantal elementen) / 2)


In JSFiddle werkte die niet, maar op een volledige pagina wel.
Die volg topic-knop hè...
Op 02-06-2014 16:38 schreef Moeraskat
Je bent te goed voor de mensheid.
  donderdag 2 mei 2013 @ 11:31:12 #32
12221 Tijn
Powered by MS Paint
pi_125974043
Ik zit nu in de trein, maar zal zo even kijken wanneer ik weer achter mn computer zit. Bedankt in elk geval voor het meedenken :) Het menu is niet dynamisch trouwens, het zijn altijd deze 4 links.
Verberg de nieuwsticker
  donderdag 2 mei 2013 @ 12:33:53 #33
27454 InTrePidIvity
Looks like it's broken...
pi_125976203
De derde optie in m'n navigatie loopt over twee regels, waarvan de tweede regel is opgemaakt d.m.v. <em> tags. Het is echter de bedoeling dat de eerste regel op gelijke hoogte met de andere twee links loopt, hoe krijg ik dat voor elkaar?

http://jsfiddle.net/Mq5d9/2/
...it's rielie broken... It's rielie, rielie broken... Let's go wecycle!
[Tournament] Beste Remake
  donderdag 2 mei 2013 @ 12:40:50 #34
12221 Tijn
Powered by MS Paint
pi_125976444
Is het een optie om aan de andere li's ook een (lege) <em> toe te voegen? Dan staan ze automatisch op dezelfde hoogte.
Verberg de nieuwsticker
  donderdag 2 mei 2013 @ 13:34:45 #35
27454 InTrePidIvity
Looks like it's broken...
pi_125978310
quote:
5s.gif Op donderdag 2 mei 2013 12:40 schreef Tijn het volgende:
Is het een optie om aan de andere li's ook een (lege) <em> toe te voegen? Dan staan ze automatisch op dezelfde hoogte.
Hm, dat zou misschien wel werken, maar is er geen mooiere manier om het voor elkaar te krijgen?
...it's rielie broken... It's rielie, rielie broken... Let's go wecycle!
[Tournament] Beste Remake
  donderdag 2 mei 2013 @ 13:40:20 #36
12221 Tijn
Powered by MS Paint
pi_125978492
Je zou de li's relatief kunnen positioneren en de <em> absoluut, dan verstoort-ie de flow niet en blijft alles op dezelfde plek staan. Is dat wat?

http://jsfiddle.net/Mq5d9/14/
Verberg de nieuwsticker
pi_125978509
http://jsfiddle.net/Mq5d9/15/

Wat vind je van deze? Vertical-align: top op de linkjes, en een negative bottom margin op de <em> om het streepje eronder weer terug omhoog te trekken.
  donderdag 2 mei 2013 @ 13:42:55 #38
91039 mstx
2x1/2 = 1/2 x 1/2
pi_125978585
http://jsfiddle.net/Mq5d9/18/
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.
👾
  donderdag 2 mei 2013 @ 15:48:12 #39
27454 InTrePidIvity
Looks like it's broken...
pi_125982985
quote:
0s.gif Op donderdag 2 mei 2013 13:42 schreef mstx het volgende:
http://jsfiddle.net/Mq5d9/18/
Zo simpel kan het zijn :) Dankjewel! En de anderen uiteraard ook voor de input ^O^
...it's rielie broken... It's rielie, rielie broken... Let's go wecycle!
[Tournament] Beste Remake
  zaterdag 4 mei 2013 @ 15:04:08 #40
237554 Holograph
Compay Segundo
pi_126057116
Ik probeer deze CSS-code
1
2
3		    <style type="text/css">
        body, html, #map { margin: 0; width: 100%; height: 80%; }
    </style>
in mijn CSS-bestand te verwerken, in dat bestand heb ik dit staan:
1
2
3
4
5		body, html, #map {
margin: 0;
width: 100%;
height: 80%;
}
Het probleem is alleen dat het dan niet werkt.. wat doe ik verkeerd?
  zaterdag 4 mei 2013 @ 15:09:50 #41
91039 mstx
2x1/2 = 1/2 x 1/2
pi_126057233
quote:
0s.gif Op zaterdag 4 mei 2013 15:04 schreef Holograph het volgende:
wat doe ik verkeerd?
Iets dat wij niet kunnen zien met deze beperkte informatie.
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.
👾
pi_126057517
link je in je html bestand wel naar je css bestand?
  zaterdag 4 mei 2013 @ 15:27:55 #43
237554 Holograph
Compay Segundo
pi_126057661
quote:
0s.gif Op zaterdag 4 mei 2013 15:22 schreef Alfje het volgende:
link je in je html bestand wel naar je css bestand?
Sorry voor de beperkte informatie, maar dat was idd het probleem :').
pi_126060679
nevermind

[ Bericht 97% gewijzigd door DutchErrorist op 05-05-2013 11:15:30 ]
Op vrijdag 22 juli 2011 00:30 schreef yvonne het volgende:
Ja DE Ik houd nog heel veel van je
pi_126061459
al gefixed

[ Bericht 89% gewijzigd door DutchErrorist op 05-05-2013 11:15:36 ]
Op vrijdag 22 juli 2011 00:30 schreef yvonne het volgende:
Ja DE Ik houd nog heel veel van je
pi_126084430
Oke nog een vraagje dan een paar dagen geleden had ik een vraag met betrekking tot lijsten sorteren en javascript nu was ik daar heel goed mee geholpen, maar ik had nog 1 vraag.

Is er een mogelijkheid om een voorwerp altijd te laten zien dus ongeacht of het fruit of berry is? Een soort van catch all? Dus dat je berry selecteert dat hij er bij staat en ook als je fruit selecteert?

Ik snap dat het makkelijk lukt als je de class alles mee geeft dus class="item fruit berry" alleen heb ik nu wel wat meer dan alleen fruit en berry en wel een stuk of 12 dingen.

Zie hier dat ene voorbeeld waar ik heel goed mee geholpen was :)

http://jsfiddle.net/maxx0r/uKHXs/55/
Op vrijdag 22 juli 2011 00:30 schreef yvonne het volgende:
Ja DE Ik houd nog heel veel van je
  zondag 5 mei 2013 @ 11:40:25 #47
166255 Maringo
Bèhèhèhèh
pi_126085039
quote:
14s.gif Op zondag 5 mei 2013 11:17 schreef DutchErrorist het volgende:
Oke nog een vraagje dan een paar dagen geleden had ik een vraag met betrekking tot lijsten sorteren en javascript nu was ik daar heel goed mee geholpen, maar ik had nog 1 vraag.

Is er een mogelijkheid om een voorwerp altijd te laten zien dus ongeacht of het fruit of berry is? Een soort van catch all? Dus dat je berry selecteert dat hij er bij staat en ook als je fruit selecteert?

Ik snap dat het makkelijk lukt als je de class alles mee geeft dus class="item fruit berry" alleen heb ik nu wel wat meer dan alleen fruit en berry en wel een stuk of 12 dingen.

Zie hier dat ene voorbeeld waar ik heel goed mee geholpen was :)

http://jsfiddle.net/maxx0r/uKHXs/55/
Een dirty oplossing:

Nog een extra class meegegeven (bijvoorbeeld 'always') aan die items en dan regel 6 van het js veranderen in:
1return $(this).hasClass(fruitColor) && $(this).hasClass(fruitType) && $(this).hasClass('always');
Die volg topic-knop hè...
Op 02-06-2014 16:38 schreef Moeraskat
Je bent te goed voor de mensheid.
pi_126085539
quote:
2s.gif Op zondag 5 mei 2013 11:40 schreef Maringo het volgende:

[..]

Een dirty oplossing:

Nog een extra class meegegeven (bijvoorbeeld 'always') aan die items en dan regel 6 van het js veranderen in:
[ code verwijderd ]

Dat werkt niet goed :D Maar hij moet ook maar op een select altijd laten zien. Dus bij fruit en berry en niet bij kleur of andersom.
Op vrijdag 22 juli 2011 00:30 schreef yvonne het volgende:
Ja DE Ik houd nog heel veel van je
  zondag 5 mei 2013 @ 12:02:48 #49
91039 mstx
2x1/2 = 1/2 x 1/2
pi_126085624
Dan moet je hem een class 'always_fruit' o.i.d. geven en die tonen als fruit!="".
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.
👾
  zondag 5 mei 2013 @ 12:06:47 #50
166255 Maringo
Bèhèhèhèh
pi_126085751
quote:
17s.gif Op zondag 5 mei 2013 11:59 schreef DutchErrorist het volgende:

[..]

Dat werkt niet goed :D Maar hij moet ook maar op een select altijd laten zien. Dus bij fruit en berry en niet bij kleur of andersom.
Ach, ik zet het ook helemaal verkeerd neer. Ik was nog niet helemaal wakker...

1return ($(this).hasClass(fruitColor) && $(this).hasClass(fruitType)) + $(this).hasClass('always');
Die volg topic-knop hè...
Op 02-06-2014 16:38 schreef Moeraskat
Je bent te goed voor de mensheid.
pi_126085956
quote:
2s.gif Op zondag 5 mei 2013 12:06 schreef Maringo het volgende:

[..]

Ach, ik zet het ook helemaal verkeerd neer. Ik was nog niet helemaal wakker...
[ code verwijderd ]

Oke die werkt, alleen nu blijft het object bij beide staan (kleuren en soort fruit). Ik wil dat hij alleen bij 1 blijft staan.

Dus bijvoorbeeld bij kleur wel, maar bij soort niet.
Op vrijdag 22 juli 2011 00:30 schreef yvonne het volgende:
Ja DE Ik houd nog heel veel van je
  zondag 5 mei 2013 @ 16:40:28 #52
237554 Holograph
Compay Segundo
pi_126095572
Opnieuw een vraag; ik ben bezig met mijn website te bouwen. Onderaan de website wil ik een zwarte balk hebben voor wat extra tekst. Ik heb mijn CSS-code daarop gemaakt, maar ik zie de balk onderaan de pagina echter niet verschijnen. Wat doe ik verkeerd?

style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54		        body, html, #map {
        margin: 0;
        width: 100%;
        height: 85%;
        }
        
        #bovenkant{
        width: 100%;
        height: 40px;
        background-color: black;
        text-align: center;
            line-height: 150%;
            vertical-align: middle;
            color: white;
            font-weight: bold;
            font-size: 18px;
            font-family: "Trebuchet MS", Arial, Helvetica, sans-serif
        }
        
        #box{
            width: 300px;
            background: rgba(0,0,0,0.8);
            z-index: 1000;
            position: absolute;
            top: 50px; 
            left: 50px;
            color: white;
            padding: 10px;
            border-radius: 10px;
            -moz-border-radius: 10px;
            -o-border-radius: 10px;
            -webkit-border-radius: 10px;
            -ms-border-radius: 10px;
        }

        #midden{
        position: absolute;
        background-color: #DBA901;
        width: 100%;
        height: 750px;
        }
        
        #onderkant{
        width: 100%;
        height: 40px;
        background-color: black;
        text-align: left;
            line-height: 150%;
            vertical-align: middle;
            color: white;
            font-weight: bold;
            font-size: 11px;
            font-family: "Trebuchet MS", Arial, Helvetica, sans-serif
        }

index.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33		<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
  <head>
    <title>Google Maps API V3</title>
    <link rel="stylesheet" href="./css/style.css" type="text/css">
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDypT9N2T2imUPhILy_zfWJP1EGUiSTDKY&sensor=false"></script>
    <script type="text/javascript" src="./js/kaart.php"></script>

  </head>
<body onload="getMap()">
<div id="bovenkant"><? echo MENU; ?></div>

<div id="map">
</div>

<div id="box">

    <b><? echo INDEX_BOX_WELKOM; ?></b>

    <p><? echo INDEX_BOX_INHOUD; ?></p>

</div>

<div id="midden">
</div>

<div id="onderkant">
</div>

</body>

</html>

De div id 'onderkant' staat duidelijk onder div id 'midden'. Het lijkt er echter op dat div id 'midden' alleen wordt weergeven.
  zondag 5 mei 2013 @ 16:51:57 #53
390538 Dimauro
Vuurbezweerder
pi_126095983
#midden{
position: absolute;

Ik denk dat het aan de absolute positie van je #midden div ligt.
I'm not the girl in the picture..
  zondag 5 mei 2013 @ 16:53:29 #54
237554 Holograph
Compay Segundo
pi_126096038
quote:
0s.gif Op zondag 5 mei 2013 16:51 schreef Dimauro het volgende:
#midden{
position: absolute;

Ik denk dat het aan de absolute positie van je #midden div ligt.
Thanks! Dat heeft geholpen :)
  zondag 5 mei 2013 @ 18:12:31 #55
228072 Crimyclown
Sapper de fap!
pi_126098364
Is het mogelijk een CMS achter een applicatie te stoppen (Android app).
Anonieme tievesclown
  zondag 5 mei 2013 @ 20:34:36 #56
166255 Maringo
Bèhèhèhèh
pi_126104151
quote:
5s.gif Op zondag 5 mei 2013 18:12 schreef Crimyclown het volgende:
Is het mogelijk een CMS achter een applicatie te stoppen (Android app).
Ja, maar waarom?
Die volg topic-knop hè...
Op 02-06-2014 16:38 schreef Moeraskat
Je bent te goed voor de mensheid.
  zondag 5 mei 2013 @ 21:22:26 #57
137776 boem-dikkie
Jedi Mind Baby!
pi_126107015
quote:
5s.gif Op zondag 5 mei 2013 18:12 schreef Crimyclown het volgende:
Is het mogelijk een CMS achter een applicatie te stoppen (Android app).
Natuurlijk. Data ophalen met JSON is daar een goede methode voor.
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
  maandag 6 mei 2013 @ 09:41:03 #58
56176 Catch22-
Ben je Blind?!
pi_126119768
quote:
2s.gif Op zondag 5 mei 2013 20:34 schreef Maringo het volgende:

[..]

Ja, maar waarom?
in de regel is dit een matig idee ja.
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?
pi_126120705
Er valt niets zinnigs op te zeggen zonder te weten watvoor app het is.
zcflevo.nl
  maandag 6 mei 2013 @ 12:11:11 #60
237554 Holograph
Compay Segundo
pi_126123594
Mijn site is bijna af, ik stuit alleen op de laatste problemen:

Onderaan mijn website heb ik twee boxen staan voor informatie e.d. Het probleem is alleen dat de boxen meesschuiven op het moment dat ik mijn internet venster kleiner maakt. Hierdoor komt rechter box onder de linker box te staan, wat er totaal niet uitziet. Het liefst zou ik willen dat ze gewoon allebei in het midden van de pagina (blijven) staan.

http://jsfiddle.net/VTe8P/1/

Weet iemand hier een oplossing voor? Het betreffen #box_midden_inhoud en #box_midden_inhoud1.
  maandag 6 mei 2013 @ 13:58:50 #61
228072 Crimyclown
Sapper de fap!
pi_126127504
quote:
2s.gif Op zondag 5 mei 2013 20:34 schreef Maringo het volgende:

[..]

Ja, maar waarom?
Om content in de applicatie beheersbaar te maken. Er zit veel informatie in die door de opdrachtgever gewijzigd moeten kunnen worden. Ik ga niet elke keer een nieuwe code voor hem schrijven.

quote:
14s.gif Op zondag 5 mei 2013 21:22 schreef boem-dikkie het volgende:

[..]

Natuurlijk. Data ophalen met JSON is daar een goede methode voor.
Bedankt :) .
Anonieme tievesclown
  maandag 6 mei 2013 @ 14:32:58 #62
390538 Dimauro
Vuurbezweerder
pi_126128764
quote:
0s.gif Op maandag 6 mei 2013 12:11 schreef Holograph het volgende:
Mijn site is bijna af, ik stuit alleen op de laatste problemen:

Onderaan mijn website heb ik twee boxen staan voor informatie e.d. Het probleem is alleen dat de boxen meesschuiven op het moment dat ik mijn internet venster kleiner maakt. Hierdoor komt rechter box onder de linker box te staan, wat er totaal niet uitziet. Het liefst zou ik willen dat ze gewoon allebei in het midden van de pagina (blijven) staan.

http://jsfiddle.net/VTe8P/1/

Weet iemand hier een oplossing voor? Het betreffen #box_midden_inhoud en #box_midden_inhoud1.
1
2
3
4
5
6		*knip*..#box_midden_inhoud1{
        width: 500px;
        height:auto;
        
        margin-left:auto;
        margin-right:auto;..*knip*

en dan de float weghalen ?
I'm not the girl in the picture..
  woensdag 8 mei 2013 @ 14:15:37 #63
27454 InTrePidIvity
Looks like it's broken...
pi_126216404
Ik heb één <section> waarbinnen ik zowel een ol als een ul heb staan. Hoe style ik de li's die daarin staan beiden afzonderlijk, zonder er een class aan mee te geven? Volgens mij is het iets heel simpels, dat ik over het hoofd zie...
...it's rielie broken... It's rielie, rielie broken... Let's go wecycle!
[Tournament] Beste Remake
  woensdag 8 mei 2013 @ 14:16:47 #64
118585 Crutch
Filantroop || Taalzwengel
pi_126216443
1
2
3
4
5
6
7		section ol li
{
}

section ul li
{
}

http://jsfiddle.net/DruSS/

Zo geef je specifiek aan welke <li>'s je wil hebben.

[ Bericht 32% gewijzigd door Crutch op 08-05-2013 14:23:15 ]
Je moeder is een hamster
  woensdag 8 mei 2013 @ 14:24:43 #65
27454 InTrePidIvity
Looks like it's broken...
pi_126216742
quote:
0s.gif Op woensdag 8 mei 2013 14:16 schreef Crutch het volgende:

[ code verwijderd ]

http://jsfiddle.net/DruSS/

Zo geef je specifiek aan welke <li>'s je wil hebben.
Ik zal wel iets niet goed gedaan hebben, dit dacht ik namelijk al geprobeerd te hebben. Dankjewel in elk geval :)
...it's rielie broken... It's rielie, rielie broken... Let's go wecycle!
[Tournament] Beste Remake
  woensdag 8 mei 2013 @ 14:25:30 #66
118585 Crutch
Filantroop || Taalzwengel
pi_126216775
quote:
14s.gif Op woensdag 8 mei 2013 14:24 schreef InTrePidIvity het volgende:

[..]

Ik zal wel iets niet goed gedaan hebben, dit dacht ik namelijk al geprobeerd te hebben. Dankjewel in elk geval :)
Als dat nog steeds niet werkt, kun je dan je css eens posten?
Je moeder is een hamster
  woensdag 8 mei 2013 @ 14:43:34 #67
27454 InTrePidIvity
Looks like it's broken...
pi_126217483
quote:
0s.gif Op woensdag 8 mei 2013 14:25 schreef Crutch het volgende:

[..]

Als dat nog steeds niet werkt, kun je dan je css eens posten?
Ik schreef het niet helemaal duidelijk op: jouw oplossing werkt perfect, maar ik dacht dat ik dat eerder al geprobeerd had zonder succes. Zal eerder wel iets fout gedaan hebben :)
...it's rielie broken... It's rielie, rielie broken... Let's go wecycle!
[Tournament] Beste Remake
  woensdag 8 mei 2013 @ 14:44:26 #68
118585 Crutch
Filantroop || Taalzwengel
pi_126217514
quote:
0s.gif Op woensdag 8 mei 2013 14:43 schreef InTrePidIvity het volgende:

[..]

Ik schreef het niet helemaal duidelijk op: jouw oplossing werkt perfect, maar ik dacht dat ik dat eerder al geprobeerd had zonder succes. Zal eerder wel iets fout gedaan hebben :)
Oh ok. :')
Nou ja opgelost dus. ^O^
Je moeder is een hamster
pi_126318168
Dit zal ongetwijfeld één van de meest simpele en domme noobvragen zijn, maar hier komt 'ie dan:

Comments in code worden genegeerd door de webbrowser, alleen ze zijn wel zichtbaar in programmeerprogramma's e.d.; zorgen comments voor een hoger verbruik van de bandwidth? Dus worden comments meegenomen door de browsers bij het versturen van de data naar de gebruiker
pi_126318725
Het versturen van de browser naar de gebruiker? Je bedoelt het licht wat je monitor uitstraalt?

Als je HTML-comments bedoelt is het antwoord op de vraag die je bedoelt te stellen (Dataverkeer tussen server en browser) uiteraard "ja".
zcflevo.nl
  vrijdag 10 mei 2013 @ 20:18:49 #71
166255 Maringo
Bèhèhèhèh
pi_126318957
Ze zijn ook zichtbaar in de browser als je de broncode bekijkt.
Die volg topic-knop hè...
Op 02-06-2014 16:38 schreef Moeraskat
Je bent te goed voor de mensheid.
pi_126319023
Dan haal ik de comments er uit, thanks!
  vrijdag 10 mei 2013 @ 20:25:18 #73
166255 Maringo
Bèhèhèhèh
pi_126319333
quote:
0s.gif Op vrijdag 10 mei 2013 20:19 schreef Qontroller het volgende:
Dan haal ik de comments er uit, thanks!
Why.. Ze bestaan niet voor niets. Of bedoel je dat je comments in je html heb staan?
Die volg topic-knop hè...
Op 02-06-2014 16:38 schreef Moeraskat
Je bent te goed voor de mensheid.
pi_126319537
quote:
1s.gif Op vrijdag 10 mei 2013 20:25 schreef Maringo het volgende:

[..]

Why.. Ze bestaan niet voor niets. Of bedoel je dat je comments in je html heb staan?
Ja dat bedoel ik
pi_126322354
Yes. Weer 100 bytes bespaard.
zcflevo.nl
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[html, css, js] Frontend is het nieuwe backend
Index

» digital corner

» development

Forum Opties
Forumhop:
Hop naar:
(afkorting, bv 'KLB')