Het ontwerp van onze website in 2005 door Peter Pippel, is nu, juli 2012, toe aan een kleine opwaardering. De website is indertijd met Dreamweaver gemaakt, maar deze software is inmiddels verdwenen. Gevolg: uitbreidingen zijn onmogelijk. Verder is het mij opgevallen dat de website niet goed werkt op de ipad, en mogelijk ook niet op andere tablets. De website functioneert verder naar volle tevredenheid. Daarom heb ik er voor gekozen om de dreamweavercode te vervangen door CSS. Dit was een mooi opstapje, voor iemand die van CSS en HTML (nog) niets afwist.
Het probleem met de ipad wordt veroorzaakt door het gebruik van
frames door Dreamweaver.
Deze techniek werk zo: de pagina wordt horizontaal verdeeld in drie
onafhankelijke gebieden (frames): header, midden en footer.
Het midden wordt vervolgens verdeeld in een: navigatie kolom, de inhoud, en een
rechter kolom, voor aanvullende informatie.
De inhoud van het middengebied scrolt, en de overige gebieden blijven
altijd zichtbaar. Google News gebruikt bijvoorbeeld een navigatie bar,
die op zijn plaats blijft. Op het internet woedt een (bijna
theologische) discussie of frames 'goed' of 'slecht' zijn.
De nieuwe stijl is één pagina, die in zijn geheel beweegt, zoals we
zien bij Google Internet, NRC en Het Parool.
De 'frame-techniek' is inmiddels afgeschreven. In plaats daarvan worden de zogenaamde iframes toegepast. In eerste instantie dacht ik dat het omzetten een dagje werk zou zijn, maar dat viel erg tegen. De onervaren gebruiker (ik dus) ziet een webpagina als geheel: hier een foto, daar een stukje tekst, en weer ergens anders een diagram. Je denkt, dat op dit niveau ook bestuurd kan worden: stukje tekst centreren, foto's onder elkaar. HTML werkt echter puur sequentieel: er wordt een element op de pagina geplaatst, daarna weer één. Als het niet meer past, dan gaat het volgende element naar de volgende regel. En uiteindelijk ontstaat zo het resultaat. Wat er vaak anders uitziet dan je verwachtte of zou willen.
Bij het oplossen heb ik de volgende randvoorwaarden gehanteerd:
We plaatsen de website op een container die 64em (=1024px) breed is. De container positioneert zich in het midden van het scherm. Het gebruik van de container is niet essentieel, en kan ook worden weggelaten (=google-look)
De afmetingen waarmee we gaan werken zijn:
De afmetingen zijn min of meer willekeurig. Maar de oplossing is wel gebaseerd op het feit dat we de afmetingen van te voren kennen. We laten nu in een aantal stappen de oplossing zien. De lezer kan de gebruikte HTML en CSS lezen door de broncode van de pagina te bekijken (rechter-muisknop: paginabron bekijken)
Als we zonder enige voorbereiding de header plaatsen, dan zal de header terecht komen op de positie die bedoeld is voor het iframe. Dit lossen we op door op de header een negatieve margins toe te passen (undotop). Verder breiden we de header en de footer uit naar links en rechts. (undoleft, undoright) (stap3).
IE7Q respecteert de beneden kantlijn en plaatst de footer niet in het kantlijngebied, maar erna. Dit corrigeren we door een negative margin op de (bottom!) van de footer toe te passen (undobottom).
Bij het aankleden van de header, footer kan er nog veel mis gaan. Waar we vooral op moeten letten is dat de marges van de nieuwe elementen binnen de grenzen van de gekozen vakken blijven. Zo niet, dan stort het zorgvuldig geconstrueerde bouwwerk ineen.
Wanneer de titel uit één regel bestaat, dan is verticaal centreren eenvoudig. We stellen de line-height gelijk aan de hoogte van de header of footer. De baseline ligt ongeveer in het midden en het resultaat wordt:
Dit werkt uitsluitend voor één regel. CSS werkt volgens een ijzeren logica, maar het is niet altijd de logica die je zou verwachten. Text-align positioneert horizontaal binnen en box. Centreren is daarom eenvoudig. Je zou kunnen denken dat verticaal centreren ook zo eenvoudig is. Maar helaas, een vertical-align in een box doet helemaal niets. Vertical-align werkt namelijk binnen de linebox, zoals in het volgende voorbeeld:
Vertical-align: ---- Top Bottom Middle---- Superscript Subscript ---- Text-bottom Text-top ----
Inplaats van tekst, kunnen we een inline-block gebruiken, en binnen
het inline-block de titelregels. Een nadeel is dat we de line-height
terug moeten zetten naar de default waarde, en die is in principe niet
bekend.
Via een omweg kunnen we de vertical-align toch goed toepassen: We
gebruiken een 'ghost' element (Michal Czernov), en geven dit element dezelfde hoogte als de
header. De titel-regels die we willen centreren, worden gegroepeerd in
een inline-block. Dit inline-block gedraagt zich als een woord, en kan
naar wens gecentreerd worden.
Vervolgens verwijderen we het 'ghost' element (>>>>) en na horizontaal centreren, wordt het resultaat: