Nieuw en gewijzigd

Gesorteerd op datum. Het nieuwste staat bovenaan. Details over wijzigingen staan vaak in de uitleg bij het voorbeeld onder het kopje Wijzigingen.

23 december 2024: menu → statisch → horizontaal

Volledig herschreven: menu met knoppen met indicatie van huidige, bezochte en onbezochte pagina’s en focus: voorbeeld 8 uitleg 8

Belangrijkste verandering: in plaats van afbeeldingen worden nu gradiënts gebruikt als achtergrond voor de knoppen.

21 november 2024: positioneren → verticaal

Bijgewerkt: verticaal centreren van element met bekende hoogte met behulp van position: absolute;: voorbeeld 6 uitleg 6

20 augustus 2024: menu → statisch → horizontaal

Volledig herschreven: menu met vlaggen met daaronder ronde tekst: voorbeeld 93 uitleg 93

Belangrijkste verandering: ronde tekst onder de vlaggen is nu altijd zichtbaar.

23 juli 2024: overig → schaduw

Volledig herschreven: ronde hoeken met behulp van border-radius: voorbeeld 92 uitleg 92

Belangrijkste verandering: alle code voor verouderde browsers verwijderd.

25 mei 2024: overig → kader

Volledig herschreven: ronde hoeken met behulp van border-radius: voorbeeld 91 uitleg 91

Belangrijkste verandering: door het gebruik van nieuwere eigenschappen konden html en css sterk worden vereenvoudigd.

4 mei 2024: positioneren → kolom

Volledig herschreven: twee of meer kolommen gemeenschappelijke rand en/of achtergrond geven: voorbeeld 89 uitleg 89

Belangrijkste verandering: voor de onderste serie van drie wordt nu flexbox gebruikt.

11 maart 2024: overig → lijst

Volledig herschreven: positie, kleur, symbool, en dergelijke in een lijst wijzigen: voorbeeld 84 uitleg 84

Belangrijkste verandering: ::before wordt vrijwel niet meer gebruikt.

28 januari 2024: lay-out → meer kolommen

Volledig herschreven: driekoloms lay-out met in grotere vensters vaste linker-, rechter- en scrollbare middenkolom en header. In kleinere vensters één scrollbare kolom: voorbeeld 83 uitleg 83

Belangrijkste veranderingen: in kleinere browservensters nu weergave als één kolom. Onderdelen gepositioneerd met behulp van grid in plaats van position.

21 december 2023: figuren → grafiek

Volledig herschreven: makkelijk aan te passen verticale staafdiagrammen: voorbeeld 81 uitleg 81

17 november 2023: tekst → effecten

Volledig herschreven: ondoorzichtige tekst op doorzichtige achtergrond, gebruikt rgb(): voorbeeld 78 uitleg 78

17 oktober 2023: tekst → effecten

Volledig herschreven: initiaal ('drop cap') met en zonder gebruik van plaatje: voorbeeld 75 uitleg 75

Belangrijkste verandering: initialen veranderen nu beide mee met de lettergrootte.

7 oktober 2023: overig → lijst

Volledig herschreven: grafische hiërarchische sitemap met blokjes en lijntjes. voorbeeld 71 uitleg 71

Belangrijkste veranderingen: kan nu worden vergroot en gebruikt geen afbeeldingen meer.

22 september: overig → schaduw

Volledig herschreven: tekst met schaduw en andere effecten met gebruik van text-shadow. voorbeeld 70 uitleg 70

10 september 2023: overig → kader

Volledig herschreven: dubbel kader met ronde hoeken. Hoogte groeit mee met inhoud: voorbeeld 69 uitleg 69

Belangrijkste verandering: kader wordt niet meer met plaatjes, maar met box-shadow gemaakt.

5 september 2023: positioneren → horizontaal

Volledig herschreven: vijfien manieren om een blok-element horizontaal én verticaal te centreren: voorbeeld 68 uitleg 68

Belangrijkste verandering: van één naar vijftien manieren uitgebreid, waaronder flexbox en grid.

5 augustus 2023: menu → dynamisch → horizontaal

Volledig herschreven: toegankelijk responsief dropdownmenu: voorbeeld 66 uitleg 66

Belangrijkste verandering: wordt nu ook goed weergegeven op mobieltjes en werkt nu ook met toetsenbordnavigatie en schermlezer.

27 april 2023: overig → lijst

Volledig herschreven: geneste lijsten met automatische nummering en bijpassende (lelijke) lay-out: voorbeeld 65 uitleg 65

Belangrijkste verandering: wordt nu ook goed weergegeven in heel kleine vensters en met heel grote lettergrootte.

9 maart 2023: artikelen

Bijgewerkt: charset, tekenset, utf-8, entiteiten, accenten, en dergelijke artikel 64

28 maart 2023: tekst → lijnen

Volledig herschreven: schaalbare inhoudsopgave met voorlooppunten: voorbeeld 62 uitleg 62

Belangrijkste verandering: voorlooppunten blijven nu ook zichtbaar bij andere lettergrootte.

2 maart 2023: lay-out → twee kolommen

Volledig herschreven: twee even brede (en even hoge) kolommen met header en menubalk: voorbeeld 61 uitleg 61

Belangrijkste veranderingen: gebruikt nu flexbox en werkt ook op smartphones.

24 februari 2023: figuren → grafiek

Volledig herschreven: makkelijk aan te passen horizontale staafdiagrammen: voorbeeld 60 uitleg 60

Belangrijkste verandering: behalve de smileys alle afbeeldingen vervangen door gradiënten.

15 januari 2023: figuren → driehoek

Volledig herschreven: schaalbare driehoeken zonder gebruik van een afbeelding: voorbeeld 59 uitleg 59

Belangrijkste verandering: is nu ook goed te bekijken op mobieltjes.

5 januari 2023: tekst → effecten

Volledig herschreven: als scrollbalk ontbreekt, vervaagt bij overflow tekst onderaan langzaam: voorbeeld 57 uitleg 57

Belangrijkste verandering: alleen als er geen scrollbalk is, vervaagt de tekst onderaan.

18 december 2022: pop-ups

Alle voorbeelden van pop-ups verwijderd. Pop-ups zijn nauwelijks toegankelijk en goed werkend te krijgen op mobiele apparaten, zonder een hele berg JavaScript.

25 november 2022: afbeelding → slideshow

Volledig herschreven: slideshow met (thumbnails en) foto's. Gebruikt weinig bandbreedte: voorbeeld 55 uitleg 55

Belangrijkste verandering: werkt nu ook op mobiel en in kleine vensters.

7 december 2021: afbeelding → veranderen

Volledig herschreven: tijdelijk afbeelding laten overvloeien in vervangende afbeelding: voorbeeld 53 uitleg 53

Werkt niet meer alleen met de muis, maar ook met aanraken en toetsenbord.

11 oktober 2021: tekst → invoegen

Volledig herschreven: tekst uit een ander bestand invoegen met behulp van PHP: voorbeeld 52 uitleg 52

Belangrijkste verandering: van SSI overgestapt op PHP voor het invoegen.

3 oktober 2021: overig → schaduw

Nieuw: met clip-path en drop-shadow() gemaakte pijl naar rechts. Bij aanraken, hoveren of tabben veranderen kleuren en richting: voorbeeld 51 uitleg 51

15 september 2021: overig → schaduw

Nieuw: met clip-path gemaakte pijl met schaduw. De schaduw volgt de omtrek van de pijl: voorbeeld 50 uitleg 50

