Quantum Gypsies

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>
   </ul>
</div>

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">
   <ul>
      <li></a></li>
      <li id="current"><a></a></li>
   </ul>
</div>
<div id="tabpage">
   "Content goes here"
</div>

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.