En un artículo anterior creamos un sistema de pestañas maquetado completamente con CSS a partir de listas y con una técnica llamada "puertas deslizantes". En el mencionado artículo explicamos cómo definir estilos a la lista y a los enlaces para que tuvieran el aspecto de pestañas o tabs. Entonces creamos dos tipos de pestañas, una para cuando la pestaña está activa o seleccionada y otra para cuando no está activa.

Lo que nos faltó comentar es cómo crear una línea o algo similar debajo de las pestañas para conseguir el efecto de que la pestaña activa parezca que está abierta y las otras pestañas, no activas, que parezcan cerradas. Para ver lo que queremos explicar, lo mejor es ver un ejemplo en una página aparte.

Fondo para la capa donde están las pestañas

Vamos a tener que crear un fondo de imagen para la capa donde están las pestañas. El fondo podrá ser como nosotros queramos, pero la imagen deberá tener en la parte de abajo una línea que sirva para cerrar las pestañas en la base de éstas. Por ejemplo, podríamos utilizar un fondo como el de la siguiente imagen:

En nuestro ejemplo esta capa le pusimos id="pestanas", así que para especificar el fondo de este elemento tenemos que alterar el CSS de la siguiente manera:

#pestanas {
   float:left;
   width:100%;
   line-height:normal;
   font-size: 16px;
   font-weight: bold;
   /*pongo un fondo para toda capa donde están las pestañas*/
   background: transparent url(fondo-pestanas.gif) repeat-x bottom;
}

Mostrar, o no, la línea que cierra las pestañas

Ahora tenemos que definir un padding en la base (bottom) de los enlaces para dejar ver, o no, la línea que cierra las pestañas. La pestaña activa no debe dejar verse el fondo con la línea que cierra las pestañas, para que parezca que está abierta.

Esto es bastante sencillo de hacer, aunque quizás un poco más difícil de explicar. Simplemente vamos a definir dos padding-bottom distintos, para los enlaces de las pestañas en general y para el enlace de la pestaña activa en particular. El padding-bottom de la pestaña activa deberá ser tantos píxeles mayor como sea la altura de la línea que cierra las pestañas (que hemos definido en el fondo, en nuestro caso 1 píxel). Así conseguiremos que el enlace de la pestaña activa llegue hasta abajo del todo de la capa donde están las pestañas (id="pestanas"), sobreponiéndose a la línea del fondo y sin permitir que se vea. Las pestañas desactivadas tendrán menos padding-bottom, con lo que no llegarán al fondo de la capa donde están las pestañas y dejarán entrever la línea del fondo que las cierra.

#pestanas a {
   display:block;
   background:url("p-izq.gif") no-repeat left top;
   padding:3px 10px 3px 10px;
   color: #fff;
   text-decoration: none;
   /*definimos un padding para los enlaces de las pestañas*/
   padding-bottom: 2px;
}
#pestanas .activa a{
   background-image:url("p-izq-activo.gif");
   /*colocamos un padding 1 pixel mayor que el padding de los enlaces no activos*/
   padding-bottom:3px;
}

Y estas son las únicas modificaciones que habría que hacer para que la interfaz de pestañas tenga una línea para delimitar las tabs no activas.

Contenedor para la pestaña activa

Sin embargo, para que se viese bien el efecto de pestaña activa, he colocado debajo de las pestañas una nueva capa que serviría como contenedor del contenido de la pestaña seleccionada. Este contenedor, insisto, no haría falta para nuestro ejemplo de pestañas y cada uno lo puede definir como le parezca mejor, pero nos vendrá bien colocarlo para mostrar con más claridad el efecto explicado en este artículo.

El contenedor es una simple capa DIV con un texto, a la que tendremos que asignar unos estilos CSS, que podemos ver a continuación:

<div id="contenedorpestanas">
Aquí se mostraría el contenido de la pestaña activa...
</div>

#contenedorpestanas{
   background-color: #ccb355;
   padding: 10px;
   clear: both;
}

Entre los estilos colocados hay dos que serían importantes. Primero el fondo del contenedor, que lo he colocado con el mismo color de la pestaña activa, para que se continúe el color desde ésta hacia el contenedor y parezca que formen parte de un mismo bloque. Luego necesitaba también un estilo clear:both, puesto que los elementos de la lista estaban con un "float" y esta nueva capa id="contenedorpestanas" queremos que aparezca justo debajo.

Podemos ver el ejemplo mejorado de las pestañas CSS en funcionamiento en una página aparte.