6 september 2021: overig → figuren

Volledig herschreven: pijl met tekst erin. Pijl past zich aan lettergrootte en vensterbreedte aan: voorbeeld 49 uitleg 49

Belangrijkste verandering: er wordt alleen nog css gebruikt, geen afbeeldingen.

22 mei 2021: menu → dynamisch → horizontaal

Nieuw: knoppenbalk met bij elke knop een te openen paneel: voorbeeld 48 uitleg 48

9 januari 2021: tekst → illustraties

Volledig herschreven: pagina met afbeelding, beschrijving en prijs van gereedschappen: voorbeeld 47 uitleg 47

Belangrijkste verandering: lay-out past zich aan de breedte van het browservenser aan.

13 december 2020: overig → schaduw

Nieuw: schaduw rondom afbeeldingen met behulp van filter: drop-shadow(): voorbeeld 130 uitleg 130

9 november 2020: menu → statisch → verticaal

Volledig herschreven: in smallere vensters inschuifmenu, in bredere vensters verticaal menu met tekeningen: voorbeeld 45 uitleg 45

Belangrijkste verandering: in smalle browservensters wordt het menu nu alleen op verzoek getoond.

10 oktober 2020: overig → kader

Nieuw: bij focus verandert de rand van de rechthoek geleidelijk van kleur: voorbeeld 129 uitleg 129

6 september 2020: positioneren → afbeelding

Volledig herschreven: twee manieren om een afbeelding boven een andere afbeelding te centreren: voorbeeld 44 uitleg 44

Belangrijkste verandering: tweede methode met translate() toegevoegd.

20 augustus 2020: tekst → illustraties

Volledig herschreven: met behulp van shape-outside tekst uitlijnen naast een ronde of stervormige afbeelding: voorbeeld 43 uitleg 43

Belangrijkste verandering: enorme hoeveelheid html en css vervangen door één eigenschap: shape-outside.

4 augustus 2020: positioneren → horizontaal

Nieuw: horizontaal en verticaal centreren van fixed of absoluut gepositioneerd element met (on)bekende grootte: voorbeeld 128 uitleg 128

13 juli 2020: afbeelding → veranderen

Volledig herschreven: afhankelijk van het geactiveerde plaatje veranderen één tot vier plaatjes tijdelijk: voorbeeld 42 uitleg 42

Belangrijkste verandering: werkt nu ook op touchscreens.

13 juni 2020: lay-out → meer kolommen

Volledig herschreven: met flexbox gemaakte venstervullende lay-out met header, footer en drie altijd even hoge kolommen: voorbeeld 41 uitleg 41

Belangrijkste veranderingen: gebruikt nu flexbox en werkt ook op smartphones.

28 mei 2020: overig → lijst

Nieuw: boekenplank met (zichtbaar te maken) informatie over de boeken: voorbeeld 96 uitleg 96

24 april 2020: kader

Volledig herschreven: met behulp van border-radius gemaakte cirkel, ellips en onregelmatige rondhoekige figuren: voorbeeld 40 uitleg 40

Belangrijkste verandering: in plaats van afbeeldingen wordt border-radius gebruikt.

9 maart 2020: afbeelding → slideshow

Volledig herschreven: Slideshow met thumbnails en afbeeldingen van verschillende grootte. Gebruikt zo weinig mogelijk bandbreedte: voorbeeld 39 uitleg 39

Belangrijkste verandering: werkt nu ook op touchscreens.

5 augustus 2019: afbeelding → thumbnails

Nieuw: eerste actie geeft meer informatie, tweede actie volgt link: voorbeeld 127 uitleg 127

16 juni 2019: positioneren → tekst

Volledig herschreven: verticaal op gelijke afstand zetten van tekst (waaronder centreren): voorbeeld 38 uitleg 38

Belangrijkste verandering: methodes met flexbox toegevoegd.

28 mei 2019: tekst → illustraties

Volledig herschreven: bij aanraken van, hoveren over of tabben naar een gearceerd woord opent een illustratie: voorbeeld 37 uitleg 37

Belangrijkste veranderingen: aangepast voor smalle vensters en touchscreen. Toegankelijkheid verbeterd.

23 april 2019: afbeelding → video & audio

Nieuw: geluid afspelen met behulp van het <audio>-element: voorbeeld 126 uitleg 126

31 december 2018: menu → dynamisch → verticaal

Volledig herschreven: verticaal responsief uitklapmenu, tot vier niveaus diep: voorbeeld 36 uitleg 36

Belangrijkste veranderingen: aangepast voor smalle vensters en touchscreen. Toegankelijkheid verbeterd.

24 oktober 2018: menu → dynamisch → horizontaal

Volledig herschreven: horizontaal responsief uitklapmenu, tot vier niveaus diep: voorbeeld 35 uitleg 35

Belangrijkste veranderingen: aangepast voor smalle vensters en touchscreen. Toegankelijkheid verbeterd.

3 juni 2018: menu → statisch → verticaal

Nieuw: verticaal slide-outmenu. Maakt gebruik van :target: voorbeeld 125 uitleg 125

30 april 2018: positioneren → horizontaal

Volledig herschreven: horizontaal positioneren van pagina of blok-element met bekende breedte: voorbeeld 34 uitleg 34

Belangrijkste veranderingen: aantal methoden toegevoegd, waaronder flexbox. Responsief gemaakt.

19 april 2018: tekst → lijnen

Nieuw: afbeelding als onderstreping. Afbeelding past zich aan de lengte van de tekst aan: voorbeeld 124 uitleg 124

3 april 2018: tekst → effecten → doorzichtigheid

Gewijzigd: ondoorzichtige tekst op meegroeiende doorzichtige achtergrond, gebruikt rgba(): voorbeeld 31 uitleg 31

Belangrijkste verandering: gebruikt nu rgba() in plaats van opacity.

28 maart 2018: positioneren → kolom

Nieuw: twee kolommen die altijd even hoog zijn, ongeacht de inhoud: voorbeeld 123 uitleg 123

19 maart 2018: positioneren → footer

Volledig herschreven: footer altijd onderaan venster of lager ('sticky footer'): voorbeeld 30 uitleg 30

Voornaamste verandering: flexbox wordt nu gebruikt om de footer onderaan te houden./

11 maart 2018: tekst → ankers

Volledig herschreven: Lange tekst met inhoudsopgave. Inhoudsopgave en tekst zijn onafhankelijk te scrollen: voorbeeld 29 uitleg 29

Voornaamste verandering: in smallere browservensters is de inhoudsopgave alleen op zerzoek zichtbaar.

29 januari 2018: tekst → bewerken

Nieuw: met behulp van counter(), calc(), en dergelijke allerlei statistische gegevens over aankruisvakjes weergeven voorbeeld 122 uitleg 122

25 december 2017: menu → knoppen (plat)

Volledig herschreven: Menu met knoppen. Aanraking/klik volgt gelijk link; hoveren/focus verschuift eerst afbeelding: voorbeeld 28 uitleg 28

Voornaamste verandering: op touchscreens leveren hoveren en focus geen problemen meer op, omdat bij een aanraking de afbeelding niet meer verschuift.

20 november 2017: menu → knoppen (plat)

Volledig herschreven: menu met knoppen. Aanraking/klik volgt gelijk link; hoveren/focus verandert eerst link: voorbeeld 27 uitleg 27

