Ben's Hobbyhoekje -- Frames simuleren met CSS

Frames simuleren met CSS

In HTML 3 en 4 heb je de mogelijkheid om Frames te gebruiken. Daarmee verdeel je het browser-venster in een paar delen, elk met een eigen functie en desgewenst met een eigen opmaak. De huidige ontwikkelingen in HTML geven aan dat dit mechanisme gaat verdwijnen. Als alternatief wordt vaak CSS genoemd (Cascading Style Sheets).

Het bouwen van een website met CSS-frames vraagt behoorlijk wat ervaring. Je moet in elk geval goede kennis hebben van de HTML- en CSS-syntax. Daarbij zijn goede programmeervoorbeelden een krachtig hulpmiddel.
Deze pagina veronderstelt goede HTML- en CSS-kennis. Het is niet iets voor beginners.

Als je alle voordelen van frames na wilt bouwen in CSS leidt dat tot zeer ingewikkelde, dus lastig te onderhouden, code. Als je je echter beperkt tot het in beeld houden van het menu en een uniforme opmaak, kun je met CSS een heel eind komen.

Op deze bladzijde wordt in algemene termen besproken hoe je CSS kunt gebruiken om frames na te maken. Een aantal uitgewerkte voorbeelden vind je onderaan deze bladzijde.

De inhoud van deze bladzijde leunt zwaar op het werk van Stuart Nicholls. Deze Engelse webdesigner heeft een site over het gebruik van CSS: CSS play. Hoewel die site zich beperkt tot XHTML, is het een must voor iedereen die deze techniek wil toepassen. De omzetting HTML-XHTML is namelijk heel eenvoudig.

Tenslotte: Als je deze techniek toepast, doe het dan voor je hele website en niet alleen voor een enkele bladzijde. Anders gaat je site er onrustig uitzien. Bezoekers merken dat en gaan weg.

Als je browser alleen CSS 1 ondersteunt, zal het "frame-stuk" van de pagina uit beeld scrollen als het document erg lang is.
Als je browser alleen CSS 2 ondersteunt (dus geen CSS 2.1 of hoger), is het gedrag onvoorspelbaar.
De volgende zaken worden besproken:
1. De Document Type Definition (DTD)
2. De opzet van de CSS- en HTML-code
3. Verwijzingen naar uitgewerkte voorbeelden
Document Type Definition (DTD)
De HTML-code van je bladzijde moet beginnen met een DTD. Webdesigners noemen dit ook wel document type definitie of gewoon doctype. Gebruik altijd deze DTD:
<!doctype html>.
Dan werkt het altijd (tenzij er fouten in je code zitten ).
Opbouw van de code
Het voert te ver om diep in te gaan op CSS zelf. Daarover zijn al heel veel boeken geschreven en op internet zijn ook veel sites over dit onderwerp te vinden.
Het ontstaan van dubbele code is niet te voorkomen. Dat hangt direct samen met deze aanpak.
De opmaak van de bladzijde wordt vastgelegd in een style-sheet. Het beste kun je dat in een apart .CSS-bestand zetten en linken vanuit de HEAD. Daarmee voorkom je toch veel dubbele code:

<link rel="stylesheet" href=".....css">
- De verdeling van de bladzijde wordt geregeld met <div>-tags. De BODY bevat één <div>-tag, die alle andere code omvat. Het is dus een 'container'. De 'frames' in de pagina worden gepositioneerd ten opzicht van deze <div>-tag.
- De 'frames' zelf worden ook elk gemaakt met een <div id="...">-tag. Elke 'frame' heeft een unieke naam. De namen verwijzen naar het style-sheet.
- De delen van de pagina die in beeld moeten blijven hebben minimaal de style-attributen:
  "position:fixed; display:block; overflow:hidden;
  top:...; left:...; width:...; height:...;z-index:..."
- Voor height of voor width kun je de waarde 100% gebruiken. Daarmee leg je vast dat iets zich uitstrekt over de hele hoogte of breedte van het browser-window.
- Het style-attribuut position:fixed wordt maakt geen deel uit van CSS 1 en 2. Het hangt dus helemaal af van de implementatie van CSS in de browser of position:fixed wordt herkend. Als dat niet zo is kunnen de frames uit beeld scrollen. Dit treedt o.a. op bij Internet Explore vóór versie 6, Opera vóór versie 9 en FireFox vóór versie 2.
- Met z-index zorg je ervoor dat de 'frames' bovenop het content gedeelte liggen. Anders kan het gebeuren dat de frames worden bedekt door de content.
- Het deel van de pagina dat gedeeltelijk uit beeld mag verdwijnen (het 'content-frame') heeft de style-attributen:
  "position:relative; display:block;".
