Ben's Hobbyhoekje -- Frames simuleren in CSS X: Opmaak met kolom links en boven- en onderbalk

Frames simuleren in CSS X: Opmaak met kolom links en boven- en onderbalk

Een van de grote voordelen van frames is dat je delen van je website permanent in beeld kunt houden. Denk hierbij aan de titel en vooral de besturing. Als je steeds omhoog moet scrollen om bij de navigatie-knoppen te komen is dat lastig voor je bezoekers. Onhandige en/of verwarrende navigatie staat hoog in de top 15 van grootste ergernissen over websites. Frames zijn altijd een handig hulpmiddel geweest om dit te voorkomen.
Ontwikkelingen in de webstandaarden duiden er op dat frames gaan verdwijnen. Dat wil zeggen: ze komen niet meer voor in de standaarden. Vanwege de noodzakelijke achterwaartse compatibiliteit zullen websites met frames nog jarenlang kunnen worden bekeken.

Het is goed om naar alternatieven voor frames te kijken. Een mogelijkheid is om de frames te simuleren, dus 'net te doen alsof'. Met HTML en CSS is dat heel goed mogelijk.

K o l o m	Bovenbalk
	Content
	Onderbalk

Op deze bladzijde wordt de frame-simulatie besproken van een scherm-indeling voor websites, zie de illustratie hiernaast. De 'frameset' verdeelt het scherm in een smalle kolom aan de linkerkant en een gedeelte met een bovenbalk, ruimte voor de content en een onderbalk.

Druk op de knop om het voorbeeld te bekijken en te downloaden.

De werking is getest met Edge, FireFox en Chrome. Correcte werking met oudere versies van andere browsers is onzeker. Het is daar mogelijk dat de bovenbalk toch uit beeld scrollt. In het slechtste geval lijkt de opmaak helemaal nergens op...
De bespreking van de code is summier gehouden. Alleen zaken die specifiek zijn voor dit voorbeeld worden genoemd.
Meer informatie over het simuleren van frames is te vinden in het item "Frames simuleren met CSS". Als je deze techniek voor het eerst gebruikt moet je daar zeker kennis van nemen.
Dit item geeft ook verwijzingen naar andere frameset-simulaties.
Om dit goed te laten werken moet je pagina beginnen met een DTD (Document Type Definition of doctype):
<!doctype html>.

Opmerkingen bij de code van het voorbeeld:

De <BODY> bestaat uit slechts één 'Main Container'. De betreffende <div>-tag heeft geen id of class.
De achtergrondkleur is rgb(250,250,250) (Hexadecimaal: #fafafa, heel licht grijs).
De scrollbalk aan de rechterkant is gemaakt door voor de Main Container de eigenschap overflow:scroll voor te schrijven. De andere containers hebben -indien nodig- de eigenschap overflow:hidden.
De lichtgele bovenbalk heeft het id="BovenBalk". De z-index = 15. Het logo zit in dit block.
De lichtgele onderbalk heeft het id="OnderBalk". De z-index = 15. De voettekst zit in dit block.
De z-index van BovenBalk en OnderBalk is gelijk. Omdat deze twee blokkken elkaar niet overlappen is dat geen bezwaar.
De blauwe kolom heeft het id="KolomLinks". De z-index = 25.
De linker bovenhoek van zowel KolomLinks en van BovenBalk ligt op (top,left) = (0,0). De z-index van KolomLinks is groter dan de z-index van BovenBalk. Daardoor wordt een deel van de balk afgedekt door de kolom. Bij het plaatsen van tekst en figuren in de kolom dient daarmee rekening te worden gehouden, bijvoorbeeld met behulp van een id zoals whitespace (zie verder).
De rechteronderhoek van Onderbalk ligt op (bottom, right) = (0,0). Omdat het hier om een onderbalk gaat, is de positie vastgelegd ten opzichte van de onderrand van het window. Dat bereik je met bottom: 0, in plaats van top: 0.
Het verticale menu maak geen deel uit van KolomLinks. De plaats ligt vast op dezelfde manier als KolomLinks, zij het dat de linker bovenhoek niet op (top,left) = (0,0) ligt maar op (top,left) = (80px,5px). De z-index = 30.
Het menu zelf is gedefinieerd als unordered list, <ul>. Met behulp van CSS-attributen is de opmaak gewijzigd:
- De bullets zijn verwijderd (list-style-type:none).
- De achtergrond in transparant gemaakt, zodat je altijd de blauwe kleur van de kolom ziet.
- Er is om elk menu-item een rand gezet: border:4px solid #73a2bd.
- De links in het menu zijn opgemaakt met de pseudo-classes :link, :hover, enz. van de <a>-tag.
Bij het openen van de bladzijde bevinden de bovenbalk, de kolom en de content zich alledrie op de positie (top,left) = (0,0). Daardoor zou een deel van de content onder de bovenbalk en de kolom kunnen verdwijnen. Dat is opgelost door de linkermarge van de content gelijk te maken aan 160px (de kolom is 150px breed). Voorts is bovenaan de content een brede marge gemaakt met <div id="whitespace"></div>. Whitespace moet wat hoger zijn dan de bovenbalk. Hier is whitespace 100px hoog. De bovenbalk is 80px hoog. Met de bovenmarge van content zelf (10px) blijft dus netto een marge over tussen de content en de bovenbalk van 30px.
Aan de onderkant van de content is ook wat witruimte nodig, om te voorkomen dat er tekst onder de onderbalk verborgen blijft. Dat is in dit voorbeeld bereikt door onderaan de linkerkolom een lege paragraaf toe te voegen: <p> </p>.
Voor het maken van kleinere letters bevat het stylesheet twee classes: Kleiner en Kleinst. De class Kleiner wordt in dit voorbeeld niet gebruikt.
Als je meerdere <div>-tags naast elkaar gebruikt kan het voorkomen dat ze niet op gelijke hoogte eindigen. Daardoor kan de opmaak een rafelig uiterlijk krijgen. Op dat te voorkomen kun je een trucje toepassen: Een tag <div class="clear"></div>. Het is minder geschikt voor het maken van witte ruimte.
Het is bij deze techniek essentieel dat z-index goed gebruikt wordt. Als stukken van de opmaak 'zomaar' lijken te verdwijnen komt dat meestal doordat ze door iets anders worden afgedekt. Dat is op te lossen door de z-index van het verdwenen stuk te verhogen.

Tenslotte:
Als je de boven- en/of onderbalk over de volle breedte van het scherm wilt laten doorlopen kun je dat eenvoudig bereiken door de z-index van het betreffende block te verhogen en/of de z-index van de linker kolom te verlagen. Dat is een kwestie van een beetje spelen.