Voornaamste verandering: op touchscreens levert hoveren geen problemen meer op, omdat bij een aanraking de link niet meer verandert.

5 oktober 2017: tekst → effecten

Nieuw: tekstkleur aanpassen aan achtergrond met gebruik van mix-blend-mode voorbeeld 121 uitleg 121

19 juni 2017: tekst → effecten

Nieuw: kiezen uit vijf combinaties van voor- en achtergrondkleur voorbeeld 120 uitleg 120

6 juni 2017: positioneren → verticaal

Volledig herschreven: drie manieren om pagina of blok-element met onbekende hoogte verticaal te centreren: voorbeeld 7 uitleg 7

Voornaamste veranderingen: flexbox en transform: translateY() toegevoegd. Centreren uitgeschakeld voor kleinere browservensters.

16 mei 2017: artikelen

Nieuw: lengte-eenheden in css (inclusief calc() en procenten) artikel 119

20 maart 2017: lay-out → twee kolommen

Volledig herschreven: tweekoloms lay-out met (vaste) header: voorbeeld 4 uitleg 4

Voornaamste veranderingen: werkt nu ook op mobiele apparaten, toegankelijkheid verbeterd.

7 maart 2017: animatie

Nieuw: animatie speelt vooruit sneller af dan achteruit: voorbeeld 118 uitleg 118

23 februari 2017: lay-out → twee kolommen

Volledig herschreven: tweekoloms lay-out met header en menu: voorbeeld 3 uitleg 3

Voornaamste veranderingen: werkt nu ook op mobiele apparaten, toegankelijkheid verbeterd. Werkend menu toegevoegd.

30 januari 2017: afbeelding → overig

Nieuw: art direction: browser beste afbeelding laten kiezen voor scherm en/of venster: voorbeeld 117 uitleg 117

20 december 2016: lay-out → één kolom

Volledig herschreven: éénkoloms lay-out met (vaste) footer en (in bredere vensters) zijvleugels: voorbeeld 13 uitleg 13

Belangrijkste verandering: past zich beter aan de grootte van het venster aan.

14 december 2016: lay-out → één kolom

Nieuw: éénkoloms lay-out met vast menu en kader: voorbeeld 5 uitleg 5

15 november 2016: afbeelding → video & audio

Nieuw: script om in kleiner venster kleinere video's te downloaden: voorbeeld 116 uitleg 116

2 november 2016: lay-out → twee kolommen

Nieuw: lay-out met header, twee kolommen en footer: voorbeeld 2 uitleg 2

20 oktober 2016: tekst → effecten

Nieuw: tekst verticaal weergeven: voorbeeld 115 uitleg 115

27 september 2016: lay-out → twee kolommen

Volledig herschreven: tweekoloms lay-out met (vaste) header en footer: voorbeeld 1 uitleg 1

Voornaamste veranderingen: werkt nu ook op mobiele apparaten, toegankelijkheid verbeterd.

26 augustus 2016: positioneren → footer & header

Nieuw: responsieve en toegankelijke tabel met (in bredere vensters) vaste kolomkoppen: voorbeeld 114 uitleg 114

Volledig herschreven. Onder andere de toegankelijkheid is verbeterd. Werkt nu ook op touchscreens.

16 juli 2016: overig → lijst

Nieuw: lijst met links die groepsgewijs via trefwoorden kunnen worden getoond of verborgen: voorbeeld 113 uitleg 113

30 juni 2016: menu → knoppen (plat)

Gewijzigd: menu met knoppen. Menu met knoppen. Symbool en/of tekst verschilt afhankelijk van bezocht of onbezocht: voorbeeld 23 uitleg 23

Volledig herschreven. Onder andere de toegankelijkheid en de werking op touchscreens zijn verbeterd.

20 juni 2016: schaduw

Nieuw: serie blok-elementen met doorzichtige schaduw (box-shadow): voorbeeld 112 uitleg 112

14 juni 2016: menu → knoppen (plat)

Gewijzigd: menu met knoppen die verkleuren, afhankelijk van of link al is bezocht: voorbeeld 22 uitleg 22

Volledig herschreven. Onder andere de toegankelijkheid is verbeterd.

6 juni 2016: kader

Nieuw: flexibel kader bestaande uit afbeeldingen rondom blok-element (border-image): voorbeeld 111 uitleg 111

16 mei 2016: menu → knoppen (diepte)

Gewijzigd: menu met knoppen met ronde rand, die aangeeft of link al bezocht is of nog niet: voorbeeld 21 uitleg 21

Tekst herschreven. Aan de code is weinig gewijzigd. De toegankelijkheid is wel wat verbeterd.

8 mei 2016: positioneren → verticaal

Nieuw: onderste blokje staat altijd onderaan, ongeacht zoomen, hoeveelheid tekst, lettergrootte, enzovoort: voorbeeld 110 uitleg 110

23 april 2016: menu → knoppen → (diepte)

Gewijzigd: menu met knoppen met rand, die aangeeft of link al bezocht is of nog niet: voorbeeld 20 uitleg 20

Tekst herschreven. Aan de code is weinig gewijzigd. De toegankelijkheid is wel wat verbeterd.

19 april 2016

Op iOS en Android testen in Opera Mini weer opgenomen. Deze browser kent nu een modus, waarin simpele dingen als regelhoogte wel worden herkend. Nu niet meer elk rudimentair begin van zelfs de meest simpele lay-out door deze browser fanatiek om zeep wordt geholpen, is testen in deze browser weer zinvol.

9 maart 2016: menu → knoppen (plat)

Gewijzigd: werking van de submenu's op de site: voorbeeld 19 uitleg 19

Volledig herschreven. Werkt nu ook op touchscreens.

18 januari 2016: tekst → invoegen

Nieuw: invoegen van tekst vanuit een ander bestand met behulp van <object>: voorbeeld 108 uitleg 108

3 januari 2016: overig → lijst

Nieuw: lijst met leesbare en met knoppen uitvouwbare officiële versie van een verdrag: voorbeeld 107 uitleg 107

15 november 2015: afbeelding → thumbnails

Volledig herschreven: bij hoveren over, aanraken van of tabben naar één van de thumbnails opent een grotere afbeelding met onderschriftt: voorbeeld 17 uitleg 17

Belangrijkste wijziging: nu ook geschikt voor touchscreen.

31 oktober 2015: tekst → bewerken

Nieuw: onderdelen van een formulier in- en uitschakelen met behulp van enabled en disabled: voorbeeld 106 uitleg 106

18 oktober 2015: afbeelding → thumbnails

Volledig herschreven: bij hoveren over, aanraken van of tabben naar één van de thumbnails opent een grotere afbeelding met onderschrift: voorbeeld 16 uitleg 16

Grootste wijziging: nu ook geschikt voor touchscreen.

18 september 2015: tekst → lijnen

Nieuw: voorbeelden van <hr>'s die geen aaneengesloten, rechte lijn zijn: voorbeeld 105 uitleg 105

11 augustus 2015: positioneren → kolom

Nieuw: twee in een venstertje naast elkaar staande kolommen gelijktijdig scrollen: voorbeeld 104 uitleg 104

10 augustus 2015

Gestopt met testen in Opera Mini. Behalve voor gewone tekst met kopjes en soortgelijke dingen is deze browser gewoon onbruikbaar. Het negeren van iets simpels als regelhoogte sloopt vrijwel elke lay-out. Bovendien grossiert het ding werkelijk in bugs en is de documentatie minimaal. Waarmee nu (helaas) op geen enkel producs van Opera meer wordt getest.

