Creación de menú por solapas en CSS

Javier Pérez Pacheco

http://www.javielinux.tk

javi.pacheco@terra.es

2003

Historial de revisiones
Revisión 0.1	19 de diciembre del 2003
Prueba para el documento.

Tabla de contenidos
1. Código HTML
2. Código CSS

El objetivo de este documento es mostrar como he realizado las solapas de mi Página Web. Están completamente hechas con Hojas de Estilos a partir de un artículo en inglés que leí hace un tiempo. La forma de realizarlo es muy sencilla y para realizar modificaciones en las solapas es bastante cómodo. Espero que os sirva de ayuda.

1. Código HTML

A continuación muestro el código HTML de mi página para las solapas y lo explico un poco.

Ejemplo 1. Código HTML

<div id="menu">

    <div id="activo"><a href="index.php">Portada</a></div>

    <div><a href="mitrabajo.php">Mi trabajo</a></div>

    <div><a href="fotografia.php">Fotografía</a></div>

    <div><a href="linux.php">Linux</a></div>

    <div><a href="programacion.php">Programación</a></div>

    <div><a href="factoria.php">Factoría</a></div>

</div>

Fácil ¿no?. Lo primero de todo es crear un bloque <div> con el identificado "menu". Este bloque será posicionado dentro del elemento donde queramos que aparezca nuestro menú por solapas. Después veremos el código CSS para todas clases e identificadores. Luego tendremos que hacer una serie de <div> con los enlaces a cada una de nuestras secciones. El enlace que se encuentre actico tendremos que ponerle el identificado "activo". Nuestro código HTML a terminado ya, sólo nos falta colocar los CSS.