Web Style Sheets
CSS tips & trucs

EEN CONFETTI MENU

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="https://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 "https://www.w3.org/Style/map.css";

of

<link rel="stylesheet" href="https://www.w3.org/Style/map.css">

VERKLARING VAN HET STIJLBLAD

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, mits uw browser CSS goed genoeg implementeert.)

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.

Indien u de stijl probeert, zult u misschien opmerken dat het niet al te goed in Netscape 4 werkt. Dat is de fout van Netscape 4 natuurlijk. Niettemin is map-ns.css een stijlblad dat gelijkaardig is en OK schijnt te werken in die browser. De volgende truc in de head van uw HTML document zal toestaan dat de versie voor Netscape 4 en bovenstaande versie voor betere CSS implementaties coëxisteren:

<link href="map-ns.css" rel="stylesheet" type="text/css">
<link href="map.css" rel="stylesheet" type="text/css" media="all">

Correcte CSS implementaties zullen beide stijlbladen lezen, maar de regels in de tweede nemen die in de eerste over, zodat er geen verandering is, los van wat onnodig werk. Netscape 4 echter, zal het tweede stijlblad niet laden, wegens het "media" attribuut, dat hij niet begrijpt.

U zult zich wellicht ook 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.