1 augustus 2015: afbeelding → menu

Volledig herschreven: menu voor kinderen met tekening en pop-ups. Elk puzzelstukje is een link: voorbeeld 14 uitleg 14

Is nu ook geschikt voor touchscreen.

29 april 2015: afbeelding → video & audio

Aangepast: video zonder plug-in in (bijna) elke browser: voorbeeld 80 uitleg 80

Voorbeeld aangepast aan de gewijzigde specificatie (media-attribuut bij <video> is om onbegrijpelijke redenen verwijderd).

19 april 2015

Testen in Opera vervangen door testen in UC Browser. Alles wat Opera uniek maakte is eruit gesloopt, en voor het grote aantal gebruikers hoef je er niet in te testen. Indirect wordt nog wel getest, om dat Opera gebruik maakt van dezelfde rendering engine als Google Chrome. In Opera Mini wordt nog wel getest.

11 oktober 2013: lay-out → één kolom

Aangepast: middenkolom met vaste breedte, zijvleugels en vaste footer: voorbeeld 13 uitleg 13

Volledig herschreven. Belangrijkste veranering: werkt nu ook op touchscreens met iOS, Android, Windows 8 en Windows Phone.

16 juli 2013: menu → statisch → horizontaal

Aangepast: knoppen met toelichting en indicatie van huidige, bezochte en onbezochte pagina's: voorbeeld 12 uitleg 12

Volledig herschreven. Belangrijkste verandering: werkt nu ook op touchscreens met iOS, Android, Windows 8 en Windows Phone.

5 juni 2013: artikelen

Nieuw: wat is het beste doctype? En waarom is dat zo? En hoe is dat zo gekomen? En waarom...? Daarom! artikel 102

Alles wat je altijd al wilde weten, maar nooit durfde vragen over het doctype.

25 mei 2013: afbeelding → slideshow

Aangepast: slideshow met thumbnail en foto's van verschillende grootte. Gebruikt weinig bandbreedte: voorbeeld 11 uitleg 11

Belangrijkste veranderingen:
werkt nu ook op touchscreens met iOS, Android en Windows 8;
terugbladeren door groto foto's nu ook mogelijk.

7 december 2012: positioneren → verticaal

Aangepast: verticaal centreren van blok-element met bekende hoogte met behulp van position: absolute;: voorbeeld 6 uitleg 6

Helemaal herschreven. Belangrijkste verandering: in kleinere vensters verdwijnt nu aan de bovenkant niets meer.

26 juli 2012: afbeelding → video & audio

Volledig herschreven: video zonder plug-in in (bijna) elke browser, aangepast aan venstergrootte: voorbeeld 80 uitleg 80

Terug van weggeweest. Vanwege de snelle veranderingen bij <video> was dit 'n tijdlang alleen 'n verwijzing naar 'n aantal andere sites. Nu staat hier weer een volledig voorbeeld.

4 april 2012: lay-out → Twee kolommen

Volledig herschreven: twee kolommen, rechterkolom flexibele breedte, vaste linkerkolom, vaste header en vaste footer: voorbeeld 1 uitleg 1

Belangrijkste wijzigingen: code voor Internet Explorer 6 eruit gesloopt, nieuwe elementen header, nav, article, section en footer gebruikt, maximumbreedte gegeven.

5 maart 2012: menu → dynamisch → horizontaal

Gewijzigd: simpel uitklapmenu, twee niveaus diep: voorbeeld 66 uitleg 66

Volledig herschreven. Houdt beter rekening met vensterbreedte, (iets) toegankelijker, ziet er beter uit, enzovoort. De volledige lijst met veranderingen vind je in de uitleg.

11 februari 2012

Tot nu toe werd alles getest in schermlezer JAWS. Die was veertig minuten gratis te gebruiken, waarna je Windows opnieuw moest opstarten. Nu blijkt de licentie het testen van sites in de gratis versie expliciet te verbieden. En moet je zo'n duizend euro betalen, als je wilt proberen je toegankelijk te maken voor blinden en slechtzienden. Die test is ook nog 'ns gratis reclame voor JAWS, zou je denken. Sommige bedrijven proberen werkelijk de laatste cent uit de handicaps van anderen te persen. Voortaan wordt dus het minstens even goede open source NVDA gebruikt.

6 februari 2012: schaduw

Gewijzigd: tekst met schaduw zonder gebruik van plaatjes of dubbele tekst (text-shadow): voorbeeld 70 uitleg 70

Werkt nu ook in Internet Explorer 9, voor zover dat kan in deze bij het verschijnen al verouderde browser.

9 september 2011: afbeelding → slideshow

Compleet herschreven: slideshow met thumbnail en foto's van verschillende grootte. Gebruikt weinig bandbreedte: voorbeeld 11 uitleg 11

12 augustus 2011: afbeelding → thumbnails

Compleet herschreven: hover of tab naar een van de thumbnails en een grotere afbeelding met bijschrift opent: voorbeeld 16 uitleg 16

31 december 2010: menu → knoppen (plat)

Nieuw: bij hoveren over knop verschuift plaatje (transition): voorbeeld 28 uitleg 28

29 november 2010: menu → statisch → horizontaal

Nieuw: bij hoveren over vlag verschijnt gedraaide tekst (transform): voorbeeld 93 uitleg 93

8 november 2010: schaduw

Gewijzigd: tekst met schaduw zonder gebruik van plaatjes of dubbele tekst (text-shadow): voorbeeld 70 uitleg 70

Volledig herschreven vanwege verbeteringen in browsers. Nieuw voorbeeld toegevoegd met doorzichtige schaduw.

22 oktober 2010: schaduw

Nieuw: schaduwen zonder gebruik van afbeeldingen (box-shadow): voorbeeld 92 uitleg 92

27 september 2010: menu → knoppen (plat)

Gewijzigd: menu met knoppen. Tekst bij hoveren verschilt afhankelijk van bezocht/onbezocht: voorbeeld 23 uitleg 23

Door een lek in alle browsers kon een kwaadaardige site de geschiedenis van bezochte sites achterhalen. Dit lek is al in enkele browsers gedicht, de rest volgt binnenkort. Daardoor werkte dit voorbeeld niet meer. In gewijzigde vorm werkt het nu weer.

22 september 2010: menu → knoppen (plat)

Gewijzigd: menu met knoppen die verkleuren, afhankelijk van of link al is bezocht: voorbeeld 22 uitleg 22

18 september 2010: menu → knoppen (diepte)

Gewijzigd: menu met knoppen met ronde rand, die aangeeft of link al bezocht is of nog niet: voorbeeld 21 uitleg 21

12 september 2010: menu → knoppen (diepte)

Gewijzigd: menu met knoppen met rand, die aangeeft of link al bezocht is of nog niet: voorbeeld 20 uitleg 20

7 september 2010: kader

Nieuw: Ronde hoeken zonder gebruik van afbeeldingen (border-radius): voorbeeld 91 uitleg 91

2 september 2010: menu → knoppen (plat)

Gewijzigd: menu met knoppen met voorvertoning en indicatie bezocht/onbezocht: voorbeeld 19 uitleg 19

In alle browsers zit een beveiligingslek, waardoor het voor een kwaadaardige site kinderlijk eenvoudig is bezochte sites te achterhalen. Safari heeft dit gat gedicht, en binnenkort volgen meer browsers. Daardoor worden de mogelijkheden om een bezochte link op te maken met css heel sterk beperkt. Hierdoor werkte dit voorbeeld niet meer, nu weer wel.

