Inline Frames simuleren met CSS
Als je een deel van een pagina wilt weergeven in een apart venster, kun je daarvoor een inline frame (of: floating frame) gebruiken. De inhoud van een inline frame staat in een apart HTML-bestand. Het voordeel van zo'n aanpak is dat je de inhoud van een enkel frame op meerdere plaatsen op je site kunt inzetten. Elke wijziging wordt direct op alle plaatsen doorgevoerd. Deze site maakt er volop gebruik van.
Als de inhoud van het inline frame maar op één plaats in je site nodig is, kun je er ook voor kiezen om het inline frame te simuleren met behulp van style.
Hieronder zie je iets dat erg veel lijkt op een inline frame. Toch is dat het niet. Het is helemaal gemaakt met style-attributen.
Op deze bladzijde staat beschreven hoe je dit aanpakt. De code van het voorbeeld staat onderaan deze bladzijde. Je kunt hem downloaden om zelf te gebruiken.
- Er worden twee items besproken:
- Opbouw van de code.
- Inbouwen in je eigen website.
- De achterliggende gedachte is dat een groot stuk informatie (de "View") zichtbaar is door slechts een klein "venstertje", de Viewport. Door View en Viewport goed op elkaar af te stemmen, krijg je een mooi geheel.
- De code bestaat uit een style-block (dat zet je in de <HEAD>) en een stukje HTML-code dat je in de
<BODY> zet, op de plaats waar je het nodig hebt.
Je kunt het style-block ook opnemen in een stylesheet.
- De simulatie van het inline-frame (dat is de Viewport) maak je met twee geneste <div>-tags:
- De binnenste <div>-tag bevat de View. Die bevat dus de informatie.
- De buitenste <div>-tag beschrijft de Viewport; die zie je dus op het scherm.
In het voorbeeld is de Viewport gecentreerd met behulp van <div align="center">.
- De manier waarop je de informatie in de View wilt presenteren bepaalt hoe de code er uit gaat zien.
Hier is gekozen voor een horizontale strook plaatjes.
- Er zijn 8 plaatjes. Elk plaatje is 134 pixels breed.
Omdat de tag van elk plaatje op een nieuwe regel begint, zet de browser er een spatie tussen (dat is conform de HTML-standaard).
Een spatie is 5 pixels breed. Aan het begin en aan het einde staat ook nog een spatie. Er zijn dus 9 spaties.
De breedte van de View is dus 8 × 134px + 9 × 5px = 1125px.
De spaties aan het begin en einde zijn ontstaan door de <div align="center">-tag in combinatie met de width van de View. - De View heeft class="View", waarin de width gelijk gemaakt is aan 1125px. De binnenmarges zijn
gelijk gemaakt aan nul met behulp van padding:0.
- De Viewport heeft class="ViewPort". Daarin zijn o.a. de hoogte en de breedte van de Viewport vastgelegd. Hier is dat 300px breed (dat staat mooi) en 125px hoog.
- De hoogte van de Viewport wordt in dit voorbeeld bepaald door de hoogte van de plaatjes (= 100px), met daarbij een toeslag
voor de randen boven en onder de plaatjes en voor de schuifbalk.
Als toeslag voor de schuifbalk volstaat 20px voor de meeste browsers de schuifbalken van Edge, FireFox en Chrome zijn iets smaller). - De rand boven de plaatjes is ingesteld met padding-top:3px. De rand onder de plaatjes ontstaat vanzelf.
- De lichtgroene achtergrond is ingesteld met background-color. Er is geen beperking in de keuze van de achtergrond. Het is zelfs mogelijk om er een achtergrond-figuur in te zetten, met behulp van background: url(....) enz. .
- Het onderscheid tussen de Viewport en de rest van de bladzijde wordt gauw onduidelijk. Daarom moet er een rand om de Viewport
heen staan. Dan ligt ook meteen de samenhang tussen de scrollbar en de View vast.
De rand om de Viewport is gemaakt met border.
- Bij het bouwen van deze code is gebruik gemaakt van class voor het definiëren van de stijlen. Voor dit (statische) voorbeeld is dat voldoende. Als je het uiterlijk en/of de inhoud van de View of de Viewport dynamisch wilt wijzigen zul je id moeten gebruiken in plaats van class.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code van het voorbeeld ziet er als volgt uit:
(Zet dit in de <HEAD>).
<style>
.ViewPort { width:300px; height:125px; padding-top:3px; overflow:auto;
background-color:#ddffdd; border:1px solid #808080 }
.View { width:1125px; padding:0; }
</style>
(Zet dit in de <BODY>, op de plaats waar je het nodig hebt).
<div"align="center"><div"class="ViewPort"><div"class="View">
<img src="plaatje_0.jpg" border="0" width="134" height="100">
<img src="plaatje_1.jpg" border="0" width="134" height="100">
<img src="plaatje_2.jpg" border="0" width="134" height="100">
<img src="plaatje_3.jpg" border="0" width="134" height="100">
<img src="plaatje_4.jpg" border="0" width="134" height="100">
<img src="plaatje_5.jpg" border="0" width="134" height="100">
<img src="plaatje_6.jpg" border="0" width="134" height="100">
<img src="plaatje_7.jpg" border="0" width="134" height="100">
</div></div></div>
Downloaden:
Druk op de knop:
File: voorb227.zip, 55 604 bytes.
