Tabs

Autor Original:Mike Hall URL ORIGINAL : http://www.brainjar.com/css/tabs/ TÍTULO ORIGINAL : Tabs Traducción al castellano:Pedro Palazón Candel URL CASTELLANO : http://kusor.net/traducciones/brainjar.es/tabs1.es.html

Tabs

Ver la página  demo para obtener la versión final del código.

En este ejemplo, vamos a ver cómo crear una presentación con "tabs", (entiéndase como solapas o pestañas), utilizando CSS. Una interfaz en la que el usuario pueda hacer click en cada solapa individual para ver contenido diferente en el mismo espacio.

Esto va a requerir unas pocas líneas de JavaScript para actualizar dinámicamente las solapas individuales pero pero nos ocuparemos de dicho código más tarde. Por ahora, veamos cómo construir la presentación.

Construyendo la Presentación

Las Solapas

Las Solapas constan de simples etiquetas A, que usan clases de estilos diseñadas para hacer que parezcan las pequeñas solapas que encontramos en las carpetas de archivos.

Tab A Tab B Tab C Tab D

El código CSS y HTML se muestra debajo. Cada solapa es básicamente una caja pequeña con un borde en tres lados.

div.tabArea {
font-size: 80%;
font-weight: bold;
}

a.tab {
background-color: #f0f0f0;
border: 1px solid #000000;
border-bottom-width: 0px;
padding: 2px 1em 2px 1em;
text-decoration: none;
}

a.tab, a.tab:visited {
color: #808080;
}

a.tab:hover {
background-color: #d0d0d0;
color: #606060;
}

...

<div class="tabArea">
<a class="tab">Tab A</a>
<a class="tab">Tab B</a>
<a class="tab">Tab C</a>
<a class="tab">Tab D</a>
</div>

El elemento DIV externo nos proporciona un contenedor para las solapas, es la clase "tabArea" en la que fijamos una fuente básica para las solapas. La clase "tab" crea un aspecto de caja para los links individuales y, mediante la pseudo-clase a:hover, resaltamos las solapas en los mouseover.

La Solapa Activa

Para crear una solapa que aparente estar más arriba, definimos una nueva clase de estilo denominada "activeTab" que podemos combinar entonces con la clase "tab" en cualquier link.

a.tab.activeTab, a.tab.activeTab:hover, a.tab.activeTab:visited {
background-color: #c0c0c0;
color: #000000;
}

Y entonces actualizamos el código HTML, para hacer que una solapa aparente estar activa, añadiendo este nombre de clase a la etiqueta del vínculo.

Puedes asignar multiples clases de estilo a un elemento separando los nombres con espacios en su atributo CLASS.
<div class="tabArea">
<a class="tab">Tab A</a>
<a class="tab">Tab B</a>
<a class="tab activeTab">Tab C</a>
<a class="tab">Tab D</a>
</div>

Esto produciría el efecto que se muestra debajo.

Tab A Tab B Tab C Tab D

El Área de Contenido 

A continuación viene el área donde debe mostrarse el contenido para las solapas. Éste  va a consistir en un IFRAME dentro de una etiqueta DIV. Una clase de estilo es definida para la capa DIV exterior para hacer que muestre el estilo de la solapa activa.

div.tabMain {
background-color: #c0c0c0;
border: 1px solid #000000;
padding: 1em;
}

...

<div class="tabMain">
<iframe src="sample.html" marginheight="8" marginwidth="8"
frameborder="0"></iframe>
</div>

Mira el resultado debajo.

Como puedes ver, ésto no es del todo correcto. El problema es que el IFRAME no rellena el área de la capa DIV. La solución podría ser darle a la iframe un estilo en el que fijemos width:100%. Desafortunadamente, ésto no funciona en Internet Explorer, que hace que el iframe sea justo un poco más pequeño, aparentemente no considerando la barra vertical de scroll. El borde derecho se extiende demasiado, solapándose con la capa DIV que lo contiene.

Para solucionar ésto, otra etiqueta DIV es utilizada como una envoltura para la etiqueta IFRAME. Ambas, esta etiqueta y la iframe, tienen un ancho en su estilo del 100%.

div.tabMain {
background-color: #c0c0c0;
border: 1px solid #000000;
padding: 1em;
}

div.tabIframeWrapper {
width: 100%;
}

iframe.tabContent {
background-color: #c0c0c0;
border: 1px solid #000000;
width: 100%;
}

...

<div class="tabMain">
<div class="tabIframeWrapper">
<iframe class="tabContent" src="sample.html"
marginheight="8" marginwidth="8" frameborder="0"></iframe>
</div>
</div>

Al iframe también se le ha fijado un borde, para darle un aspecto más definido. El resultado puede ser visto debajo.

Mucho mejor. La siguiene etapa es poner las solapas encima de su área de contenido.

Siguiente

BrainJar.com · ©1999-2002 by Mike Hall 
Publicado con autorización explícita del autor.
Puedes encontrar más artículos y tutoriales relacionados con dhtml en esta web.