Om dezelfde reden op de site zelf het systeem met vinkjes en vraagtekens voor bezochte en niet-bezochte pagina's aangepast.

De afgelopen tijd is uitgebreid gewerkt met Jaws, een schermlezers. Dit heeft geleid tot nogal wat veranderingen binnen de pagina's met uitleg. Geleidelijk aan zullen de bestaande pagina's worden aangepast. Met een 'normale' browser zul je hier helemaal niets van merken.

De verbeteringen zullen ook doorwerken in de voorbeelden. Deze waren in de regel al relatief goed toegankelijk, maar sommige dingen konden nog wat beter.

2 augustus 2010: links

Gewijzigd: pagina met links toegankelijker gemaakt. Na testen met Jaws, een schermlezer, bleek een aantal dingen beter te kunnen. En omdat geen rekening meer wordt gehouden met Internet Explorer 6, waren die verbeteringen nu ook daadwerkelijk mogelijk.

Jaws gaat routinematig gebruikt worden om dingen te testen. Eerst nog wat oefenen op de site zelf, maar uiteindelijk zal alles ook getest gaan worden in deze schermlezer.

30 juli 2010: artikelen

Gewijzigd: alle artikelen maken nu gebruik van een stylesheet voor het printen.

22 juni 2010:

Inmiddels alles weer opnieuw geïnstalleerd en zo. Voor Internet Explorer 6 zou een oude versie van Windows geïnstalleerd moeten. Dat gaat wat lastig. Het zou wel lukken, maar het kost wat moeite. Omdat er toch al langere tijd plannen waren om niet meer te testen op Internet Explorer 6, lijkt dit het juiste moment.

Vanaf nu wordt dus niet meer getest in Internet Explorer 6. En worden daar dus ook geen aanpassingen meer voor gemaakt. Oudere voorbeelden zullen gewoon blijven werken, want Internet Explorer 6 verandert niet. Maar nieuwe voorbeelden worden niet meer getest in deze zwaar verouderde browser.

Bij elk voorbeeld kun je onder Getest in precies vinden voor welke browsers is getest. Zodra iets wordt gewijzigd in een bestaand voorbeeld, wordt daar bij Getest in Internet Explorer 6 verwijderd, omdat de wijziging niet meer kon worden getest.

Er is voor particulieren echt geen enkele reden om deze rotbrowser nog te gebruiken. Bedrijven kunnen voor intern gebruik aan Internet Explorer 6 vast zitten, als ze in het verleden zo stom zijn geweest om dingen te maken die alleen in deze browser werken. Maar voor gebruik op Internet kunnen ze 'n andere browser toestaan. Als ze dat niet doen, is dat hun probleem.

17 juni 2010:

Forse hardware-problemen gehad. Als het goed is zijn die nu opgelost en kan er weer wat aan de site worden gedaan.

Bij het testen op toegankelijkheid is WebFormator weggevallen. De sneltoets om WebFormator te starten is dezelfde als de sneltoets om de ingebouwde ontwikkeltools in Internet Explorer 8 te starten. In plaats van WebFormator wordt nu Fangs Screen Reader Emulator gebruikt.

18 mei 2010: forum

Nieuw: forum toegevoegd aan de site. Omdat de tijd ontbreekt om alle vragen per e-mail te beantwoorden, wordt dat hopelijk op deze manier opgelost. Hopelijk gaan meer mensen hier vragen beantwoorden: forum

9 mei 2010: positioneren → kolom

Nieuw: twee of meer kolommen gemeenschappelijke rand en/of achtergrond geven: voorbeeld 89 uitleg 89

21 maart 2010: overig → lijst

Nieuw: positie, kleur, symbool, enzovoort in een lijst wijzigen: voorbeeld 84 uitleg 84

11 maart 2010: lay-out → meer kolommen

Nieuw: drie kolommen, middelste kolom flexibele breedte, vaste rechter- en linkerkolom, vaste header: voorbeeld 83 uitleg 83

28 februari 2010: figuren → grafiek

Nieuw: makkelijk aan te passen verticale staafdiagrammen: voorbeeld 81 uitleg 81

23 februari 2010: afbeelding → video & audio

Nieuw: video in vrijwel elke browser zonder dat JavaScript of installeren van plug-ins nodig is: voorbeeld 80 uitleg 80

28 december 2009: tekst → effecten

Nieuw: ondoorzichtige tekst op doorzichtige achtergrond, gebruikt rgba: voorbeeld 78 uitleg 78

13 december 2009: afbeelding → overig

30 november 2009: tekst → effecten

Nieuw: initiaal ('drop cap') met en zonder gebruik van plaatje: voorbeeld 75 uitleg 75

2 november 2008: menu → knoppen (plat)

Gewijzigd: menu met knoppen. Bij hoveren verandert de afbeelding: voorbeeld 27 uitleg 27

Beter toegankelijk gemaakt.

7 oktober 2009: afbeelding → verbergen

29 september 2009: overig → lijst

Nieuw: sitemap met lijnen. Gebruikt geen plaatjes: voorbeeld 71 uitleg 71

18 september 2009: schaduw

Nieuw: tekst met schaduw zonder gebruik van plaatjes of dubbele tekst (text-shadow): voorbeeld 70 uitleg 70

7 september 2009: menu → statisch → horizontaal

Gewijzigd: menu met verkleurende knoppen met indicatie van huidige, bezochte en onbezochte pagina's: voorbeeld 8 uitleg 8

Op een of andere manier is dit menu totaal niet gecontroleerd op toegankelijkheid. Alsnog gedaan, wat 'n aantal wijzigingen in de code opleverde.

3 september 2009: kader

Nieuw: dubbel kader met ronde hoeken. Hoogte groeit mee met inhoud: voorbeeld 69 uitleg 69

26 augustus 2009: positioneren → horizontaal

Nieuw: horizontaal én verticaal centreren van blok-element met bekende hoogte en breedte: voorbeeld 68 uitleg 68

12 augustus 2009: menu → dynamisch → horizontaal

Nieuw: simpel uitklapmenu, twee niveaus diep: voorbeeld 66 uitleg 66

3 augustus 2009: overig → lijst

Nieuw: lijst met automatische nummering en bijpassende (lelijke) lay-out: voorbeeld 65 uitleg 65

25 juli 2009

Naslag weer verwijderd. 't Idee was leuk, maar 't was óf zo klein dat 't nutteloos was, óf zo uitgebreid dat 't veel te groot werd. De Naslag werd zelfs groter dan de handleidingen waar ze bij stond.

Ook de reactie-mogelijkheid weer verwijderd omdat 't soms wel tien seconden duurde voordat 't was geladen. Dat is nog niet zo erg, maar daarna werd de pagina weer helemaal bovenaan gezet. Bovendien werkte 't regelmatig helemaal niet.

15 juli 2009: artikelen

Nieuwe categorie: artikelen. Dat zijn er nu nog maar twee, maar zullen er geleidelijk aan meer worden: artikelen

Nieuw: artikelen → html → head: charset, tekenset, utf-8, entiteiten, accenten, en dergelijke: artikel 64

25 mei 2009: tekst → lijnen

Nieuw: schaalbare inhoudsopgave met voorlooppunten: voorbeeld 62 uitleg 62

15 mei 2009: lay-out → twee kolommen

