Bert
Bos, leider
stijl-activiteitenCopyright © 1994–2021 W3C® Privacy
Geschreven 5 mei 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: Saffier Verkaik
Zie ook de index van alle tips.
Het kleurrijke menu dat u hieronder ziet is gewoon een DIV bestanddeel met daarin enkele P bestanddelen. Het visuele effect wordt veroorzaakt door het feit dat elk P bestanddeel individueel gepositioneerd is en zijn eigen lettertype en kleur heeft. Het werkt het best met korte teksten, omdat het visuele effect gebaseerd is op overlapping, maar als de tekst te lang is, is de overlap zo groot dat het moeilijk leesbaar wordt.
Het stijlblad staat maximaal 10 bestanddelen toe voor één menu, het voorbeeld hierboven gebruikt er 8. Hier is de HTML bron van bovenstaand voorbeeld:
<div class="map"> <p id="p1"><a href="../../CSS/#news">What's new?</a> <p id="p2"><a href="../../CSS/#learn">Learning CSS</a> <p id="p3"><a href="../../CSS/#browsers">CSS Browsers</a> <p id="p4"><a href="../../CSS/#editors">Authoring Tools</a> <p id="p10"><a href="../../CSS/#specs">Specs</a> <p id="p6"><a href="../../CSS/Test">CSS1 Test Suite</a> <p id="p9"><a href="/StyleSheets/Core">W3C Core Styles</a> <p id="p8"><a href="http://jigsaw.w3.org/css-validator/">CSS Validator</a> </div>
Let op de classificatie “map” op het DIV bestanddeel, die het verandert in een container voor het menu, en de ID attributen op de Ps. De P bestanddelen moeten elk een (ander) ID hebben, genaamd p1, p2,…of p10. Het is niet noodzakelijk de ID’s op volgorde te gebruiken (zoals het voorbeeld toont). U kunt het stijlblad gebruiken door het naar uw eigen stijlblad te kopiëren of door het gebruiken van @import of door een LINK bestanddeel map.css rechtstreeks uit de W3C website te importeren: ofwel
@import "http://www.w3.org/Style/map.css";
of
<link rel="stylesheet" href="http://www.w3.org/Style/map.css">
Hier wordt toegelicht hoe het stijlblad werkt. Het stijlblad begint door een DIV bestanddeel met de classificatie "map" te definiëren. Het creëert een 190px hoge ruimte waarin de inhoud van de P bestanddelen zal worden geplaatst. Aan elk van de bestanddelen met IDs p1 t/m p10 wordt dan een kleur gegeven en een lettertype en elk bestanddeel wordt gepositioneerd binnen de door de DIV gecreëerde ruimte door middel van de ‘margin’ eigenschap: een negatieve marge aan de bovenkant beweegt het bestanddeel omhoog naar de DIV ruimte en een positieve marge aan de onderkant zorgt ervoor dat het volgende bestanddeel weer begint aan de onderkant van de DIV.
(De zwakte van het stijlblad is dat alles werkt met px. U wilt het wellicht veranderen en hiervoor in de plaats percentages gebruiken.)
DIV.map { /* Reserve some room for the links */
padding-top: 190px;
margin-left: -2em; /* Adapt this to your own page... */
margin-right: -2em; /* Adapt this to your own page... */
margin-bottom: 4em;
margin-top: 5em;
clear: both;
text-shadow: 0.2em 0.2em /* 0.2em */ silver }
#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10 {
white-space: nowrap }
#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10 {
text-indent: 0 }
#p1 A, #p2 A, #p3 A, #p4 A, #p5 A, #p6 A, #p7 A, #p8 A, #p9 A, #p10 A {
text-decoration: none }
#p1, #p1 A {color: #DDD; font: 100px/1 Impact, Helvetica Narrow, sans-serif}
#p2, #p2 A {color: #000; font: italic 40px/1 "Georgia", serif}
#p3, #p3 A {color: #080; font: 40px/1 "Verdana", sans-serif}
#p4, #p4 A {color: #37F; font: bold 40px/1 Courier New, Courier, monospace}
#p5, #p5 A {color: #F73; font: bold 100px/1 "Verdana", sans-serif}
#p6, #p6 A {color: #22A; font: bold 25px/1 "Verdana", sans-serif}
#p7, #p7 A {color: #088; font: italic 80px/1 "Verdana", sans-serif}
#p8, #p8 A {color: #088; font: italic 20px/1 "Verdana", sans-serif}
#p9, #p9 A {color: #088; font: italic 20px/1 "Verdana", sans-serif}
#p10, #p10 A {color: #F73; font: bold 60px/1 "Verdana", sans-serif}
#p1 {text-align: right; margin: -185px 0 85px 0} /* top right */
#p2 {text-align: left; margin: -190px 0 150px 5%} /* top left */
#p3 {text-align: right; margin: -90px 35% 50px 0} /* center */
#p4 {text-align: right; margin: -95px 0 55px 0} /* center right */
#p5 {text-align: left; margin: -130px 0 30px 0} /* center left */
#p6 {text-align: left; margin: -40px 0 15px 35%} /* bottom center */
#p7 {text-align: right; margin: -80px 0 0px 0} /* bottom right */
#p8 {text-align: left; margin: -40px 0 20px 3%} /* bottom left */
#p9 {text-align: right; margin: -25px 0 5px 0} /* bottom right */
#p10 {text-align: left; margin: -130px 0 70px 0} /* center left */
Natuurlijk staat het u vrij het stijlblad te veranderen om verschillende lettertypen, kleuren en posities te proberen of om extra stijlregels voor meer dan 10 bestanddelen te creëren. Kijk ook eens naar de linker en rechter marges van de DIV: zij zijn negatief gemaakt, zodat het menu breder is dan de omringende tekst, maar op uw pagina zal de marge hiervoor misschien niet breed genoeg zijn, zodat u deze regels misschien zou moeten verwijderen.
U zult zich wellicht verwonderen waarom de bestanddelen worden gepositioneerd door gebruik te maken van (negatieve) marges, terwijl het een uitstekende kandidaat lijkt te zijn voor de absolute positionerings eigenschappen. U kunt inderdaad hetzelfde doen met ‘position’ en ’left’ & ‘right’. De reden dat dit stijlblad in plaats daarvan met marges werkt, is dat het op deze manier werkt voor browsers die enkel CSSI implementeren.