cssdesigner

CSS design voor een HTML5 pagina cross browser en W3C valide

Vergeet niet bij de zoekfunctie de sitenaam van de dns4.nl te veranderen in de naam van jouw site. Er is een heleboel in te stellen bij dit voorbeeld. Neem er rustig de tijd voor om te kijken hoe alles in elkaar zit. Dit voorbeeld is afgesteld op een scherm van 1024 bij 768. Op grotere schermen wordt de pagina gewoon gecentreerd weergegeven en bij kleinere afmetingen zorgt de browser ervoor dat er schuifbalkjes te voorschijn komen. De reden voor de vaste afmetingen is dat bij informatieve sites het niet de voorkeur heeft om liquid design toe te passen. Alles staat altijd precies op de zelfde plaats en dat heeft een rustgevend effect bij het lezen van de pagina. Als je de pagina aan het opmaken ben kan je ook exact bepalen waar de plaatjes moeten komen en hoe de tekst wordt geplaatst. Nooit verrassingen op deze manier...

De pagina zelf is HTML5 met CSS2. Niet nodig om te vermelden dat alles cross browser is, en dat de code van de html als van de CSS 100% valide is. Zonder dit gegeven zou de pagina overigens niet goed kunnen werken. In quirks-mode is het erg onvoorspelbaar hoe de code zich in verschillende browsers zal gaan gedragen. Je weet bijna al zeker dat er van de positionering niets terecht zal komen, en dat zelfs (Java)scripts hele rare dingen kunnen gaan doen als ze niet onder de "stricte mode" kunnen werken. Terzijde: De meeste problemen die mensen hebben als hun pagina's "raar" doen (of helemaal niet werken) is toch echt dat ze niet de W3C normen willen (of misschien niet kunnen) volgen. Het is een kleine moeite om zuivere code te maken; en dan opeens er achter komen dat het helemaal niet nodig is om hacks etc. toe te passen. Zo.. dat is wel genoeg tekst (denk ik) om de pagina een beetje te vullen.

DOWNLOAD HIER DE ZIPFILE VAN DIT VOORBEELD
Unzippen uploaden en draaien maar...