CSS tips & tricks:

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="Home Page" src="../imageFolder/Icons/home"></a>
<a href="../Consortium/Activities">Activities</a>

<a href="../TR/">Tech. & 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 & tricks</a>
</p>
</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 '>'.

The trick here is to only indent paragraphs that follow other paragraphs. The first paragaph of a page doesn't need to be indented, and neither do paragraphs that follow a diagram, a heading or something else that is offset from the text. The rules are in fact very simple:

p {
  margin-bottom: 0 }
p + p {
  text-indent: 1.5em;
  margin-top: 0 }

This indents the first line of only those paragraphs that follow another paragraph. It also suppresses space below all paragraphs and above indented paragraphs. But in practice you will find that you still need exceptions.

In this page, for example, there are P elements that are used as captions for images (see the Figures & captions example). We have centered them, and thus they should not be indented. A simple rule 'p.caption {text-indent: 0}' takes care of it. You can see that we indeed used that rule in the example.

We can now use various amounts of whitespace between paragraphs to indicate important breaks in the text. Let's define three different classes: stb (small thematic break), mtb (medium thematic break) and ltb (large thematic break). We have given this paragraph a class of stb, so you can see the effect.

p.stb { text-indent: 0; margin-top: 0.83em }
p.mtb { text-indent: 0; margin-top: 2.17em }
p.ltb { text-indent: 0; margin-top: 3.08em }

This page, for example, has as alternatives all the W3C Core Styles, plus two style sheets found elsewhere on the Web (author: David Baron).

How the reader can select the alternatives depends on the browser. Not all browsers yet offer a menu for it, but in Netscape 6, for example, you can find all the styles under the menu "View" -> "Use Stylesheet".

To include extra style sheets, it suffices to add more <LINK> elements in the header, with the right REL and TITLE attributes, as follows. (I left out some of the styles; see the source of this document for even more links.)

  <link rel="stylesheet"
    title="Gold (right, fixed) + navbar"
    href="../threepart-f.css">

  <link rel="alternate stylesheet"
    title="Oldstyle"
    href="http://www.w3.org/StyleSheets/Core/Oldstyle">

  <link rel="alternate stylesheet"
    title="Modernist"
    href="http://www.w3.org/StyleSheets/Core/Modernist">
  ...
  <link rel="alternate stylesheet"
    title="Steely"
    href="http://www.w3.org/StyleSheets/Core/Steely">

  <link rel="alternate stylesheet"
    title="Forest (by David Baron)"
    href="http://dbaron.org/style/forest">

  <link rel="alternate stylesheet"
    title="Plain (by David Baron)"
    href="http://dbaron.org/style/plain">

Groups of links with the same TITLE are automatically combined into one style sheet.

The visual effect is due to the fact that each P element is positioned individually and has its own font and color. It works best with short texts, because the visual effect is based on overlap, but if the text is too long, it overlaps so much that it becomes hard to read.

The style sheet allows for a menu of up to 10 elements, the example above uses 8. Here is the HTML source of the example above:

<div class="map">
<p id="p1"><a href="#news">What's new?</a>
<p id="p2"><a href="#learn">Learning CSS</a>
<p id="p3"><a href="#browsers">CSS Browsers</a>

<p id="p4"><a href="#editors">Authoring Tools</a>
<p id="p10"><a href="#specs">Specs</a>
<p id="p6"><a href="test">CSS1 Test Suite</a>
<p id="p9"><a href="core">W3C Core Styles</a>

<p id="p8"><a href="http://jigsaw.w3.org/css-validator/">CSS Validator</a>
</div>

Note the class "map" on the DIV element, which makes it into a container for the menu, and the ID attributes on the Ps. The P elements must each have a (different) ID, called p1, p2,... or p10. It is not necessary to use the IDs in order (as the example shows). You can use the style sheet by copying it into your own style sheet, or by using @import or a LINK element to import map.css directly from the W3C site: either

@import "http://www.w3.org/Style/map.css";

or

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

Explanation of the style sheet

Here is how the style sheet works. The style sheet starts by defining a DIV element with class "map". It creates a 190px high space into which the contents of the P elements will be placed. Each of the elements with IDs p1 to p10 is then given a color and a font, and each element is positioned inside the space created by the DIV by means of the 'margin' property: a negative top margin moves the element up into the DIV space and a positive bottom margin makes sure the next element starts again at the bottom of the DIV.

(The weakness of the style sheet is that it does everything in px. You may want to change it to use percentages instead, if you have a browser that implements CSS well enough.)

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 */

Of course, you are free to change the style sheet to try different fonts, colors and positions, or to create extra style rules for more than 10 elements. Also take a look at the left and right margins of the DIV: they are made negative, so that the menu is wider than the surrounding text, but in your page the margin may not be wide enough for this, and so you might have to remove these rules.

If you try the style, you may notice that it doesn't work too well in Netscape 4. That is Netscape 4's fault, of course. Nevertheless, map-ns.css is a style sheet that is similar and that seems to work OK in that browser. The following trick in the head of your HTML document will allow the version for Netscape 4 and the version above for better CSS implementations to co-exist:

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

Correct CSS implementations will read both style sheets, but the rules in the second one override the first, so apart from a little unnecessary work, there is no change. Netscape 4, however, will not load the second style sheet, because of the "media" attribute, that it doesn't understand.

Also, you may wonder why the elements are positioned by means of (negative) margins, while this seems to be a prime candidate for the absolute positioning properties. Indeed, you can do the same with 'position' and 'left' & 'right'. The reason this style sheet uses margins instead, is that this way it works in browsers that only implement CSS1.

Centering lines of text

The most common and (therefore) easiest type of centering is that of lines of text in a paragraph or in a heading. CSS has the property 'text-align' for that:

P { text-align: center }
H2 { text-align: center }

renders each line in a P or in a H2 centered between its margins, like this:

Centering a block or image

Sometimes it is not the text that needs to be centered, but the block as a whole. Or, phrased differently: we want the left and right margin to be equal. The way to do that is to set the margins to 'auto'. This is normally used with a block of fixed width, because if the block itself is flexible, it will simply take up all the available width. Here is an example:

P.blocktext {
    margin-left: auto;
    margin-right: auto;
    width: 6em
}
...
<P class="blocktext">This rather...

This is also the way to center an image: make it into block of its own and apply the margin properties to it. For example:

IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto }
...
<IMG class="displayed" src="..." alt="...">

Centering vertically

CSS level 2 doesn't have a property for centering things vertically. There will probably be one in CSS level 3. But even in CSS2 you can center blocks vertically, by combining a few properties. The trick is to specify that the outer block is to be formatted as a table cell, because the contents of a table cell can be centered vertically.

The example below centers a paragraph inside a block that has a certain given height. A separate example shows a paragraph that is centered vertically in the browser window, because it is inside a block that is absolutely positioned and as tall as the window.

div.container {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle }
...
<div class="container">
  <P>This small paragraph...
</div>