Nieuw: twee even hoge kolommen met vaste breedte, menubalk en header: voorbeeld 61 uitleg 61

12 mei 2009: figuren → grafiek

Nieuw: makkelijk aan te passen horizontale staafdiagrammen: voorbeeld 60 uitleg 60

3 mei 2009: figuren → driehoek

Nieuw: schaalbare driehoeken zonder gebruik van een afbeelding: voorbeeld 59 uitleg 59

19 april 2009: afbeelding → slideshow

Verbeterd: slideshow met horizontale rij thumbnails en foto's. Gebruikt weinig bandbreedte: voorbeeld 55 uitleg 55

In Internet Explorer 8 werkte dit door 'n bug alleen in de compatibiliteitsweergave (zoals Internet Explorer 7). Door wat css speciaal voor Internet Explorer 8 werkt deze nu ook in standaardmodus. Waarmee alle voorbeelden nu ook in Internet Explorer 8 in standaardmodus werken.

14 april 2009: afbeelding → veranderen

Verbeterd: van boven, onder of opzij tijdelijke nieuwe afbeelding over bestaande afbeelding slepen: voorbeeld 33 uitleg 33

In Internet Explorer 8 werkte dit alleen in de compatibiliteitsweergave (zoals Internet Explorer 7). Door twee kleine aanpassingen werkt het nu ook in de standaardmodus van Internet Explorer 8.

13 april 2009: afbeelding → veranderen

Verbeterd: van bovenaf tijdelijke nieuwe afbeelding over bestaande afbeelding slepen: voorbeeld 32 uitleg 32

In Internet Explorer 8 werkte dit alleen in de compatibiliteitsweergave (zoals Internet Explorer 7). Door een kleine aanpassing werkt het nu ook in de standaardmodus van Internet Explorer 8.

13 april 2009: tekst → effecten

Verbeterd: bij overflow wordt tekst onderaan langzaam vager: voorbeeld 57 uitleg 57

Door een bug in Internet Explorer 8 kwam de afbeelding die voor het vervagen zorgt over de volledige tekst te staan en moest dit voorbeeld in compatibiliteitsweergave (zoals Internet Explorer 7) worden weergegeven. Nu werkt dit ook goed in de standaardmodus van Internet Explorer 8.

12 april 2009: afbeelding → veranderen

Verbeterd: tijdelijk afbeelding door slepen van bovenaf laten overvloeien in nieuwe afbeelding: voorbeeld 53 uitleg 53

Omdat ook Internet Explorer 8 nog steeds niet de standaardwijze van opacity ondersteunt, moest dit voorbeeld in compatibiliteitsweergave (zoals Internet Explorer 7) worden weergegeven. Nu werkt dit ook goed in de standaardmodus van Internet Explorer 8.

12 april 2009: afbeelding → thumbnails

Verbeterd: hover over een van de thumbnails en de bijbehorende grote afbeelding met bijschrift verschijnt: voorbeeld 16 uitleg 16

Door een bug in Internet Explorer 8 bleven alle afbeeldingen geopend als je de Tab-toets gebruikte en moest dit voorbeeld in compatibiliteitsweergave (zoals Internet Explorer 7) worden weergegeven. Nu werkt dit ook goed in de standaardmodus van Internet Explorer 8.

11 april 2009: afbeelding → slideshow

Verbeterd: slideshow met thumbnail en foto's van verschillende grootte. Gebruikt weinig bandbreedte: voorbeeld 11 uitleg 11

Verbeterd: slideshow met verticale rij thumbnails en foto's van verschillende grootte. Gebruikt weinig bandbreedte: voorbeeld 39 uitleg 39

Door een bug in Internet Explorer 8 bleven (alleen in de download) alle afbeeldingen geopend als je de Tab-toets gebruikte en moest dit voorbeeld in compatibiliteitsweergave (zoals Internet Explorer 7) worden weergegeven. Nu werkt dit ook goed in de standaardmodus van Internet Explorer 8.

10 april 2009: Internet Explorer 8

Pfff, alles gecontroleerd. Internet Explorer is de enige browser waar je bij elke nieuwe versie álles uitgebreid moet controleren.

Van de 57 voorbeelden zijn er maar liefst negen die niet goed werken. Aangezien alle code aan de standaard voldoet, en aangezien alles werkt in alle andere browsers, wordt de conclusie over Internet Explorer 8 en of die volledig conform de standaard is, zoals Microsoft beweert, maar aan de lezer overgelaten.

Deze negen voorbeelden worden omgewerkt, zodat ze ook in de standaardmodus van Internet Explorer 8 werken. Tot die tijd worden deze voorbeelden in compatibiliteitsweergave (zoals Internet Explorer 7) weergegeven. In de betreffende voorbeelden wordt dit vermeld.

30 maart 2009: Internet Explorer 8

De bugs en afwijkingen van Internet Explorer 8 lijken toch mee te vallen en niet groter te zijn dan bij andere browsers die de standaard respecteren. Het grootste probleem schijnt iets met z-index te zijn, en toevallig hadden de eerste voorbeelden die grondig werden getest daar allemaal mee te maken.

Evenzogoed zal het wel even duren voor alles goed is getest en, als dat nodig is, aangepast.

24 maart 2009: Internet Explorer 8

Het was te mooi... Internet Explorer 8 wijkt op belangrijke punten zoals z-index nog steeds af van de standaard. Heel fijn, nu heb je drie versies van deze baggerbrowser naast elkaar, die alle drie volkomen verschillend werken en geen van drieën volledig volgens de standaard.

Op de plaatsen waar dit speelt komt dit geleidelijk aan in de uitleg erbij te staan. Wel jammer, bij de eerste vluchtige controle leek het 'n goeie browser wat betreft standaarden. Maar ook dit Microsoft-product geeft valid code die goed werkt in alle andere browsers dus regelmatig verkeerd weer.

23 maart 2009: Internet Explorer 8

Op dit moment wordt alles uitgebreid getest in Internet Explorer 8. Zodra 'n voorbeeld is getest, staat Internet Explorer 8 in het voorbeeld bij de geteste browsers. Pas als alle voorbeelden zijn getest, wordt Internet Explorer 8 ook op de 'algemene' pagina's bij de geteste browsers gezet.

Het ongelooflijke is gebeurd: het lijkt erop dat Microsoft eindelijk 'n fatsoenlijke browser heeft gemaakt, wat betreft de standaarden. Bij 'n eerste vluchtige scan leek het overgrote deel van de voorbeelden goed te werken. Dat betekent dat Internet Explorer 8 goed werkt op dezelfde code als Safari, Firefox, Opera en Google Chrome. Maar eigenlijk is dat pas zeker als Internet Explorer 8 bij de geteste browsers staat.

21 maart 2009: tekst → effecten

Nieuw: bij overflow wordt tekst onderaan langzaam vager: voorbeeld 57 uitleg 57

11 maart 2009: afbeelding → slideshow

Nieuw: slideshow met horizontale rij thumbnails en foto's. Gebruikt weinig bandbreedte: voorbeeld 55 uitleg 55

8 februari 2009: menu → afbeelding

Nieuw: menu met afbeelding. Elke link heeft 'n bijbehorende vergrote uitsnede: voorbeeld 54 uitleg 54

2 februari 2009

Waar nu aan wordt gewerkt, kostte iets meer tijd (eufemisme) dan werd gedacht. Over niet al te lange tijd dus weer iets nieuws.

