Web Style Sheets
CSS tips & tricks

A pinned-down menu

The menu you see in the top right corner of this page is simply a DIV with some A elements inside. All the work to make it stay fixed in its place is done by rules in the style sheet. Here is the mark-up, it is taken straight from the source of this page:

<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 a browser without CSS, or with CSS turned off, it will just be a normal paragraph with links. But thanks to the rules below, it will appear to "float" on top of the page, pinned to the upper right of the browser window:

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 }

The interesting rules here are the 'position: fixed', that makes the DIV stay fixed on the screen, and the 'display: block', that makes the A elements inside the DIV into block elements, and thus displayed below each other, rather than all on one line.

Be careful with the order of the last three rules. They all have the same specificity, so the last one that applies determines the color. If the mouse hovers over the link, we want :hover to apply, so it has to be last.

The rest, the margins, borders, colors, etc. can be removed or changed according to personal taste. Note, however, how we did the rules between the links: there are borders above all links, except the first, thanks to the rule with ':first-child'. A pair of rules like this (border-top on all elements plus a border 'none' on the first child) is very convenient for creating borders between elements.

(If you look at the actual style sheets that are linked from this page, banner-k.css and banner.css, you will see some additional rules that appear to contradict each other. Those are there to protect against bugs in a few older browsers. In particular, in banner-o.css, the banner is hidden and in banner.css it is displayed as a block. This has the effect of hiding the banner from Netscape 4, because it skips the @import of banner.css.)

FAQ: IE 5 & 6 on Windows?

If you look at this page with Microsoft Internet Explorer 5 or 6 on Windows ("WinIE5" and "WinIE6"), you'll notice that it doesn't work. At least not with the current versions as of Sept 2002. Many people ask me about that, so here is bit of explanation. In brief: the bug is in the browser, not in this page.

WinIE5 and WinIE6 don't implement 'fixed' yet. That is unfortunate, but the bigger problem is that they also don't parse the 'position' property correctly. A browser that doesn't know 'fixed' should throw away the rule 'position: fixed' and fall back to whatever the previous value of 'position' in the style sheet was. We could then add 'position: absolute' just before the 'fixed' and the browser would use that. But in WinIE 5 and 6 that is not what happens. Apparently the keyword 'fixed' is somehow interpreted as 'static'.

You cannot make WinIE5 and 6 support 'fixed', but there is a work-around for the parsing problem. Johannes Koch alerted me to this trick (from his collection of work-arounds). First replace the 'position: fixed' in the style rules above by 'position: absolute' and then insert the following rule a little lower in the style sheet:

body>div.banner {position: fixed}

(If the DIV.banner is inside another element than BODY, replace BODY by that element.) The effect of this is that browsers that know about the '>' (child) selector of CSS will use this rule, but browsers that don't, in particular WinIE5 and WinIE6, will ignore it. The rule 'position: absolute' will be used instead and the menu will be in the right place, except that it will not stay fixed when you scroll.

It is important that there are no spaces around the '>'.