About this Site

Standards

Valid HTML 4.01! Valid CSS!

This site is written entirely in standards-compliant HTML and CSS (as defined by the W3C). It doesn't use any frames or JavaScript (apart from a one-liner to break out of frames, which would be unnecessary if people would just stop using them).

Why worry about standards? Because the web should be open and accessible to all. And that doesn't only mean that web pages should display properly in all the various graphical browsers. They should also work properly in everything from text-mode browsers to the screen-readers used by blind people*.*I can't easily test every conceivable possibility myself, so if you notice something that doesn't work in your browser, let me know. But please read this first... Sticking to open standards such as (X)HTML and CSS is a significant step towards that goal. It doesn't mean the web site has to look ugly either! (as I hope you'll agree).

CSS Tricks

In case anyone is interested in how the effects seen on this site are achieved using just CSS, I've included a brief description of the more interesting ones. They are not all original! Some ideas came from other sites; I just adapted them to my own needs. I have included links back to the original sources where possible. (Note that some of the effects described here are no longer used on this site.)

No-frames nav-bar

When viewed in a browser that properly supports CSS2 positioning, the piano keys navigation bar stays fixed at the bottom of the viewport (i.e. the browser window) when you scroll down. Yet no frames are used to achieve this!

This effect is precisely why the CSS2 standards introduced fixed positioning. An element given this property is positioned relative to the viewport, so stays fixed when the viewport is scrolled. The following CSS positions the nav-bar at the bottom of the viewport:

div#navbar {
  position: fixed;
  margin-bottom: 0px;
}

Because the HTML defining the nav-bar comes after that of the main text, the text scrolls behind the nav-bar (this could also be done explicitly using the CSS z-index property). The main text is given a large bottom margin to make sure you can scroll far enough to see the end of it.

Transparency

If your browser can cope with CSS2 positioning, the main column of text can be made to look as though it's written on a sheet of glass, with the background image of a piano showing through. How does this work?

The trick is again fixed positioning. Remember that this positions an element relative to the viewport. And this also applies to background images, except that the property is called "attachment" rather than "position". So by giving the background of the <body> element fixed attachment using the following CSS (⇒ means the line should continue without a line break):

body {
  background-image: ⇒
    url("piano.jpeg");
  background-attachment: ⇒
    fixed;
}

the image of a piano remains fixed when the viewport is scrolled.

The illusion of transparency is achieved by setting the background of the main column of text (enclosed by <div class="main"> tags) to a different image of the same piano, altered to make it appear as though seen through glass, and again giving it fixed attachment.

div.main {
  background-image: ⇒
    url("piano_glass.jpeg");
  background-attachment: ⇒
    fixed;
}

The second background image is only displayed within the boundaries of the main column. Since both images are positioned relative to the viewport, they line up perfectly. And both remain fixed when the viewport is scrolled, giving the illusion that the text is written on a transparent surface which scrolls over the top of the background image.

You can see the original example of this trick at the Complex Spiral Demo page, written by Eric Meyer (one of the founding fathers of CSS).

Annotations in margins

Putting annotations in the margins (such as the contents links at the top of this page) uses yet more CSS2 positioning tricks. This time, it's absolute positioning we need, which positions an element relative to its containing block.

What's a containing block? You might think it's the parent element of the HTML element in question (e.g. in <p>parent<em>child</em><p>, <p> is the parent of <em>). Unfortunately, it's a little more confusing than that. The containing block is the first positioned parent element. I.e. a parent element can only be a containing block if it's position property has been set to something other than static (which is just the default positioning).

Ooof! We would like to use absolute positioning to position the right edge of our annotations level with the left edge of the main column. Since the annotation elements are children of the main column, we can use the following CSS:

div.annotation {
  position: absolute;
  margin-right: 100%;
}

However, this won't work since the main column still has the default static positioning! How do we get around this without moving the main column to the wrong place? Luckily we can use relative positioning. (We've now met all four types of CSS2 positioning!) This positions an element relative to where it would be if it was statically positioned. By giving the main column relative positioning but not actually moving it, it ends up in the same place as it was when it was statically positioned:

div.main {
  position: relative;
  top: 0px;
  left: 0px;
}

And now that it is a positioned element, the main column becomes the containing block for the annotation elements, which are placed with their right edges lined up with the left edge of the main column. Just as we wanted all along!

Rounded corners

Basically, rounded corners on web pages are created by placing an image that masks off a curved shape over the top of a rectangular corner. However, there are numerous ways of inserting the image and getting it in the right place.

The neatest way is to use CSS2 generated content, since it doesn't require any alterations to the HTML itself. However, since generated content has very poor browser support at the moment, this site uses an <img> tag to insert the image, and absolute positioning to move it into place. The appropriate CSS code is left as an exercise! (If you get stuck, look at the style-sheets used on this site.)

For an example of how to do it with generated content instead, see the How-To at virtuelvis.

Rollovers without JavaScript

The piano keys on the navigation bar are `played' when the mouse moves over them or the text under them. Traditionally, rollover effects like this are done with JavaScript. However, they can also be done with pure CSS2.

Each key is created by the following HTML (with N running from 0 to 4):

<div class="keysN">
  <a href="target.html">
    <img src="keysN_down.jpg">
    <span>Home</span>
  </a>
</div>

The background of the <div> is set to the key-up image. The key-down image is inserted by the <img> tag, but is made invisible using the following CSS:

div.keys a img {
  visibility: hidden;
}

To display the key-down image when the mouse is over the key, we use the hover pseudo-class:

div.keys a:hover img {
  visibility: visible;
}

The CSS for the hover pseudo-class comes later in the style-sheet, so takes precedence when the mouse is over the image. The key-down image is then displayed over the top of the background key-up image, producing the rollover effect.

Making of

The whole site was hand-coded using the wonderful GNU Emacs text editor. I made the piano keys nav-bar maybe 15 years ago, using a digital camera, a piano, and a lot of help from my brother who's a computer graphics whizz-kid. (Though not really a kid any more!)

Why does the site look weird?

(in your standards non-compliant browser)

Unfortunately, almost all browsers ignore some or even most of the W3C standards, making a lot of work for web designers. Fine if you do it for a living, not so good if you have better things to do with your time than cater for the vagaries of the plethora of browser versions. The (graphical) browsers coming close to standards-compliance are Firefox and other browsers based on the same Gecko layout engine, Konqueror and other browsers based on the same KHTML layout engine, and Opera. Internet Explorer has a long history of poor standards compliance (though recently they have been dragged kicking and screaming into improving this somewhat).

Since the open-source Firefox and Konqueror browsers are freely available on all common operating systems and platforms, I encourage you to try them out. Nevertheless, it's (mostly) a free world, and you're free to use whatever browser you like. Just don't expect me to go out of my way to support it if it isn't standards-compliant.