Vamos a hacer con CSS una maquetación de un recuadro que tiene una serie de pestañas o solapas, que habremos visto en numerosas ocasiones en interfaces de usuario diversas y en páginas web. Estos recuadros permiten hacer clic en cada una de las solapas o pestañas para mostrar contenidos en un área. Pulsando una pestaña distinta se muestran otros contenidos en el mismo espacio donde estaban los anteriores, por lo que esta interfaz de usuario nos puede servir para mostrar distintos contenidos, bajo demanda de usuario, en un mismo espacio.

Este artículo sólo va a especificar cómo se podría maquetar con HTML y CSS este sistema de etiquetas, sin hacer los scripts necesarios para ponerlo en marcha. En otros artículos explicaremos cómo hacer que esta interfaz responda a las acciones del usuario, para que pulsando cada pestaña se cambien los contenidos del recuadro para mostrar los relacionados con esta solapa. Como la creación de esta maqueta ya reviste una relativa complejidad por si sola, la vamos a explicar en este taller de CSS.

Para entender bien de qué estamos hablando, lo mejor es ver uno de los ejemplos que hemos creado.

Código HTML de la interfaz

Hemos creado un sencillo código HTML que sea suficientemente versátil para soportar varios tipos de diseño, simplemente alterando la hoja de estilos en cascada CSS.

<div class="interfazpestanas">
   <div class="pestanas">
      <ul>
      <li class="pestanaseleccionada">Opción 1</li>
      <li>Opción 2</li>
      <li>Opción 3</li>
      </ul>
      <div class="cuerpopestanas">
         Esto es el cuerpo de las pestañas?
      </div>
   </div>
</div>

Como se puede ver, ha quedado un HTML bastante sencillo. Está claro que se podría haber complicado algo más para poder alcanzar un grado mayor de detalle, pero con lo que hemos hecho obtenemos un resultado bastante versátil y potente de cara a darle un aspecto atractivo con CSS.

Como se puede ver, tenemos una capa de class "pestanas" donde vamos a colocar el conjunto de solapas o pestañas y el cuerpo donde se mostrará toda la información de cada pestaña.

Dentro hemos colocado una lista UL donde cada uno de sus elementos LI serán cada una de las pestañas del conjunto. Además, vemos que la pestaña que está seleccionada en un momento dado tiene una clase class="pestanaseleccionada", para poder asignarle un estilo distinto.

Por último, para definir el lugar donde se muestra el cuerpo de cada pestaña hemos utilizado otra capa con class="cuerpopestanas".

Bueno… resulta bastante sencillo y esquemático. Ahora veremos la parte más interesante, que es donde damos estilos CSS al diseño HTML.

Estilos CSS para definir el aspecto de la interfaz de pestañas

Veamos las hojas de estilos utilizadas para definir el aspecto de la interfaz de pestañas.

.pestanas{
   width: 350px;
}
.pestanas ul{
   margin:0px;
   padding:0px;
   list-style: none;
}
.pestanas li{
   float:left;
   margin:0px 6px 0px 0px;
   padding:4px 6px 4px 6px;
   background-color: #999999;
   color: #eeeeee;
   font-size:8pt;
}
li.pestanaseleccionada{
   background-color: #333366;
   color: #ffffff;
   font-weight: bold;
}
.cuerpopestanas{
   background-color: #333366;
   color: ffffff;
   clear:both;   
   margin:0px;
   padding:4px;
   height: 300px;
   overflow: auto;
}

Como vemos, a la interfaz le hemos dado un espacio de 300 pixel.

La lista la hemos definido para que no tenga márgenes ni bullets (esos puntitos que se colocan antes de cada elemento) de ningún tipo. Luego, los elementos de la lista tienen ya un margen y un padding y, lo más importante, es que tienen el float:left; para que se pongan uno detrás de otro en lugar de uno debajo de otro. Como habíamos marcado en HTML, la pestaña seleccionada tiene un estilo particular que hemos definido con la clase li.pestanaseleccionada, que simplemente tiene un cambio de color de fondo y del texto.

Para acabar, tenemos la clase cuerpopestanas, que es donde definimos la altura de la interfaz. Tenemos también un clear:both; para que el cuerpo no tenga en cuenta el float de los elementos de la lista donde hemos colocado las pestañas. Pero lo más importante es el overflow: auto para que salgan unas barras de desplazamiento verticales, en caso que el contenido del texto, o lo que haya dentro, ocupe más que el alto del cuerpo de las pestañas.

Con esta declaración de estilos hemos conseguido este efecto, que podemos ver en la URL: http://www.desarrolloweb.com/articulos/ejemplos/tallercss/pestanas/pestanas.html

Pero hemos creado otras declaraciones de estilos CSS para hacer este mismo esquema pero con otros aspectos:

Ejemplo 2:
Ver ejemplo
Con esta hoja de estilos

Ejemplo 3:
Ver ejemplo
Con esta hoja de estilos