Web Style Sheets
CSS tips & trucs

EEN VASTGEPIND MENU

Het menu dat u ziet in de rechter bovenhoek van deze pagina is gewoon een DIV waarin enkele A bestanddelen zijn verwerkt. Al het werk om het gefixeerd op zijn plaats te houden gebeurt door regels in het stijl blad. Hier volgt de opmaak, het is rechtstreeks uit de bron van deze pagina gehaald:

<div class="banner">
<p>
<a href="../../../"><img alt="W3C" src="../../../Icons/w3c_home"></a>
<a href="../../../Consortium/Activities">Activities</a>
<a href="../../../TR/">Tech.&nbsp;reports</a>
<a href="../../../Help/siteindex">Site index</a>
<a href="../../../Consortium/Translation/">Translations</a>
<a href="../../../Status">Software</a>
<a href="http://search.w3.org/">Search</a>
<em>Nearby:</em>
<a href="../../">Style</a>
<a href="../../CSS/">CSS</a>
<a href="./">tips&nbsp;&amp;&nbsp;tricks</a>
</div>

In een browser zonder CSS, of waarin CSS is uitgeschakeld, zal het een normale paragraaf zijn met links. Maar dankzij de regels hieronder, zal het lijken te “drijven” bovenaan de pagina, vastgepind rechtsboven op het browser-blad:

div.banner {
  margin: 0;
  font-size: 80% /*smaller*/;
  font-weight: bold;
  line-height: 1.1;
  text-align: center;
  position: fixed;
  top: 2em;
  left: auto;
  width: 8.5em;
  right: 2em;
}
div.banner p {
  margin: 0; 
  padding: 0.3em 0.4em;
  font-family: Arial, sans-serif;
  background: #900;
  border: thin outset #900;
  color: white;
}

div.banner a, div.banner em { display: block; margin: 0 0.5em }
div.banner a, div.banner em { border-top: 2px groove #900 }
div.banner a:first-child { border-top: none }
div.banner em { color: #CFC }

div.banner a:link { text-decoration: none; color: white }
div.banner a:visited { text-decoration: none; color: #CCC }
div.banner a:hover { background: black; color: white }

De interessante regels hier zijn de 'position: fixed', die ervoor zorgen dat de DIV gefixeerd blijft op het scherm, en de 'display: block', die de A bestanddelen binnenin de DIV tot blok bestanddelen maken, en dus onder elkaar worden weergegeven, in plaats van allen op één lijn.

Wees voorzichtig met de volgorde van de laatste drie regels. Ze hebben allen dezelfde specifieke hoedanigheid, dus de laatste die wordt toegepast bepaalt de kleur. Als de muis over de link beweegt, willen we dat :hover wordt toegepast, dus deze moet de laatste zijn.

De rest, de marges, randen, kleuren, etc. kunnen worden verwijderd of worden veranderd naar persoonlijke voorkeur. Let er echter op wat we gedaan hebben met de regels tussen de links: er zijn randen boven alle links, behalve boven de eerste, dankzij de regel met ‘:first-child’. Een dergelijk stel regels (border-top op alle bestanddelen en een rand ’none’ op de ‘first child’) is erg handig voor het creëren van randen tussen de bestanddelen.

(Als u de actuele stijlbladen bekijkt die zijn gelinkt vanuit deze pagina, banner-k.css en banner.css, zult u enkele aanvullende regels zien die elkaar lijken tegen te spreken. Deze zijn er om enkele oudere browsers te beschermen tegen bugs. In het bijzonder, in banner-o.css, is de banner verborgen en in banner.css wordt de banner weergegeven als een blok. Dit heeft als effect het verbergen van de banner voor Netscape 4, omdat het @import of banner.css overslaat.)

FAQ: IE 5 & 6 OP WINDOWS?

Als u deze pagina bekijkt vanuit Microsoft Internet Explorer 5 of 6 met Windows (“WinIE5” en “WinIE6”) zal het u opvallen dat het niet werkt. Tenminste niet met de huidige versies vanaf september 2002. Veel mensen vragen mij daarover, dus hier volgt een kleine uitleg. In het kort: de bug zit in de browser en niet in deze pagina.

WinIE5 en WinIE6 passen ‘fixed’ nog niet toe. Dat is jammer, maar een groter probleem is dat ze ook de ‘position’-eigenschap niet correct ontleden. Een browser die ‘fixed’ niet kent zou de regel ‘position: fixed’ moeten negeren en zou terug moeten vallen op een oudere waarde van 'position' in het stijlblad. We zouden dan ‘position: absolute’ kunnen toevoegen vlak voor ‘fixed’ en de browser zou dat kunnen gebruiken. Maar in WinIE5 en 6 gebeurt dat niet. Waarschijnlijk wordt het trefwoord ‘fixed’ geïnterpreteerd als ‘static’.

U kunt WinIE 5 en 6 het trefwoord ‘fixed’ niet laten ondersteunen, maar er is een alternatieve oplossing voor het ontledings probleem. Johannes Koch attendeerde mij op deze truc (uit zijn http://w3development.de/css/hide_css_from_browsers). Vervang eerst in de stijlregels hierboven ‘position: fixed’ door ‘position: absolute’ en plaats dan de volgende regel een klein stukje lager in het stijlblad:

body>div.banner {position: fixed}

(Als de DIV.banner zich in een ander bestanddeel dan BODY bevindt, vervang BODY dan door dat bestanddeel.) Het effect hiervan is dat browsers die bekend zijn met de ‘>’ (child) selector of CSS deze regel zullen gebruiken, maar browsers die dat niet doen, met name WinIE5 en WinIE6, zullen het negeren. De regel ‘position: absolute’ zal in plaats daarvan gebruikt worden en het menu zal op de juiste plaats staan, echter het zal niet gefixeerd blijven staan wanneer u scrollt.

Het is van belang dat er géén spaties om de ‘>’ staan.