Tekst → Lijnen

Combinaties van lijnen en tekst, zoals de stippellijntjes (voorlooppunten) in een inhoudsopgave. Onderstrepen, overstrepen en doorstrepen van tekst.

Gevonden fouten en ideeën zijn welkom op het forum. Daar kun je ook terecht voor vragen op het gebied van het maken van sites, met name over de in de voorbeelden gebruikte css en html.

Omdat de afdeling Tekst te groot werd voor één pagina, is die gesplitst. Dit is een van de sub-pagina's.

Bij openen van de pagina staan thumbnails van de voorbeelden op het scherm. In bredere vensters staat op een nog niet bezochte thumbnail een vraagteken, op een al bezochte een vinkje.

Als je in bredere vensters met de cursor over een thumbnail hovert, opent een grotere afbeelding van het voorbeeld. Op een touchscreen kun je hetzelfde bereiken door aanraking, behalve in smalle vensters.

Top

Over de site

Alle voorbeelden zijn te downloaden als zip-bestand. De zip bevat de code van het werkende voorbeeld, inclusief de gebruikte plaatjes en dergelijke. Het gedownloade voorbeeld is vrijwel precies hetzelfde als dat op de site. (Er zitten wat kleine verschillen in, omdat bijvoorbeeld de navigatieknoppen van de site ontbreken.) Verder zit in de download een uitgebreide uitleg in pdf-formaat.

Alles op deze site kan vrij worden gebruikt. Je gebruikt het wel op eigen risico: als er ergens fouten in zitten, ben ik daar niet verantwoordelijk voor en ook niet voor eventueel daardoor aangerichte schade in welke vorm dan ook. Een link naar http://www.css-voorbeelden.nl is niet verplicht, maar wordt wel gewaardeerd.

Eventuele problemen worden steeds bij het voorbeeld zelf vermeld.

De voorbeelden zijn bedoeld om te laten zien, wat de mogelijkheden van css zijn. Je kunt ze (volledig) aanpassen aan je eigen smaak en wensen. Laat je dus niet afschrikken door de door mij gebruikte kleuren, maten, en dergelijke.

Hoe je het voorbeeld precies kunt aanpassen, verschilt van voorbeeld tot voorbeeld en zal meestal enig denkwerk vereisen. Als je met dit soort constructies wilt werken en je wilt die aanpassen, is het beslist nodig dat je je 'n beetje verdiept in html en css.

Ooit stond hier een overzicht van browsers, resoluties, enz., waarin is getest. Inmiddels is het aantal combinaties van dat soort dingen dermate groot, en het verandert zo snel, dat een overzicht op deze plaats zinloos is. Er is getest in Opera, Safari, Google Chrome, Firefox en verschillende versies van Internet Explorer in allerlei resoluties op allerlei systemen met allerlei lettergroottes in allerlei zoom-standen. Nieuwere of bijgewerkte voorbeelden zijn ook in mobiele browsers zoals Android browser getest.

In de uitleg bij elk voorbeeld staat onder Getest in een uitgebreid overzicht, waarin dat voorbeeld precies is getest. Er is getest op allerlei mogelijke manieren. Uit die test kan prima tevoorschijn komen dat iets niet werkt in een bepaalde browser of zo. Daarom is het hoofdstukje Bekende problemen in de uitleg echt verplicht leesvoer.

In de regel is ook getest op toegankelijkheid met programma's als Lynx, WebbIE, Fangs Screen Reader Emulator en/of NVDA. In principe zijn de voorbeelden toegankelijk voor speciale programma's zoals schermlezers voor blinden en slechtzienden. Ook zijn de voorbeelden in principe goed toegankelijk, als in plaats van de muis het toetsenbord wordt gebruikt. Als er bij een voorbeeld problemen met toegankelijkheid zijn, wordt dat in de uitleg vermeld onder het kopje Toegankelijkheid en zoekmachines.

Voor zover (oudere versies van) Internet Explorer gebruik maken van afwijkende, foutieve css, heb ik gekozen voor 'conditional comments': code die alleen door Internet Explorer is te lezen. Hierdoor blijft de code voor fatsoenlijke browsers aan de w3c-standaard voldoen.

Tabellen worden alleen gebruikt, waar ze voor bedoeld zijn: voor de weergave van tabulaire gegevens, niet voor lay-out. Hier is een enkele uitzondering op, maar dat wordt bij het betreffende voorbeeld vermeld. Nergens levert het gebruik van (elementen van) een tabel problemen voor toegankelijkheid of zoekmachines op.

Frames en iframes worden nergens gebruikt: die hebben veel te veel nadelen, vooral voor speciale programma's zoals gehandicapten die gebruiken. (Overigens is 'n zoekmachine redelijk met 'n blinde te vergelijken, dus als je 'n slecht toegankelijke site maakt, scoor je meestal ook niet hoog in 'n zoekmachine).

Iets gevonden waar je wat aan hebt? Mooi. Als je je waardering wilt uiten, maak dan een donatie over aan War Child Nederland, een organisatie die kinderen uit oorlogsgebieden helpt hun trauma's te verwerken. Of - nog beter - wordt donateur:

Top

War Child Nederland