Achtergrondfiguur naast en boven een <iframe>
Sommige websites hebben een opmaak, waarbij het niet opvalt dat er een floating frame (<iframe>-tag) in zit. Een deel (zo niet alles) van de tekst en figuren staan in een beperkt stuk van de pagina, dat ook nog kan scrollen. Opvallend detail daarbij is dat de achtergrondfiguur rond het <iframe> staat. Op deze bladzijde staat beschreven hoe je zoiets aanpakt. De code kun je downloaden, inclusief de plaatjes.
Het idee voor deze pagina is ontstaan door het item Achtergrondfiguur verdeeld over de frames van een frameset. Frames komen in de HTML5 standaard niet meer voor. Om een vergelijkbare opmaakt te krijgen moet je dus wat anders verzinnen.
- Het uiteindelijke doel van de paginaopmaak wordt getoond in voorbeeld 1. De
pagina bevat een iframe, maar dat zie je niet goed omdat alle borders zijn uitgezet. Er is hoogstens een scrollbalk
zichtbaar. Om te zien hoe de figuren zijn verdeeld bekijk je voorbeeld 2.
- De opbouw van een pagina
- De pagina bevat vier elementen binnen de <body>:
<div id="wrapper">Dit sluit de figuren, het menu en het iframe in. Het centreert de content en bepaalt de hoogte en breedte daarvan. De achtergrondkleur is wit. Het is relatief gepositioneerd ten opzichte van de <body>.<div class="links">Dit heeft de afmetingen van de figuur links. De figuur is opgenomen a;s background-image. Het is absoluut gepositioneerd t.o.v. #wrapper.<div class="boven">Dit heeft de afmetingen van de figuur boven. De figuur is opgenomen a;s background-image. Het is absoluut gepositioneerd t.o.v. #wrapper.<div class="menu">Dit zou een navigatie-menu kunnen zijn (Er zijn hier geen hyperlinks geprogrammmeerd). Het is absoluut gepositioneerd t.o.v. #wrapper.<iframe name="Inline_Frame" width="570" height="600"
src="vb444txt.htm" id="Inline_Frame"
title="Voorbeeld tekst">Helaas kunt u dit deel van deze
webpagina niet bekijken. Deze site gebruikt nl. Inline
Frames (<iframe>). Dat wordt door uw browser niet
ondersteund!</iframe>
Dit bevat de werkelijke content. De melding voor oude browsers is eigenlijk overbodig. Browsers die <iframe> niet ondersteunen worden niet meer gebruikt.
De opmaak van het <iframe>-venster zelf wordt geregeld via CSS in dit bestand. De opmaak van de content in het bestand binnen het <iframe>-venster (hier: vb444txt.htm wordt geregeld in dat bestand.
Opmerking: De <body>-tag heeft geen attributen. Alle opmaak wordt geregeld via CSS. - Om te zorgen dat de centrering door #wrapper goed werkt zijn de margin en de padding van de <body> op nul gezet.
- De opmaak van de tekst, het lettertype e.d. wordt geregeld vanuit de CSS van de <body>.
- Aan de opmaak van de pagina die in het <iframe> wordt geladen, worden geen specifieke eisen gesteld.
Downloaden:
Druk op de knop:
File: voorb444.zip, 20 193 bytes.
