Pagina-opbouw
Hoi jeel2008,
Een snelle blik in de broncode levert: dat verbaast me nu helemaal niets!
De pagina begint
zonder Doctype, en dan schiet IE in de
quirksmode (fratsentoestand), d.w.z. dan wordt o.a. het boxmodel van ... IE5 (!) gehanteerd, dat niet spoort met de w3c-standaarden.
- Geeft allerlei afwijkingen met margins, paddings, breedtes en hoogtes!
- Hetzelfde overkomt IE trouwens ook, als je vóór het Doctype nog iets anders zet, bv. een commentaarregel.
=======
Pagina-opbouw
Ook (en juist!) voor testpagina's hoort de html-code en pagina-opbouw zo correct mogelijk te zijn:
- Eerst een geldig Doctype. Aan te bevelen: beginnen met Xhtml1.0 Strict, dat geeft bij validatie met de html-validator de meeste zonden aan (zie ook hier bij de webrichtlijnen.nl). Is dat allemaal mooi in orde, dan kan zo nodig het Doctype omgezet worden naar Xhtml1.0 Transitional (dat op een aantal punten vergevingsgezinder is) of naar Html5.
- Dan (bij xhtml) de goede xmlns-declaratie in de <html>-tag (zie hier), waarbij ook de attributen lang="nl" en xml:lang="nl" niet vergeten moeten worden. Of een andere voertaal, als die van de pagina geen NL is; o.a. van belang voor voorleesbrowsers.
- Dan de <head> met meteen daar achteraan de <meta>-regel met de charset, die de browsers vertelt welke interpretatie ze moeten geven aan alle volgende lettertekens in de code.
Aan te bevelen: de universele utf-8 (zie hier bij de webrichtlijnen.nl).
NB-1: En dan in je webeditor of Kladblok de pagina ook opslaan als utf-8; anders gaat het alsnog mis en kunnen er � komen bij bv. copyright-tekens, accent-letters en andere speciale lettertekens. Vergelijk bv. deze en deze.
NB-2: In de w3c-tips zetten ze de <title> nog vóór de charset, maar dan mis je eventuele bijzondere tekens in de title!
- Dan de <title> met de hoofd-trefwoorden van de pagina.
- Dan de description-meta met pagina-beschrijving (= het verklarende regeltje bij de zoekresultaten; met herhaling van de hoofd-trefwoorden en nog wat andere trefwoorden erbij geeft betere ranking).
- Dan de overige meta's, indien gewenst.
- Dan de <link>('s) naar stylesheet(s), maar niet de links naar de javascripts!
Javascripts houden het snel renderen en opleveren van de pagina tegen, en kunnen toch pas gaan werken als het renderen klaar is (zie bv. hier en hier bij de prima Best Practices for Speeding Up Your Web Site van Yahoo).
- Eventuele Conditional Comments voor IE.
- In de <body> zo veel mogelijk rubriceren in gelijksoortige dingen (bv. link-lijstjes in een list onderbrengen), en in de structuur de goede h1, h2, h3, enz. indeling aanhouden.
- Vlak voor de </body></html> de javascripts aanroepen, c.q. de settings van de scripts regelen.
NB-1: sommige complexe scripts kunnen de plaatsing in de staart toch niet hebben, en moeten toch in de <head> komen. Werkt het niet, dan achtereenvolgens de scripts in de head zetten en kijken welke het is.
NB-2: Als er een script niet opgehaald wordt vanaf je eigen server, maar van een externe bron (bv. de Google Hosted Libraries, o.a. jquery, die uit googleapis.com komen), dan kunnen er parallelle downloads plaatsvinden en speelt de noodzaak voor het naar het eind verplaatsen niet zozeer.
=======
Nette lijstjes
Het voordeel van nette lijstjes is ook, dat ze veel makkelijker te stylen zijn.
In jouw bollen-bollen-pagina van hierboven staan de links koud onder elkaar op telkens een volgende regel: dat geeft een spatie tussen twee links, en bij hoveren L/R of R/L val je even in een gat waar geen link is.
- NB: de spatie-breedte is afhankelijk van het letterformaat = de bollen gaan dus schuiven bij opschalen lettergrootte door de bezoeker!
Test in Firefox: Ctrl-scrollwieltje.
Bij mijn voorbeeld in het andere topic heb ik ze in een <ul> opgenomen, en de <li>'s links tegen elkaar aan laten drijven, zodat ze naadloos tegen elkaar aan staan:
De tussenruimte van 5px zit als blanco stukje ingetekend in de sprite met de bollen-images, zodat geen margin nodig is (waardoor alsnog een gaatje zou ontstaan).
Met vriendelijke groet,
CSShunter
