Quantum Gypsies

How I built a web site and learned to love Cascades

Standing on the shoulders of giants

Before we begin, a confession. Very little of what you see on this page is the result of my original thinking. There is a long tradition of learning in information technology that is based on block copying other peoples code, seeing how it works and modifying it to suit. I cannot remember which bits came from where, but here are the books I consulted. My thanks to all the authors for getting me started and my thanks also to all the earlier authors that got them started. I guess I should also thank Tim Berners-Lee for getting everyone started.

The other thing to get straight, is that this page is a sampler rather than a tutorial, so you will need some familiarity with HTML tags and CSS attributes to get the best out of it.

Navigation with style

The first thing I want to show you in our behind the scenes look at Quantum-Gypsies is the HTML and CSS that together form the navigation for the site. I will use a page, like the one we are on, that contains both button menu items and tab menu items.

The main button menu is contained in a <div> structure with an ID of "mainnavigation".

<div id="mainnavigation">
   <ul class="mainnav">
      <li class="here">Virtual bricks --></li>
      <li><a class="mainbutton">Back to Landing strip</a></li>

This contains an unordered list of class "mainnav", with a list item of class "here" to mark the current page and any number of standard list items, with anchors of class "mainbutton". This is shown on the left, stripped of any attributes that don't affect style and all comments.

The <div> structure "mainnavigation" currently has no associated CSS, but it separates the menu structure logic from the page body text. It may well take style as the site grows and the menus become more complex.

The CSS for the list is as follows.

ul {
   font-family: verdana, helvetica, arial, sans-serif;
   font-size: 80%;
ul.mainnav { float: left; margin: 1em 1em 0 42px; padding: 0 0.2em 0 0.2em; list-style-type: none; text-align: center; }

First, there are the settings for unordered lists generally and then some for lists of class mainnav. The distinguishing mark of all my lists is the use of sans-serif font families.

Note that all margins and padding are explicitly set. To remember which value goes where in the string, I think clock -- top, right, bottom, left.

All of the positioning is relative to the text size chosen by the user, except for the left margin. This is set in pixels to anchor the menu solidly to the left hand edge of the page.

The CSS for the buttons is shown below:

a.mainbutton {
   display: block;
   font-weight: bold;
   text-decoration: none;
   background: url(images/ButtonBackground.png)
   background-repeat: no-repeat;
   background-position: top right;
   border-width: 4px;
   border-style: solid;
   border-color: #f5f5dc #f5f5dc #8b4513 #8b4513;
   padding: 0.1em 0.5em 0.1em 0.5em;
   margin: 0 0 0.4em 0;
   color: #b21d00;

The "display: block;" attribute is needed to allow the buttons to be vertically spaced and the "text-decoration: none;" attribute takes away the underline that comes as default with an anchor element.

For the border attributes, I could have used the outset border style, but doing it my way allows me complete control over the colours used on each facet.

The other thing of interest is the placing of the background image at the top right of the button. The reason is that the image is a colour gradient which is much longer than the button to allow for re-sizing. It is therefore placed such that, at smaller sizes, the lighter end of the gradient shows, aiding legibility.

a:hover {
   color: white;
   background-image: url(images/hover_mainnav.png);
   background-position: top right;

When the mouse hovers over a button, then the colours simply reverse, with white over a darker colour gradient. Note the colon separating the "a" and "hover". this is used because "hover" is a pseudo class of an anchor, the others being "link", "visited" and "active".

The tab menu was a bit of a struggle to start with as I was trying to achieve too many things at once. It is still not completely finished, but I will leave telling you what has to be done till after I have described the current implementation.

The appeal of using tab navigation, apart from it being "cool", is that it avoids multi-level menus whilst clearly grouping like pages together. Here is the HTML, which is very similar to that used for button menus.

<div id="tabhead">
      <li id="current"><a></a></li>
<div id="tabpage">
   "Content goes here"

There are two <div> structures, with IDs of "tabhead" and "tabpage". The menu list is in "tabhead" and I will concentrate on the CSS for that.

Before that, it is worth noting that the list and list items carry no class attributes. They are children of an element that has an ID, so any CSS applied to them is constrained within that ID, as you will see in the CSS.

And here is the CSS.

#tabhead {
   clear: both;
   margin-left: 100px;

The "clear both" attribute drops the tab row below the button menu and is a matter of choice. Currently, it is set, but tomorrow I may change my mind. Then we set the absolute margin on the left. Note the hash sign that denotes an ID. Once it is declared, an ID can be used to style HTML elements that are to be used in the particular ID structure. So the ul and li elements shown below only take the style when they occur within a structure with ID of "tabhead".

#tabhead ul {
   list-style: none;
   padding: 0;

The unordered list CSS simply removes any default list style.

#tabhead li {
   float: left;
   background-image: url(images/right_tab.png);
   background-repeat: no-repeat;
   background-position: right top;

The <li> element is where I set the look of the tabs with a background image. Originally I intended a rounded look for the tabs and so there was a right hand image and a left hand image to achieve the sliding doors effect: See here for a description of how that works. However I liked the asymmetric effect of just using the right hand image and the CSS is slightly simpler.

#tabhead a {
   display: block;
   font-family:  verdana, helvetica, arial, sans-serif;
   text-decoration: none;
   font-size: 95%;
   padding: .5em 1.4em .5em .4em; 
   color: #8B0000;

#tabhead #current {
	background-image: url(images/right_tab_current.png);
	border-left: 1px #8B0000 solid;

#tabhead a:hover {
	color: white;
	background-image: url(images/tab_hover.png);
	background-position: right top;

The CSS for the anchor is very simple, but it is worth taking some time over the padding, as small changes can have a significant effect on both style and legibility as the user changes text size.

The final pieces of tab style simply colour the current tab, adding a left border to increase emphasis. and colour the tab when the mouse is hovering over it. An ID rather than class is used to distinguish the current tab, as there can only ever be one of them.

I think that the current menu structures and associated styles should be robust enough to survive an increase in site complexity and there is only one outstanding item on my to do list for them. The red borders on the unselected tabs need to be removed and there are a few stray white pixels just outside the rounded edge. But I will leave that for a wet Wednesday sometime.

I hope that these notes have shown anyone thinking of creating their own web pages that there is nothing very complicated about it. I found that it was necessary to clear my head of application programming baggage and treat it purely as a publishing exercise but, that aside, it was just a matter of slowly building up from the raw information through ordered information to styled ordered information. Could I do it better? Of course I could and I will.

Last updated 15 January 2009