Styling an Alphabet of 26 Letters in HTML and CSS

• Tweet

• Tweet

What does an alphabet have for us to style? It’s no more than a list of 26 single-letter items! Yep. But wait until you have seen this alphabet of 26 letters author index.

Now do you want to know how to achieve that? I coded it quite a while back and it just occurred to me that it would be nice to share it with my fellow readers. You can easily apply the hover tricks to other applications.

The HTML

I know, it’s everything but simplicity and clean code. That is the price for the interactive delicacies.

<div id="author_alphabetic">
	<ul>
		<li><a href="#" title="A"><span class="first"><span>A</span></span></a></li>
		...
		<li><a href="#" title="Z"><span class="first"><span>Z</span></span></a></li>
	</ul>
</div>

Note the extra span I have for the letter links for the fly out and rounded corner background.

The CSS

#author_alphabetic {
	text-align:center;
}
#author_alphabetic ul {
}
#author_alphabetic li {
	float:left;
	margin:3px 3px 0 0;
}
#author_alphabetic a {
	position:relative;
	width:74px;
	height:74px;
	border:1px solid rgb(203, 214, 149);
	text-decoration:none;
	font:2.4em/2.4em "Times New Roman";
	float:left;
	display:inline;
	color:#330;
}
#author_alphabetic a span {
	background:url(../image/alpha_br.png) no-repeat right bottom;
	width:75px;
	height:75px;
	display:block;
	position:absolute;
	top:0;
	left:0;
}
#author_alphabetic a:hover {
	background:rgb(224, 232, 158);
	z-index:100;
}
#author_alphabetic a:hover span.first {
	display:block;
	font-size:3em;
	line-height:1.1;
	font-weight:bold;
	color:#15362d;
	cursor:pointer;
	width:100px;
	height:100px;
	top:-1px;
	left:-1px;
	background:rgb(224, 232, 158);
	border:1px solid rgb(203, 214, 149);
}
#author_alphabetic a:hover span span {
	background:url(../image/alpha_br.png) no-repeat right bottom;
	display:block;
	position:absolute;
	width:101px;
	height:101px;
}

Highlighted style rules are the ones that you should pay special attention to in this technique. A similar application can be spotted with the top deep blue menu at the home page of Charm HTML wherein you can make the size of the inner element bigger than the container or the position of it out of the normal document flow to mimic an outstanding bookmark while keeping the underlying layout intact.