Bert
Bos, leider
stijl-activiteitenCopyright © 1994–2021 W3C® Privacy
Geschreven 17 januari 2001;
laatste update wo 06 jan 2021 05:40:49 UTC
Dit is een vertaling. Hij kan fouten bevatten of verouderd zijn t.o.v. de Engelse versie. Vertaler: Bert Bos
Zie ook de index van alle tips.
Op deze pagina:
Het menu dat u rechts op deze pagina ziet is een simpele UL-lijst. Maar hij blijft staan als u de pagina scrollt. (Misschien moet u eerst het venster smaller maken om een schuifbalk te krijgen.) Al het werk om hem op die plaats te houden wordt gedaan door regels in het stijlblad. Hier is de opmaak van het menu, hij komt rechtstreeks uit de broncode van deze pagina:
<ul id=menu> <li><a href="#L384">Sectie 1</a> <li><a href="#details">Sectie 2</a> <li><a href="#FAQ">Sectie 3</a> </ul>
In een browser zonder CSS of met CSS uitgeschakeld, is het gewoon een lijst met links. Maar mèt CSS, dankzij de regels hieronder, lijkt het of hij boven de pagina zweeft, vastgemaakt aan de rechterkant van het venster.
#menu {
position: fixed;
right: 0;
top: 50%;
width: 8em;
margin-top: -2.5em;
}
De belangrijkste regel hier is de 'position: fixed', die ervoor zorgt dat de DIV vast op het scherm blijft staan. De
'top: 50%' en 'right: 0' bepalen waar
de DIV wordt getoond, in dit geval 50% vanaf de bovenkant en 0px
van rechts. Andere eigenschappen, 'margin', 'border', 'color', enz.
kunnen naar smaak worden toegevoegd.
Er bestaan ook eigenschappen 'left' en 'bottom', om het element aan de linker- of onderkant van het scherm vast te maken.
Om precies te zijn, als een element is vastgezet met 'position: fixed', wordt de horizontale positie en breedte
ten opzichte van het venster gezamelijk bepaald door de drie
eigenschappen 'left' (=links), 'width' (=breedte) en 'right'
(=rechts). (CSS gebruikt de meer algemene term viewport; een venster is een voorbeeld van een viewport.)
Je hebt hoogstens twee van de drie eigenschappen nodig, d.w.z., 'left' & 'width', 'right' & 'width', of 'left' & 'right'. Je kunt ook slechts één eigenschap een waarde geven, of zelfs geen van de drie. In dat geval zal CSS de natuurlijke (intrinsieke) grootte of positie van het element gebruiken voor de eigenschappen die hun originale waarde ('auto') hebben behouden.
Hetzelfde geldt voor het trio 'top' (=bovenkant), 'height' (=hoogte) en 'bottom' (=onderkant). Je hoeft niet meer dan twee ervan een waarde te geven: 'top' als je de afstand tot de bovenkant van het venster wil beheersen, 'bottom' om de afstand tot de onderkant te bepalen, en 'height' als je de hoogte een vaste waarde wilt geven.
Als u het daadwerkelijke stijlblad in deze pagina bekijkt, zult u een aantal regels zien die elkaar lijken tegen te spreken. Die zijn er om bugs in een aantal oudere browsers tegen te gaan. Zie hieronder.
Als u deze pagina bekijkt met Microsoft Internet Explorer 5 of 6 onder Windows („WinIE5” en „WinIE6”) zult u zien dat het niet werkt. Veel mensen hebben me ernaar gevraagd en daarom hier een kleine uitlef. Kort gezegd: de fout ligt bij de browser, niet bij deze pagina.
WinIE5 en WinIE6 implementeren 'fixed' niet. Dat is jammer, maar een bijkomend probleem is dat ze ook 'position' niet correct lezen. Een browser die 'fixed' niet kent slaat normaalgesproken de regel 'position: fixed' over en valt terug op de eerdere waarde van 'position' en het stijlblad. We kunnen dan 'position: absolute' vlak voor de regel met 'fixed' zetten en zo'n browser zal dan 'absolute' gebruiken. Maar dat is niet wat er in WinIE5 en WinIE6 gebeurt. Blijkbaar lezen ze 'fixed' alsof het 'static' was.
Er is niets aan te doen dat WinIE5 en 6 'fixed' niet ondersteunen, maar er is een oplossing voor het probleem dat ze 'fixed' als 'static' lezen. Johannes Koch toonde me deze truc (uit zijn verzameling „workarounds” [pagina op archive.org]). Vervang eerst 'position: fixed' in het stijlblad door 'position: absolute' en voeg dan deze regel toe:
*>#intro {position: fixed}
Het resultaat is dat browsers die de selector '>' (child selector) kennen deze regel toepassen, maar andere browser, in het bijzonder WinIE5 en WinIE6 hem overslaan. In plaats daarvan zullen ze de regel 'position: absolute' gebruiken en het menu zal op de juiste plaats staan, alleen blijft het niet staan als je scrollt.
Het is belangrijk dat er geen spaties rondom de '>' staan,