Foros del Web » Creando para Internet » CSS »

Capas que se expandan a todo el ancho de la pantalla

Estas en el tema de Capas que se expandan a todo el ancho de la pantalla en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 05/08/2009, 12:59
 
Fecha de Ingreso: agosto-2009
Mensajes: 12
Antigüedad: 8 años, 4 meses
Puntos: 0
Capas que se expandan a todo el ancho de la pantalla

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
  #2 (permalink)  
Antiguo 05/08/2009, 15:25
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Capas que se expandan a todo el ancho de la pantalla

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.

  #3 (permalink)  
Antiguo 05/08/2009, 20:13
 
Fecha de Ingreso: diciembre-2008
Mensajes: 56
Antigüedad: 9 años
Puntos: 1
Respuesta: Capas que se expandan a todo el ancho de la pantalla

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.
  #4 (permalink)  
Antiguo 06/08/2009, 07:12
 
Fecha de Ingreso: agosto-2009
Mensajes: 12
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: Capas que se expandan a todo el ancho de la pantalla

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?
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:57.