Intussen worden alle handleidingen geleidelijk aan (waar van toepassing) uitgebreid met 'n stukje over :focus, :hover en :active. Op 'n aantal punten worden de handleidingen, naar aanleiding van vragen van mensen die iets niet begrepen, iets duidelijker herschreven. Inmiddels is ook ongeveer de helft van de voorbeelden getest voor Google Chrome. Er was slechts één kleine aanpassing nodig tot nu toe.

Door een verkeerde instelling van mij in OpenOffice waren alle pdf-bestanden ruim twee keer te groot. Hoe stom kun je zijn, grinnik. Dit wordt ook geleidelijk aan weer gecorrigeerd.

7 januari 2009: afbeelding → veranderen

Nieuw: tijdelijk afbeelding door slepen van bovenaf laten overvloeien in nieuwe afbeelding: voorbeeld 53 uitleg 53

4 januari 2009: afbeelding → veranderen

Verbeterd: van boven, onder of opzij tijdelijke nieuwe afbeelding over bestaande afbeelding slepen: voorbeeld 33 uitleg 33

Bij slepen vanaf rechts flitste de vervangende afbeelding heel even volledig tevoorschijn in Safari. Nu niet meer.

28 december 2008: tekst → invoegen (SSI)

Nieuw: tekst uit een ander bestand invoegen met Server Side Includes (SSI): voorbeeld 52 uitleg 52

13 december 2008: figuren → pijl

Nieuw: pijl met tekst erin. Pijl past zich aan lettergrootte aan: voorbeeld 49 uitleg 49

2 december 2008: afbeelding → thumbnails

Verbeterd: hover over een van de thumbnails en de bijbehorende grote afbeelding met bijschrift verschijnt

Het openen van de achter de thumbnails liggende pagina gebeurde bij Internet Explorer 6 en 7 alleen maar als precies op de getallen werd geklikt. Door het toevoegen van hoogte, breedte, cursor en doorzichtig achtergrondplaatje werkt het nu boven de hele thumbnail. voorbeeld 16 uitleg 16

4 november 2008: sitemap met thumbnails

Toegevoegd: sitemap met thumbnails. Deze is precies hetzelfde als de gewone sitemap, maar met voorvertoningen in de vorm van thumbnails en pop-ups. Omdat dat nogal veel bandbreedte kan kosten, blijft de sitemap zonder thumbnails gewoon bestaan. Sitemap met thumbnails

4 november 2008: tekst → illustraties

Nieuw: pagina met afbeelding, beschrijving en prijs van gereedschappen: voorbeeld 47 uitleg 47

22 oktober 2008: afbeelding → imagemap

Nieuw: css-imagemap: landkaart met pop-ups van uitsnedes en extra informatie: voorbeeld 46 uitleg 46

13 oktober 2008: menu → statisch → verticaal

Nieuw: verticaal menu met tekeningen. Bij hoveren verkleuren ze: voorbeeld 45 uitleg 45

11 oktober 2008: positioneren → afbeelding

Nieuw: afbeelding boven andere afbeelding centreren: voorbeeld 44 uitleg 44

4 oktober 2008: tekst → illustraties

Nieuw: tekst uitlijnen naast een ronde afbeelding: voorbeeld 43 uitleg 43

29 september 2008: afbeelding → veranderen

Nieuw: afhankelijk van over welk plaatje je hovert, veranderen 1 tot 4 plaatjes tijdelijk: voorbeeld 42 uitleg 42

26 september 2008: lay-out → meer kolommen

Nieuw: drie kolommen, middelste kolom flexibele breedte, header en footer: voorbeeld 41 uitleg 41

16 september 2008: kader

Nieuw: doorzichtig kader met ronde hoeken. Hoogte groeit mee met inhoud: voorbeeld 40 uitleg 40

12 september 2008: afbeelding → slideshow

Nieuw: slideshow met verticale rij thumbnails en foto's van verschillende grootte. Gebruikt weinig bandbreedte: voorbeeld 39 uitleg 39

7 september 2008: afbeelding → slideshow

Nieuw: slideshow met thumbnail en foto's van verschillende grootte. Gebruikt weinig bandbreedte: voorbeeld 11 uitleg 11

11 augustus 2008: menu → afbeelding

Gewijzigd: menu voor kinderen met tekening en pop-ups. Elk puzzelstukje is een link: voorbeeld 14 uitleg 14

Werkt nu ook goed met de nieuwe zoom-functie van Firefox 3. Als 'toevallige' bijwerking kan nu ook probleemloos de lettergrootte worden veranderd. Details onder Wijzigingen bij de uitleg.

10 augustus 2008: lay-out → Twee kolommen

Herschreven: twee kolommen, rechterkolom flexibele breedte, vaste linkerkolom, vaste header en vaste footer: voorbeeld 1 uitleg 1

De nieuwe zoom-functie in Firefox 3 zorgde voor kieren tussen de onderdelen. Gelijk zo herschreven dat hij in alle browsers 'n stuk simpeler werkt, en in Internet Explorer 6 (dus) iets lastiger. Details staan in de uitleg bij Wijzigingen.

7 augustus 2008: lay-out → twee kolommen

Herschreven: twee kolommen, rechterkolom flexibele breedte, vaste linkerkolom en vaste header: voorbeeld 4 uitleg 4

4 augustus 2008: afbeelding → imagemap

Gewijzigd: css-imagemap: thumbnail met pop-ups met voorvertoning en extra informatie: voorbeeld 25 uitleg 25

Werkt nu ook goed met de nieuwe zoom-functie in Firefox. Gelijk verbeterd: bij vergroten van alleen de letters verdwijnt het onderschrift onder de thumbnail niet meer gedeeltelijk.

27 juli 2008: afbeelding → thumbnails

Verbeterd: hover over een van de thumbnails naast de tekst en de bijbehorende grote afbeelding verschijnt: voorbeeld 17 uitleg 17

Bij in- en uitzoomen in Internet Explorer 7 verdween een deel van het onderschrift onder de afbeelding, als dat meerregelig was.

25 juli 2008: afbeelding → veranderen

Verbeterd: van boven, onder of opzij tijdelijke nieuwe afbeelding over bestaande afbeelding slepen: voorbeeld 33 uitleg 33

Bij gebruik van de nieuwe zoom-functie in Firefox 3 bleef er aan de onderkant en aan de zijkanten een kier over.

(Oenige) typefout in download waardoor slepen vanaf links in Internet Explorer 7 niet werkte.

23 juli 2008: afbeelding → veranderen

Verbeterd: van bovenaf tijdelijke nieuwe afbeelding over bestaande afbeelding slepen: voorbeeld 32 uitleg 32

Bij gebruik van de nieuwe zoom-functie in Firefox 3 bleef er aan de onderkant een kier over.

21 juli 2008: menu → dynamisch → horizontaal

Verbeterd: simpel uitklapmenu, tot vier niveaus diep: voorbeeld 35 uitleg 35

Bij inzoomen in Firefox 3 met de nieuwe zoom-functie pasten de knoppen niet meer altijd naast elkaar.

In bepaalde situaties veranderde het menu in moderne kunst bij zoomen in Internet Explorer 7. Mooi, maar onbegrijpelijk.

Diverse kleine wijzigingen.

20 juli 2008: menu → knoppen (diepte)

Verbeterd: menu met knoppen met ronde rand, die aangeeft of link al bezocht is of nog niet: voorbeeld 21 uitleg 21

De nieuwe zoom-functie van Firefox 3 gaf problemen met deze knoppen. Nu werkt het weer overal goed.

