Maquetación de un recuadro con pestañas con CSS

  • Por
  • CSS
Un taller de maquetación CSS en el que creamos un recuadro que tiene diversas pestañas para mostrar contenidos diversos en un mismo espacio.
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

Referencias: Si te ha interesado el tema y quieres mejorar las técnicas de diseño y maquetación de interfaces de usuario de tipo pestañas, te recomendamos ver una serie de artículos que hemos publicado en DesarrolloWeb.com sobre el tema. Como muestra, os dejamos aquí unos enlaces a algunos de ellos:

Para encontrar éstas y otras referencias que podamos publicar en el futuro sobre creación de pestañas con CSS, os recomendamos usar el buscador interno de DesarrolloWeb.com.

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

Anonimo

22/3/2008
Ya que usáis la propiedad left en la listas, deberéis añadir la propiedad

overflow:hidden; para englobar cualquier elemento flotante de dentro ;)

1 salu2!

Hernán

27/3/2008
No funciona en Mozilla Firefox 2.0.0.8

libero

10/5/2009
Interfaz de Pestanas
En el articulo "MAQUETACION DE UN RECUADRO CON PESTANAS CON CSS" quisiera que publicaras los script para que funcione el interfaz de las otras dos pestanas. Es una herramienta excelente para entregar informacion al usuario como complemento del tema principal.

Eyza Antonio

02/12/2009
revisar
Revisar sintaxis de scripts CSS. Si no funciona a la primera, hay que hacer los espacios correspondientes entre la función y la variable

funcion: variable; esta es la forma correcta de escribirla, con un espacio entre ambas.

ronaldo

28/12/2009
no funciona
que lastima , la verdad cada vez es mas dificil encontrar contenidos de calidad. Esta pagina sale de 2do en los resultados de google buscando "pestañas css" y no funciona en firefox ni se han preocupado en ver los comentarios de otro que ya haviso que no no sirve.