I've always been taken with the way that the BBC styles their A-Z index using a simple list and CSS. However, because they use pixels to set the dimensions of each list item, the design breaks when you increase the text size.

It's always been important to me not to break the browser's ability to resize text and so I thought I'd have a go at creating an A to Z index along the same lines that doesn't break when you resize your text.

The code is actually pretty straight forward. Here's the CSS first:

 #azindex {

background: #75B9D0;

float: left;

margin: 5px 0 20px 10px;

padding: 0px 5px 15px 5px;

width: 520px;

}

 * html #azindex {

padding: 5px 5px 10px 5px;

width: 490px;

}

#index {

font: bold 100% Verdana, Helvetica, sans-serif;

margin: 0;

padding: 0;

}

#index li {

float: left;

height: 2em;

list-style-type: none;

margin: 0.65em 0.3em;

padding: 0;

width: 3em;

}

 * html #index li {

margin: 0.2em 0.2em;

}

#index a:link, #index a:visited {

background: #fff;

color: navy;

display: block;

height: 2em;

padding: 0.75em 0 0 0;

text-align: center;

text-decoration: none;

width: 3em;

}

#index a:hover {

background: #93D1E4;

color: #fff;

text-decoration: underline;

}

And here's the HTML:

< div id="azindex">

< a href ="#a"> A

< a href ="#b"> B

< a href ="#c"> C

< a href ="#"> etc

< a href ="#z"> Z

And there you have it - an easy way to add a nice design to what would otherwise have been a boring list. You can find a link to an example in the resource box below.