Tabs

Posicionando las Solapas y el Contenido

Primero, vamos a combinar simplemente estos dos componentes colocando los HTML juntos.

<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>
<div class="tabMain">
  <div class="tabIframeWrapper">
    <iframe class="tabContent" src="sample.html"
     marginheight="8" marginwidth="8" frameborder="0"></iframe>
  </div>
</div>

Esto nos dará el resultado que se muestra debajo.

El problema obvio está donde la parte de abajo de las solapas se encuentra con la parte superior de la capa DIV principal. Tanto para IE como para Netscape, las solapas se superponen un poco con la capa DIV de contenido the content DIV, cubriendo el borde.

El efecto deseado es es hacer que el borde superior de la capa DIV coincida con el borde de la solapa activa, para que aparenten ser una sóla, mientras que las otras solapas deberían aparentar estar detrás de ellas.

Componiendo los Elementos

La solución es convertir las solapas y la capa DIV principal en elementos posicionados. Entonces se superpondrán correctamente y la propiedad de estilo z-index podrá ser utilizada para situar una por encima o por debajo de las otras.

Para lograr esto,la regla position:relative; es agregada a las clases de estilo definidas previamente. La propiedad de estilo top es fijada para las solapas, haciendo que éstas se superpongan a la capa DIV principal justamente lo necesario y la propiedad z-index se fija para establecer el orden de apilamiento apropiado.

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

a.tab.activeTab {
  z-index: 102;
}

div.tabMain {
  background-color: #c0c0c0;
  border: 1px solid #000000;
  padding: 1em;
  position: relative;
  z-index: 101;
}

El resultado puede verse debajo. Nótese como el color de fondo de la solapa activa cubre el borde superior de la capa DIV de contenido mientras que sus bordes laterales se extienden hacia abajo lo suficiente como para tocar la parte superior de la capa DIV.

La solapa activa tiene un z-index más alto, por lo que aparenta estar por encima de la capa de contenido DIV. Dicha DIV, por su parte, tiene un z-index más alto que las solapas normales por lo que éstas aparentan estar por debajo de ella. El resultado final provoca que el borde de la solapa activa y el de la capa DIV principal aparenten ser una línea continua o un filo serpenteante alrededor de dichos elementos mientras que las solapas inactivas colocadas detrás de ellas.

Para clarificar un poco ésto, aquí está la misma composición pero con el color de fondo de la solapa activa modificado y con su borde inferior fijado para que puedas ver cómo está posicionado.

Terminando la Presentación

El último paso es colocar el lote completo en otra etiqueta DIV.

<div>
  <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>
  <div class="tabMain">
    <div class="tabIframeWrapper">
      <iframe class="tabContent" src="sample.html"
       marginheight="8" marginwidth="8" frameborder="0"></iframe>
    </div>
  </div>
</div>

Esto te permite, por ejemplo, fijar un ancho fijo para la presentación asignando e estilo simplemente para la etiqueta DIV más externa. Podrías hacer también que flotase la composición entera a un lado o posicionarla absolutamente.

Una cosa en la que tenemos que fijarnos, de cualquier modo, es en dejar espacio suficiente para colocar las solapas de modo que éstas no se superpongan.

Enlazando las solapas

Hasta ahora en éstos ejemplos, las solapas no tenían fijado un link a ninguna parte. Ésto es fácil de solucionar.

En orden de hacer aparecer nuevo contenido en la composición con solapas, se le ha dado un nombre al IFRAME, los links tienen sus atributos HREF y TARGET fijados para dicho frame.

<div>
  <div class="tabArea">
    <a class="tab" href="a.html" target="myIframe">Tab A</a>
    <a class="tab" href="b.html" target="myIframe">Tab B</a>
    <a class="tab" href="c.html" target="myIframe">Tab C</a>
    <a class="tab" href="d.html" target="myIframe">Tab D</a>
  </div>
  <div class="tabMain">
    <div class="tabIframeWrapper">
      <iframe class="tabContent" name="myIframe" src="c.html"
       marginheight="8" marginwidth="8" frameborder="0"></iframe>
    </div>
  </div>
</div>

Nótese que el nombre de clase "activeTab" ha sido eliminado. Vamos a fijar la solapa activa usando algo de JavaScript del que nos ocuparemos enseguida. Por ahora, pruébalo.

Ahora puedes hacer click en cualquier solapa y cargar la página correspondiente en el área de contenido. La única pieza perdida es la solapa activa. Ésta debería cambiar cuando hagas click en las diferentes solapas.

Previo | Siguiente