Pestañas CSS: mejora de detalles

  • Por
  • CSS
Vamos a mejorar un pequeño detalle de la interfaz de pestañas CSS creada en un artículo anterior, para colocar una línea debajo de las pestañas y mostrar cuál es la que está abierta.
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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

jules__cesar

17/6/2009
Muy bueno, el manual
Gracias estaba buscando como hacer eso, sobretodo con explicaciones "muy bien explicadas". Pero, como hago para desactivar y desaparecer el contenido de la pestaña activa al hacer click en otra pestaña.

En ese link, podemos ver un ejemplo:
http://es.eurosport.yahoo.com/baloncesto/

Gracias !

jules__cesar

18/6/2009
Ya esta !
Hola de nuevo, ya encuentré lo que estaba buscando.
(Pestañas dinaicas con css y Mootools)

peter

19/6/2009
muy bueno
excelente aporte hermano

josema

05/8/2009
MANUAL CSS
Un manual muy bueno, ameno y sencillo, con gran cantidad de solucienes practicas y sencillas. Seguir así.

SALUD Y LIBERTAD

Rob

27/1/2010
problemas al dimensionar el browser
Hola, muy bueno tu codigo pero hay un problema y es que cuando cambio de tamaño la ventana del browser...el diseño de tus menus se desconfiguran apilandose hacia un lado...
Como se podria sollucionar esto!!!!

Jorge

02/2/2010
Solo falta el rollover
Excelente tutorial.
Solo se me ocurre añadir un rollover a las pestañas, que imagino que sería como el explicado en alguno de los artículos precedentes; por ejemplo, cambiando las imágenes de fondo, o modificando el color del texto, al pasar el ratón por encima.

Juan Manuel

08/3/2010
pestaña que te lleve a otra pagina
muy buena esta pagina pk es con la unica q mejor estoy entendiendo las cosas.
yo quiero saber con esto de las pestañas q es lo q tendria q hacer para cuando le de a una con el raton me lleve a otra pagina

hugo

19/8/2011
SOLAPAS CSS
Excelente el tutorial, fue muy util para mi. Estaba buscando algo asi, simple y completo.