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. Check out this revised rendition… and use it for your next site!

Consequently, I thought I’d have a go at creating an A to Z index (Compliments of Smiley Cat) along the same lines that doesn’t break when you resize your text.

The code is pretty straight forward. Here’s the CSS:

#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">
<ul id="index">
<li><a href="#a">A</a></li>
<li><a href="#b">B</a></li>
<li><a href="#c">C</a></li>
<li><a href="#">etc</a></li>
<li><a href="#z">Z</a></li>
</ul>
</div>

Pretty simple, but hopefully it’ll be useful to someone.