Autor Tema: Como modificar pestañas con CSS?  (Leído 2687 veces)

duralai

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 35
    • Ver Perfil
Como modificar pestañas con CSS?
« en: 09 de Diciembre 2014, 04:31 »
Hola gente, tengo una duda con una pagina y quería ver si me pueden sacar algunas dudas.
El problema es así, tengo una pagina cuya totalidad es un cuadrado de 655px de ancho por 255 de alto aproximadamente, es así porque en el body solo hay una imagen de fondo de esta medida.
El problema que quiero resolver viene acá: dentro de ese cuadrado hay una parte en donde los contenidos se muestran en 3 pestañas, y para esto se usa Javascript, y lo que yo quiero es modificar esta pagina con CSS para que no necesite Javascript, y poder ver las pestañas por SEPARADO.
El codigo seria algo asi:
Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
</head>

<body>
<div id="contenedorTotal" class="corto" style="width: 655px;">
 <div id="data" class="dataNormal">
  <div id="dataContainer">
   <div id="dataTabs" class="tabs">
    <div id="ATab" class="tab activeTab">Tab A</div>
    <div id="BTab" class="tab">Tab B</div>
    <div id="CTab" class="tab">Tab C</div>
   </div>
   <div id="dataContents" class="content">
    <div id="dataContenContainer" class="contentContainer">
     <div id="TabAContentScrollable" class="contentMain">
      <div id="TabAContentScroller" class="contentScroller">
      <div id="TabAContent" class="scrolling">
     </div>
     <div id="TabBContent">
      <table>
       <thead>......</thead>
       <tbody>......</tbody>
      </table>
     </div>
     <div id="TabCContentScrollable" class="contentMain">
      <div id="TabCContentScroller" class="contentScroller">
      <div id="TabCContent" class="scrolling"
       <div id="TabCContentPart1"
       <div id="TabCContentPart2"       
      </div>
     </div>
    </div>
</body>

</html>

En una parte del documento la información se ve en forma de 3 pestañas: TabA, TabB y TabC, YO QUISIERA VER LAS 3 TABLAS AL MISMO TIEMPO, UNA PEGADA A LA OTRA, se podría modificar con CSS o CSS3?

« Última modificación: 10 de Diciembre 2014, 08:28 por Ogramar »

javi in the sky

  • Avanzado
  • ****
  • Mensajes: 393
    • Ver Perfil
Re:Como modificar pestañas cpn CSS?
« Respuesta #1 en: 09 de Diciembre 2014, 10:49 »
Hola, depende de cómo se generen los contenidos html. Los contenidos puede que se carguen desde el momento inicial (html estático) o puede que sean cargados a través de javascript. Con el código que has puesto lo único que he logrado ver es tabA, tabB, tabC. Si tienes la web online dime cuál es la url para poder consultarla. Si no la tienes online habría que ver todo el código incluido el javascript para ver cómo se genera el html.

Si tienes html estático, lo único que tendrías que hacer es modificar el html y el css para que se muestre todo el contenido de una sola vez. Si tienes el contenido generado por javascript y quieres prescindir de javascript habría que estudiarlo, por decirlo de alguna manera tendrías que generar ese contenido a mano para poder cargarlo de golpe.

Saludox

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".