14 juli 2008: pagina met links

Nieuw: pagina met links: links

5 juli 2008: Konqueror

Er wordt niet meer getest in Konqueror. Konqueror heeft heel erg veel dingen die anders werken dan in Safari, Firefox en Opera. Nou geldt dat ook voor Internet Explorer 7 en zeker voor Internet Explorer 6, maar Konqueror wordt door maar heel weinig mensen gebruikt. De tijd die het kost om dingen werkend te krijgen in Konqueror weegt niet meer op tegen het kleine aantal mensen dat het gebruikt.

Voor zover bekend werken alle andere browsers die op Linux draaien (met uitzondering van Opera) met Gecko. Dat is de weergave-machine van Firefox, dus alle andere browsers op Linux zullen in principe gewoon goed werken.

Dit betekent ook dat geleidelijk aan alle aanpassingen voor Konqueror worden verwijderd uit de voorbeelden, waardoor deze soms 'n heel stuk simpeler kunnen worden.

Het zal nog even duren voor overal op de site is verwijderd dat ook in Konqueror is getest. Als het nog in 'n voorbeeld staat, is het in dat voorbeeld nog getest in Konqueror.

Geleidelijk aan wordt ook de ondersteuning voor Internet Explorer 6 afgebouwd. Deze weerzinwekkend slechte en onveilige browser had allang verdwenen moeten zijn. Als iets niet (volledig) werkt in Internet Explorer 6, zal dat wel steeds worden gemeld bij het betreffende voorbeeld. En in principe wordt ook geprobeerd het ook gewoon te laten werken in Internet Explorer 6, maar sommige dingen kunnen gewoon niet in dat wanproduct, terwijl het wel in alle andere browsers goed werkt. En inmiddels gebruiken niet zoveel mensen nog Internet Explorer 6.

28 juni 2008: positioneren → tekst

Nieuw: verticaal op gelijke afstand zetten van tekst (zoals centreren): voorbeeld 38 uitleg 38

25 juni 2008: tekst → illustraties

Nieuw: Bij hoveren over sommige woorden komt 'n bijpassende afbeelding tevoorschijn: voorbeeld 37 uitleg 37

17 juni 2008: afbeelding → veranderen

Gewijzigd: van boven, onder of opzij tijdelijke nieuwe afbeelding over bestaande afbeelding slepen: voorbeeld 33 uitleg 33

Werkt nu ook (min of meer) in Internet Explorer 6.

15 juni 2008: afbeelding → veranderen

Gewijzigd: van bovenaf tijdelijke nieuwe afbeelding over bestaande afbeelding slepen: voorbeeld 32 uitleg 32

Werkt nu ook (min of meer) in Internet Explorer 6.

10 juni 2008: menu → dynamisch → verticaal

Nieuw: simpel uitklapmenu, tot drie niveaus diep: voorbeeld 36 uitleg 36

2 juni 2008: menu → dynamisch → horizontaal

Nieuw: simpel uitklapmenu, tot vier niveaus diep: voorbeeld 35 uitleg 35

25 mei 2008: positioneren → horizontaal

Nieuw: horizontaal positioneren van pagina of blok-element met bekende breedte: voorbeeld 34 uitleg 34

12 mei 2008: afbeelding → veranderen

Nieuw: van boven, onder of opzij tijdelijke nieuwe afbeelding over bestaande afbeelding slepen: voorbeeld 33 uitleg 33

8 mei 2008: afbeelding → veranderen

Verbeterd: van bovenaf tijdelijke nieuwe afbeelding over bestaande afbeelding slepen: voorbeeld 32 uitleg 32

Nieuwe afbeelding openen gebeurt nu alleen als de cursor van boven komt. Nieuwe afbeelding floept niet gelijk meer dicht als je 1 px te laag komt.

Niet verder vertellen, maar dit was dus kennelijk niet goed genoeg getest en zo...

4 mei 2008: afbeelding → veranderen

Nieuw: van bovenaf tijdelijke nieuwe afbeelding over bestaande afbeelding slepen: voorbeeld 32 uitleg32

1 mei 2008: tekst → effecten

Nieuw: ondoorzichtige tekst op meegroeiende doorzichtige achtergrond, gebruikt opacity: voorbeeld 31 uitleg 31

22 april 2008: positioneren → footer & header

Nieuw: footer altijd onderaan venster of lager ('sticky footer'): voorbeeld 30 uitleg 30

18 april 2008: tekst → ankers

Nieuw: doorlopende lange tekst met inhoudsopgave. Inhoudsopgave en tekst kunnen onafhankelijk van elkaar scrollen: voorbeeld 29 uitleg 29

13 maart 2008

Over 'n tijdje komen er weer nieuwe dingen. Nu er wat inhoud op de site staat, wordt eerst alles nog 'ns aan 't nagelopen en de navigatie aan 't verbeteren en zo.

8 februari 2008: menu → knoppen (plat)

Uitgebreid: menu met knoppen met voorvertoning en indicatie bezocht/onbezocht: voorbeeld 19 uitleg 19

Grotere voorvertoning die gescrold kan worden toegevoegd.

31 januari 2008: menu → knoppen (plat)

Nieuw: menu met knoppen. Bij hoveren verandert de afbeelding: voorbeeld 27 uitleg 27

26 januari 2008: afbeelding → imagemap

Nieuw: css-imagemap: thumbnail met pop-ups met voorvertoning en extra informatie: voorbeeld 25 uitleg 25

10 januari 2008: menu → knoppen (plat)

Nieuw: menu met knoppen. Tekst bij hoveren verschilt afhankelijk van bezocht/onbezocht: voorbeeld 23 uitleg 23

5 januari 2008: menu → knoppen (plat)

Nieuw: menu met knoppen die verkleuren, afhankelijk van of link al is bezocht: voorbeeld 22 uitleg 22

3 januari 2008: menu → knoppen (diepte)

Nieuw: menu met knoppen met ronde rand, die aangeeft of link al bezocht is of nog niet: voorbeeld 21 uitleg 21

2 januari 2008: menu → knoppen (diepte)

Nieuw: menu met knoppen met rand, die aangeeft of link al bezocht is of nog niet: voorbeeld 20 uitleg 20

1 januari 2008: menu → knoppen (plat)

Nieuw: menu met knoppen met voorvertoning en indicatie bezocht/onbezocht: voorbeeld 19 uitleg 19

29 december 2007: afbeelding → thumbnails

Nieuw: hover over een van de thumbnails naast de tekst en de bijbehorende grote afbeelding verschijnt: voorbeeld 17 uitleg 17

26 december 2007: afbeelding → thumbnails

Nieuw: hover over een van de thumbnails en de bijbehorende grote afbeelding met bijschrift verschijnt: voorbeeld 16 uitleg 16

17 december 2007: menu → afbeelding

Nieuw: menu voor kinderen met tekening en pop-ups. Elk puzzelstukje is een link: voorbeeld 14 uitleg 14

6 december 2007: lay-out → één kolom

Nieuw: middenkolom met vaste breedte, zijvleugels en vaste footer: voorbeeld 13 uitleg 13

25 november 2007: menu → statisch → horizontaal

Nieuw: verkleurende knoppen met toelichting en indicatie van huidige, bezochte en onbezochte pagina's: voorbeeld 12 uitleg 12

22 november 2007: algemeen

Toegevoegd: aan alle handleidingen links naar sites en programma's om toegankelijkheid te controleren.