Foros del Web » Creando para Internet » CSS »

¿Como haríais una web que se adapte a la resolución de cada monitor?

Estas en el tema de ¿Como haríais una web que se adapte a la resolución de cada monitor? en el foro de CSS en Foros del Web. Tengo una web con 3 columnas. La de la izquierda y derecha son de tamaño fijo de 150px, y quiero que el centro sea más ...
  #1 (permalink)  
Antiguo 03/08/2006, 05:29
Avatar de indie81  
Fecha de Ingreso: octubre-2004
Ubicación: Zaragoza
Mensajes: 294
Antigüedad: 13 años, 2 meses
Puntos: 10
Pregunta ¿Como haríais una web que se adapte a la resolución de cada monitor?

Tengo una web con 3 columnas. La de la izquierda y derecha son de tamaño fijo de 150px, y quiero que el centro sea más o menos ancho según la resolución del monitor en que se vea la web, adaptándose.

He puesto a la columna izquierda float:left, a la derecha float:right, y sus anchuras fijas. La del centro no tiene declarado ninguna anchura ni ningún float, solo tiene un margin a la izquierda de 160px, para que no salga por encima de la columna izquierda.

La parte izquierda queda bien, pero la columna derecha, no se por qué, se baja, quedando el centro ocupando toda la pantalla hacia la derecha, y la columna derecha debajo, descolocada.

A ver si me podéis decir cómo haríais este diseño flexible. No hace falta que me pongáis todo el código de la página, simplemente los datos importantes que pondríais en el css de cada uno de los 3 divs: anchuras, floats, margins, o lo que sea necesario.

Gracias!
__________________
padres frikis | Regalos
  #2 (permalink)  
Antiguo 03/08/2006, 06:00
Avatar de kazafun  
Fecha de Ingreso: diciembre-2003
Ubicación: Elda
Mensajes: 843
Antigüedad: 14 años
Puntos: 13
Mira como lo hace Matthew Levin. Este articulo es una maravilla.
http://www.alistapart.com/articles/holygrail/
__________________
MUERTE a Internet Explorer


Mi portfolio de diseño web en Elda
  #3 (permalink)  
Antiguo 03/08/2006, 06:15
Avatar de indie81  
Fecha de Ingreso: octubre-2004
Ubicación: Zaragoza
Mensajes: 294
Antigüedad: 13 años, 2 meses
Puntos: 10
Es que si la web la hubiese hecho yo desde el comienzo sería muy fácil, pero es una web ya hecha, hace bastante tiempo, con el css muy lioso, y tengo que hacerla líquida modificando su css.

Lo he hecho con el mismo método que en este ejemplo:
http://www.intensivstation.ch/files/...es/temp05.html

Y me sale bien la columna izquierda y el centro, que ya es flexible. Pero a la derecha, sale un hueco en blanco, y la columna derecha sale más abajo, empezando justo cuando termina el contenido de la web. Voy a poner una captura de cómo me sale, y a ver si sabéis qué motivos pueden llevar a que la columna derecha no salga arriba del todo, como debería ser:

__________________
padres frikis | Regalos
  #4 (permalink)  
Antiguo 03/08/2006, 11:16
 
Fecha de Ingreso: agosto-2006
Ubicación: Madrid
Mensajes: 95
Antigüedad: 11 años, 4 meses
Puntos: 0
Hay varias soluciones para realizar las tres columnas.

1 - La primera, y más cutre, es que, por ejemplo, la columna de la derecha tenga posicionamiento absoluto. Te resolverá el problema, pero no podrás adaptar correctamente el pie de página.

2 - La solución correcta, pasa por que la columna de la izquiera tenga "float:left", la de la derecha, "float:right", y la central, "width:auto", y los margenes izquiedo y derecho adaptado para que no se coma ambas columnas. El problema en esta solución, es que dentro del código HTML, las dos columnas laterales deben ir antes de la central, o de lo contrario, te ocurrirá que la columna derecha se te posicionará debajo de la central, como ocurre en la foto.
Sin embargo, tienes el problema de que los elementos con propiedad "float" se salen del flujo del documento, y los posteriores elementos no se adaptan a ellos. Es decir, los siguientes elementos (como pie de página, etc...) se adaptarían a la altura de la columna central. Para resolverlo puedes emplear un pequeño truco. Te resumo el proceso entero en unos sencillos pasos, y te paso un enlace a un ejemplo que he creado:

* Crear un div contenedor de las tres columnas
* Crear columna izquierda (float:left, anchura fija)
* Crear columna derecha (float:right, anchura fija)
* Crear columna principal (anchura variable y margenes a izquierda y derecha mayores que las anchuras de las columnas laterales)
* Crear un elemento div, dentro del contenedor, con la propiedad "clear:both". Esta propiedad obliga al div a no tener nada a izquierda y derecha suyos, por lo que se coloca debajo de las tres columnas, y al estar dentro del div contenedor, le obliga a adaptar su altura al máximo de las tres columnas en conjunto. Así, los restantes contenidos se colocarán por debajo de todas las columnas.

El enlace: (mods.solzimer.es/david/examples/threecolumn.html)
Perdona por ponerlo así, pero al ser nuevo, no me deja poner enlaces xD

Última edición por Nigel; 03/08/2006 a las 11:46
  #5 (permalink)  
Antiguo 04/08/2006, 02:20
Avatar de indie81  
Fecha de Ingreso: octubre-2004
Ubicación: Zaragoza
Mensajes: 294
Antigüedad: 13 años, 2 meses
Puntos: 10
Cita:
Iniciado por Nigel
El problema en esta solución, es que dentro del código HTML, las dos columnas laterales deben ir antes de la central, o de lo contrario, te ocurrirá que la columna derecha se te posicionará debajo de la central, como ocurre en la foto.
Claro!!! era eso! joder, y mira que es de los primeros "trucos" que aprendí en css, que se debían colocar las columnas laterales antes en este tipo de diseños, pero ya ni me acordaba. Ahora sí se ve bien.

Gracias!
__________________
padres frikis | Regalos
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 20:54.