Frames simuleren met CSS V: Opmaak met kolom links
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 |
Content |
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 kolom toch met de content mee 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 kolom heeft het id="KolomLinks". Het heeft een vaste plaats op het scherm, nl. (top,left) = (0,0). De z-index = 15. Het logo zit in dit block.
- Het menu maakt 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) = (50px,5px). De z-index = 25.
- 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 gele 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.
- 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 kolom. Bij het scrollen van content schuift deze dus onder de kolom door.
- Het block content heeft een linker buitenmarge (margin) van 160px. Daarmee wordt voorkomen
dat de tekst door de kolom wordt afgedekt en dus onleesbaar wordt.
De boven- en ondermarges zijn elk 10px. De rechtermarge is 0. De witruimte aan de rechterkant is een handig zij-effect van de verdeling in kolommen. - 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.
- Voor het maken van kleinere letters bevat het stylesheet twee classes: Kleiner en Kleinst.
- Voor het maken van een witte ruimte is een id beschikbaar met de naam whitespace. Dit is 150px hoog. In dit voorbeeld is het 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.