- De toevoeging overflow:hidden; zorgt ervoor dat het betreffende blok buiten het browser-window kan vallen. Als dat gebeurt heb je scroll-bars nodig. Die maak je door het style-attribuut overflow:scroll; op te geven voor het hele HTML-document.
- De toevoeging display:block; zorgt ervoor dat het betreffende block daadwerkelijk zichtbaar wordt in elke browser.
- Elke <div>-tag waarmee een 'frame' wordt gemaakt, kan optreden als container voor andere opmaak-blokken, die je elk weer vastlegt in <div>-tags met een id en/of een class.
- Behalve de positionering leg je natuurlijk ook de andere opmaak, zoals de achtergrondkleur, het lettertype, enz. in het style-sheet vast.
Voorbeeld: De structuur van een HTML-code met twee frames (content met alleen een bovenbalk) ziet er nu als volgt uit:

<!doctype html">
<html>
<head>
<link rel="stylesheet" href=".....css">
.
.
</head>
<body>
<div> 
<div id="topFrame"> 
.
.
</div> 

<div id="contentFrame"> 
.
.
</div> 
</div> 
</body>
</html>
Uiteraard hoort hier een .css-file bij. Die zou er als als volgt uit kunnen zien:

/* Onderstaande regel geldt algemeen voor de hele <html>-sectie */
* html {overflow:hidden;}

/* Voorbeeld voor de opmaak van de <body>. Natuurlijk kan dit
door andere id's en classes worden overschreven. */
body {background-color:#fafafa; background-attachment:fixed; margin:0;
padding:0 10px 0 10px; border:0; height:100%;}

/* Maak een scrollbalk als het blok niet in het window past */
* html body { overflow:scroll;}

/* meer opmaak voor de <body> */
body {font:83.333%/1.3em verdana,arial,sans-serif; letter-spacing:.08ex;}

/* Afmetingen en opmaak voor de bovenbalk,
volle breedte van het window, 130px hoog
positie van het frame is in de linker bovenhoek! */
#topFrame {position:fixed; display:block; top:0; right:0; width:100%;
height:130px; font-size:40px; font-style:italic; line-height:80px;
background:#000080; overflow:hidden; z-index:15;}

/* Afmetingen en opmaak voor de inhoud,
volle breedte van het window, relatief t.o.v. Main container
Bovenmarge minstens 130 px nodig ivm de bovenbalk; hier: 160px */
#contentFrame {position:relative; display:block; margin:0 0 0 160px;
background:transparent; overflow:hidden; z-index:10;}
Merk op dat het bovenstaande alleen een globale indruk geeft van hoe de code er uit ziet!
Het simuleren van frames met CSS staat of valt met het slim gebruiken van het attribuut z-index. Daarmee maak je een lagen-structuur. Alle zaken die zich op een lagere z-index bevinden dan de andere (met een hoge z-index) zijn in principe onzichtbaar.
- In bovenstaande code bevindt de <BODY> op z-index = 0 (per default).
- De content zweeft daar boven op z-index = 10.
- De bovenbalk zit daar weer boven op z-index = 15.
- De content schuift dus onder de bovenbalk door.

Uitgewerkte voorbeelden

Deze voorbeelden beperken zich tot de verdeling in 'frames'. Menu's en andere opmaak zijn slechts minimaal aanwezig. Kies een lay-out aan aan de hand van de plaatjes hier onder.

Opmerking:
Er is een trend gaande om voor dit soort technieken geen HTML meer te gebruiken, maar XHTML. XHTML is een vorm van XML (Extensible Markup Language) die veel lijkt op HTML.
XHTML is dus geen uitgebreide versie van HTML, zoals vaak wordt gedacht.
Bij gebruik van XHTML moet je vóór de DTD aangeven dat je XML gebruikt. Verder is de DTD anders en de <HTML>-tag heeft een verplicht extra attribuut. De aanpak om de frames te simuleren is binnen XHTML precies hetzelfde als in 'gewoon' HTML.

Naast de hierboven genoemde trend in XHTML, biedt de nieuwe standaard HTML5 een vijftal nieuwe tags, waarvan de namen suggereren dat het simuleren van frames eenvoudiger zou worden: <header>, <footer>, <nav> en <article>.
Dat is inderdaad zo. Zie het item: Frame-simulaties met HTML5-tags.
De nieuwe tags maken het ook voor de zoekmachines eenvoudiger om onderscheid te maken tussen navigatie, belangrijke en minder belangrijke tekst, enz.
Alle bekende browsers ondersteunen deze nieuwe tags geheel en correct.