Capas que se expandan a todo el ancho de la pantalla

lemmoner · #1 (**permalink**) 05/08/2009, 11:59

Hola a todos,

Estoy empezando a trabajar con CSS, así que quizás mi pregunta sea una tontería, pero me trae de cabeza.

Estoy utilizando capas que contienen tablas. Y quiero que, tanto la capa como la tabla ocupen todo el ancho de la pantalla. La única manera que he encontrado es forzar el ancho de la tabla al máximo <table width="100%">, que al parecer fuerza a que la capa se expanda.

En IE6, cuando hago esto, desaparece el borde derecho de la capa. Es como si la capa estuviese de fondo y la tabla creciese por encima de la capa, ocultando parte de su contenido. He visto que reduciendo la tabla al 95-98%, dependiendo en qué situaciones, esto no sucede, pero me parece muy poco práctico tener que retocar todas las tablas que están contenidas en alguna capa.

En Firefox no sucede esto, pero es que poniendo la tabla al 100% el ancho que ocupa es menor que en IE6. Y si fuerzo la capa que hay dentro de esta tabla a que tenga una anchura del 100% (style:"width=100%"), entonces la capa ocupa más que la tabla y se me descentra el contenido de la tabla.

Cómo puedo hacer que las capas ocupen todo el ancho de la pantalla (independientemente de que su contenido necesite todo ese ancho)?

Espero que haya quedado claro que parece todo un embrollo del 15

jomaruro · #2 (**permalink**) 05/08/2009, 14:25

Hola:

Creo que no te va tocar "retocar" todas las tablas, la diferencia está en que no todos los navegadores interpretan igual las medidas de los div, hay que tener en cuenta los margin, los padding, los border e incluso la barra de scroll del navegador, que dicho sea de paso no se si miden lo mismo en Firefox e IE.

Saludos.

txusweb · #3 (**permalink**) 05/08/2009, 19:13

Creo que tienes un pequeño lio con tablas divs y todos eso. Empieza despacio, un div por defecto ocupa todo el espacio disponible es decir el 100% de ancho.

No se que lio tienes montado pero primero estudia bien css y practica con ejemplos sencillos y seguro que luego lo ves todo más claro

Un saludo.

lemmoner · #4 (**permalink**) 06/08/2009, 06:12

Después de reducir todo el código al mínimo, creo que ya dí con el problema. Parece que IE6 no interpreta correctamente los parámetros padding. Cuando tengo capas con relleno (parámetro padding), el IE6, en lugar de descontar ese relleno al ancho de la pantalla, se lo suma.

Es decir, si mi pantalla tiene resolución 1280x1024 y le meto a la capa un padding lateral de 20px por izqda y derecha, el IE6 pinta una pantalla de 1320x1024. Cuando esta capa está "libre", el IE6 lo pinta y habilita las barras de desplazamiento para que te muevas hacia la dcha y veas todo el contenido (mal, pero bueno).
Pero cuando la capa está dentro de una tabla, como la tabla no puede ocupar más del 100% de la pantalla (1280px), es cuando se pierden esos 40px de la derecha de la capa.

El código problemático que estoy viendo.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
  <head>
    <title>ESTRUCTURAS DE ALMACENAMIENTO. GESTI&OACUTE;N DE ESPACIOS
  </title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <LINK REL="STYLESHEET" TYPE="TEXT/CSS" HREF="../../PLANTILLA/ESTILOS2.CSS">
  </head>
  <body>
  <!-- CONTENEDOR -->
    <table width="100%"><tr><td> <!-- AL ELIMINAR ESTA TABLA, APARECEN LAS BARRAS DE DESPLAZAMIENTO EN IE6-->
      <div class="cuadro1">
        <br>
        <!-- CAPA INTRO -->
        <div class="cuadro4_discontinuo">
          <br>
          <!-- DESCRIPCION -->
          <table width="100%" align="center" border="1" bordercolor="black">
            <tr>
              <td><p>Texto de prueba:</p><br><br><br></td>
              <td><img src="./img/img1.gif"></td>
            </tr>
          </table>
          <br>
          <!-- FIN DESCRIPCION -->
        </div>
        <!-- FIN CAPA INTRO -->
        <br>
      </div>
    </table></tr></td>
    <!-- FIN CONTENEDOR -->
  </body>
</html>

Y ahora la inevitable pregunta. Existe algún truco para evitar este comportamiento del IE6? O como decía jomaruro, tendré que revisar una a una las tablas para que esto no suceda?