Uitleg conversie frames naar iframes

Kees Pippel

Voor beheerders die een website willen converteren van frames naar iframes.

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)

Stappenplan Iframes

Stap 1 Plaats Iframe
Stap 2 Plaats Footer
Stap 3 Plaats Header

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).

Stap 4 Plaats Navbar
Weer wacht ons een onaangename verrassing (stap4a): de iframe is nu geplaats onder de navigatie bar en niet ernaast. Als we de breedte van het iframe op 90% zetten, dan zien we het probleem: een stukje lege ruimte tussen de navigatie bar en het iframe. Google iets als "Fighting the Space Between Inline Block Elements" en we zien dat het probleem veroorzaakt wordt door de spaties vóór <frame>. Dit lossen we op en plaatsen wat commentaar om te voorkomen dat we hier weer in trappen: het resultaat is: (stap4b).
Stap 4 Plaats Rbar
We hebben nu alle problemen gehad en het plaatsen van de right bar gaat zonder problemen: (stap5)

Oude versies van Internet Explorer (IE)

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).

Versieringen

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.

Verticaal centreren: een kunst apart

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:

Verticaal gecentreerd !

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.

>>>>

Dit blokje is vertikaal gepositioneerd

via de baseline van het ghost element!
>>>>

Vervolgens verwijderen we het 'ghost' element (>>>>) en na horizontaal centreren, wordt het resultaat:

Horizontaal en vertikaal gecentreerd !

Verticaal centreren via de basislijn van het ghost element

Bronnen:

[1] http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug.
[2] http://en.wikibooks.org/wiki/Cascading_Style_Sheets/Box_Model.

Terug