Ben's Hobbyhoekje -- Frames simuleren met CSS IV: Opmaak met boven- en onderbalk

Frames simuleren met CSS IV: Opmaak met boven- en onderbalk

p>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.

Bovenbalk

Content

Onderbalk

Op deze bladzijde wordt een frame-simulatie besproken, zie de illustratie hiernaast. De 'frameset' verdeelt het scherm in een bovenbalk, een smalle onderbalk en een content gedeelte. Het is een combinatie van een lay-out met alleen een bovenbalk en een lay-out met alleen 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 tekst in de bovenbalk zit in de container r1, die geen deel uitmaakt van BovenBalk. r1 zweeft boven de bovenbalk, z-index = 20. De positie van r1 binnen het window is vast: position:fixed.
Ook het menu maakt geen deel uit van BovenBalk. De plaats ligt vast op dezelfde manier als r1. De z-index = 25. De twee blauw-groene lijnen zijn binnen dit block opgegeven.
Het menu zelf is gedefinieerd als unordered list, <ul>. Met behulp van CSS-attributen is de opmaak volledig gewijzigd:
- De bullets zijn verwijderd (list-style-type:none).
- De items worden achter elkaar gezet in plaats van onder elkaar (display:inline). De tussenruimte is ingesteld met padding.
- De achtergrond is transparant gemaakt, zodat je altijd de gele kleur van de bovenbalk ziet.
- De links in het menu zijn opgemaakt met de pseudo-classes :link, :hover, enz. van de <a>-tag.
De blauwe onderbalk heeft het id="OnderBalk". De z-index = 15. Dat is gelijk aan de z-index van de bovenbalk. Omdat de boven- en onderbalk elkaar niet overlappen is dat geen bezwaar.
De positie van de onderbalk is vastgelegd ten opzichte van de onderrand van het window. Dat bereik je met bottom: 0, in plaats van top: 0.
De tekst in de onderbalk zit in OnderBalk zelf. De kleur van de link wordt wit gehouden met behulp van de pseudo-classes a:link, a:visited en a:active. Alleen als de muis over de link gaat wordt deze lichtgeel. Daarvoor is a:hover gebruikt.
De inhoud van de bladzijde zit in de container content. Deze heeft een transparante achtergrond, zodat de kleur van de <body> zichtbaar is.
De z-index van content is gelijk aan 10. Daardoor zweeft content boven de <body>, maar onder de beide balken. Bij het scrollen van content schuift deze dus onder de balken door.
De kleuren van de links in content zijn niet opgemaakt in CSS, maar met behulp van de attributen link, vlink en alink in de <body>-tag.
De verdeling in de tekst in kolommen wordt beschreven in het item Tekst verdelen in kolommen m.b.v. CSS.
Bij het openen van de bladzijde bevinden zowel de bovenbalk als de content zich op de positie (top,left) = (0,0). Daardoor zou een deel van de content onder de bovenbalk kunnen verdwijnen. Dat is opgelost met <div id="whitespaceT"></div>. WhitespaceT moet wat hoger zijn dan de bovenbalk. Hier is whitespaceT 150px hoog. De bovenbalk is 130px hoog. Er blijft dus netto een marge over tussen de content en de bovenbalk van 20px.
Een vergelijkbare maatregel is nodig om te zorgen dat de tekst onder de onderbalk vandaan kan scrollen. Hiervoor is <div id="whitespaceB"></div> ingezet. WhitespaceB moet wat hoger zijn dan de onderbalk. Hier is dat 40px. De onderbalk is 20px hoog. Er is dus een extra marge beschikbaar tussen de content en de onderbalk van 20px.
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.