Mijn-eigen-website.nl

Websitebouw voor doe-het-zelvers (zonder WordPress)

Leuke lijsten maken met html en css

Een lijst die op een opvallende manier is vormgegeven, geeft een saaie tekstpagina direct meer karakter!

Bestaan je webpagina’s voornamelijk uit tekst, en dreigen ze daardoor wat saai te worden, dan kun je ze verlevendigen door eventuele lijsten binnen die tekst een wat sprekender layout te geven. Op deze pagina heb ik vier voorbeelden staan van gewone lijsten, die eruitspringen door een bijzonder opsommingsteken, een heldere kleur, opvallende vorm, of een afwijkend lettertype.

Ongenummerde lijst, met bijzondere opsommingstekens

Het opsommingsteken uit de lijst hieronder is geen plaatje, maar een letter uit een speciaal font. Het font dat ik hiervoor heb gebruikt, is het Pointers font. Met behulp van de instructies over het gebruik van bijzondere lettertypes heb ik dit font omgezet in de vereiste bestandsformaten, deze geüpload naar mijn server, en mijn stylesheet aangepast, zodat de browsers de lettertype-bestanden kunnen vinden.

  • zondag

  • maandag

  • dinsdag

  • woensdag

  • donderdag

  • vrijdag

  • zaterdag

Ongenummerde lijst, met een randje links

De tweede lijst is een ongenummerde lijst, met een grijze achtergrondkleur voor de verschillende list items, en een rood blokje aan de linkerkant. Dat blokje is gewoon een brede border en de tekst heeft wat diepte gekregen doordat er een text-shadow aan toe is gevoegd.

  • zondag is de eerste dag van de week
  • maandag is de tweede dag van de week
  • dinsdag is de derde dag van de week
  • woensdag is de vierde dag van de week
  • donderdag is de vijfde dag van de week
  • vrijdag is de zesde dag van de week
  • zaterdag is de laatste dag van de week

Genummerde lijst, met getallen in een afwijkende kleur

De lijst hieronder is een genummerde lijst. De cijfers uit de opsomming hebben een afwijkende kleur gekregen, doordat ik de teksten binnen de list items tussen paragraaf-tags heb gezet. De paragrafen (de teksten van deze lijst dus) kunnen zo andere een andere opmaak krijgen dan de nummers. In dit voorbeeld hebben ze een andere kleur, een ander lettertype en een andere lettergrootte gekregen. Het streepje is weer niet meer dan een border van de paragraaf.

  1. zondag is de eerste dag van de week

  2. maandag is de tweede dag van de week

  3. dinsdag is de derde dag van de week

  4. woensdag is de vierde dag van de week

  5. donderdag is de vijfde dag van de week

  6. vrijdag is de zesde dag van de week

  7. zaterdag is de laatste dag van de week

Genummerde lijst met letters én cijfers

De laatste lijst heeft een opsomming die bestaat uit letters én cijfers. Deze lijst is op een ongebruikelijke manier gemaakt: de onderdelen staan namelijk niet tussen lijst-tags, maar gewoon tussen paragraaf-tags. De oplopende cijfers zijn gegenereerd met de css-eigenschappen counter-reset en counter-increment.

zondag is de eerste dag van de week

maandag is de tweede dag van de week

dinsdag is de derde dag van de week

woensdag is de vierde dag van de week

donderdag is de vijfde dag van de week

vrijdag is de zesde dag van de week

zaterdag is de laatste dag van de week