Frames zijn een reuzehandig middel om sommige delen van je website op een vaste plaats te laten staan. Ik denk hierbij aan een banner die altijd bovenaan blijft staan ongeacht de hoeveelheid inhoud op de website, of aan een navigatiegedeelte dat je steeds aan de linkerzijde van je website zichtbaar wilt houden.

Helaas mag je geen frames meer gebruiken als je je website volgens de recentste richtlijnen wilt bouwen. CSS biedt je echter een eenvoudig alternatief.

Een frame, of niet?!

Bekijk even onderstaande tekst. Lijkt op een zwevend frame (iframe), nietwaar?

Niets is minder waar. Hier is helemaal geen frame aan te pas gekomen! Het handige is dat deze manier veel eenvoudiger in gebruik is dan het gebruiken van frames. Op deze manier voeg je ook voor bijvoorbeeld een shoutbox schuifbalken toe i.p.v. met een (i)frame. Hoe doen we dit nu?

Stop alles in een div

De tekst (of afbeeldingen e.d.) plaatsen we allemaal in een div. Je kiest een breedte en een hoogte. Eventueel kun je nog meer CSS-codes toevoegen zoals voor een rand, het lettertype enzovoort. Onze code ziet er voorlopig zo uit:

<div style="width: 200px; height: 150px;">
Hier al onze inhoud...
</div>

Gedragen als een div

Natuurlijk gedraagt deze div zich nog niet als een echt frame. Wanneer de inhoud groter is dan de grootte van de div willen we immers dat er schuifbalken verschijnen zodat we ook de rest van de inhoud kunnen bekijken. Daarvoor voegen we het kenmerk overflow toe. Dit kenmerk kent 4 waarden:

• hidden: tekst die te breed is voor de div wordt niet getoond (dus niet echt praktisch).
• auto: er worden automatisch schuifbalken toegevoegd, zowel horizontaal als verticaal als dat nodig is.
• x: er wordt alleen een horizontale schuifbalk toegevoegd.
• y: er wordt alleen een verticale schuifbalk toegevoegd

Wij gebruiken hier de waarde y, omdat dit visueel het mooiste is. Onze code ziet er nu als volgt uit:

<div style="width: 200px; height: 150px; overflow: y; ">
Hier al onze inhoud...
</div>

Dat is alles! Je moet er natuurlijk voor zorgen dat de hoeveelheid inhoud groter is dan de div van jouw afmetingen, anders zie je de schuifbalk niet omdat die dan overbodig is.

Opgelet

Je zult merken dat dit in Firefox op het eerste zicht niet werkt. Dit is eenvoudig op te lossen door overflow: y; te vervangen door overflow: auto; Firefox herkent automatisch welke zijde een schuifbalk nodig heeft.