listado-a-z-css

Siempre viene bien organizar nuestro contenido. Hay muchas formas de organizarlo, mediante pestañas, menús, categorías… Otra forma clara y sencilla es poder organizarlo mediante un listado de la A a la Z. Aquí aprenderemos a crear un listado de este tipo para organizar mejor nuestro contenido, usando exclusivamente CSS con su respectivo HTML.

Es un listado parecido al que existe actualmente en la web de BBC. Si nos ponemos a mirar el código por encima, vemos una simple lista estilizada, y así es, tan simple como eso:

Código CSS

En el código CSS vemos una lista con disposición en bloque, con fondos en los items en posición normal y hover.

#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;
}

Código HTML

Una lista metida dentro de un div que define el ancho, color de fondo, los márgenes y paddings del bloque principal:

<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>

Estandarización

CSS 2.1 válido.

XHTML 1.0 Transitional válido.

Ejemplo de su funcionamiento

¿Os gusta?

Vía | SmileyCat