Ben's Hobbyhoekje -- Informatie van de website in het midden van het scherm houden

Informatie van de website in het midden van het scherm houden

Dit verhaal is aan het verouderen. In de moderne aanpak van websites bouwen worden geen frames meer gebruikt. Aangeraden wordt om de aanpak met CSS te gebruiken, volg de link op deze pagina.

Er bestaan websites die gemaakt lijken zijn voor een bepaalde maximumbreedte van het beeldscherm. Als je zo'n site bekijkt op een een groter (breder) beeldscherm, ontstaan er aan beide kanten van de tekst brede marges. De tekstbreedte wordt echter niet aangepast aan de grotere breedte van het scherm.
Hier staat beschreven hoe je dat doet met behulp van frames.

Een en ander wordt toegelicht aan de hand van een voorbeeld. De code van dat voorbeeld kun je downloaden, zie onderaan deze bladzijde.

Om dit goed te laten werken is het noodzakelijk dat de browser frames ondersteunt. Dat is vrijwel altijd het geval.
Browsers die geen frames ondersteunen bestaan overigens wel!
De "truc" is om de site te verdelen in drie kolommen met behulp van frames. Alleen het middelste frame krijgt een bepaalde breedte, de breedte van de buitenste twee frames wordt bepaald door de browser.
Er wordt hierbij alleen gebruik gemaakt van standaard HMTL. Er hoeft in principe geen JavaScript te worden gebruikt.
De frameset wordt aangemaakt op het hoogste niveau van de website, zeg maar in de file index.html. Alle informatie wordt getoond in het middelste frame. De buitenste twee frames tonen elk (dezelfde) HTML-code, namelijk alléén een lege achtergrond. Zie het onderstaande voorbeeld:

linker marge

Nuttige Informatie

rechter marge

In de hele <frameset> worden de randen allemaal op nul gezet.
De drie frames mogen niet van grootte worden veranderd ten opzichte van elkaar. Het window waarin de site wordt getoond mag natuurlijk wel van grootte worden veranderd (want daar was dit allemaal om begonnen!).
De buitenste twee frames hebben geen scrollbalk.
Het middelste frame mag scrollbalken hebben, maar dat hoeft niet. De instelling scrolling="auto" is hier de beste optie.
Als je op onderstaande knop drukt verschijnt een window met daarin een "website", die is opgezet op de manier zoals hierboven is beschreven. Je kunt de werking van de frames controleren door het window te resizen. Bij openen is het window 500 pixels breed. De middelste kolom is maximaal 300 pixels breed.

Opmerking:
Het is ook mogelijk om dit te realiseren met CSS. Zie daarvoor het item
Informatie van de website in het midden van het scherm houden II: aanpak met CSS.

Gebruik:

De code staat in een aparte HTML-file, die alleen de <frameset> definieert.
De nuttige code wordt in het middelste frame gezet; de buitenste twee frames blijven leeg.

De code van de framesets ziet er als volgt uit:

<frameset cols=*,300,* border=0 frameborder=0 framespacing=0>

<frame border=0 frameborder=0 framespacing=0 name="links_blank" noresize scrolling="no" src="blank.html">

<frame border=0 frameborder=0 framespacing=0 name="informatieframe" noresize scrolling="auto" src="informatie.html">

<frame border=0 frameborder=0 framespacing=0 name="rechts_blank" noresize scrolling="no" src="blank.html">

</frameset>

Downloaden:

Druk op de knop: File: voorb098.zip, 2055 bytes.

Opmerking:

Deze truc werkt ook met drie horizontale rijen. Een specifieke toepassing daarvoor weet ik niet. Als er iemand een goed idee heeft: Stuur een mailtje!

Hoewel het merendeel van de bekende browsers frames ondersteunt, is het aan te raden om naast de <frameset> ook een <body> te definiëren tussen <noframes>-tags. Hiermee kun je de bezoekers van je website er op attent maken dat ze beter een gangbare browser kunnen gebruiken.