Foros del Web » Creando para Internet » CSS »

Resolucion + Maquetacion

Estas en el tema de Resolucion + Maquetacion en el foro de CSS en Foros del Web. Saludos Tengo una pequeña duda en cuanto a CSS. Digamos que tengo lo siguiente: http://img254.imageshack.us/my.php?image=capas1be7.jpg Pero me gustaria que, por ejemplo, al agrandar la pantalla, ...
  #1 (permalink)  
Antiguo 10/11/2008, 12:48
Avatar de Ronruby  
Fecha de Ingreso: julio-2008
Ubicación: 18°30'N, 69°59'W
Mensajes: 4.879
Antigüedad: 9 años, 4 meses
Puntos: 416
Resolucion + Maquetacion

Saludos

Tengo una pequeña duda en cuanto a CSS.
Digamos que tengo lo siguiente:
http://img254.imageshack.us/my.php?image=capas1be7.jpg

Pero me gustaria que, por ejemplo, al agrandar la pantalla, la capa izquierda se quede del mismo tamaño, pero que la capa derecha cambie respecto al tamaño de la pantalla.
Algo asi:
http://img265.imageshack.us/my.php?image=capas2xl3.jpg

Para hacerlo con anchos fijos no tuve ningun problema, pero no puedo lograr el efecto que deseo para la capa derecha.

Lo que deseo para la capa de la derecha es que sea proporcional al tamaño de la ventana, es decir si yo tomo la ventana y la reduzco un poco, que entonces esta capa (incluyendo el header y footer) reduzcan mientras que la capa de la izquierda quedaria siempre de un tamaño fijo en Pixeles.

Alguna sugerencia?
  #2 (permalink)  
Antiguo 10/11/2008, 13:16
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Resolucion + Maquetacion

Esto lo normal es hacerlo poniendo la caja de la izquierda con un float: left y poniéndole un tamaño fijo, y la de la derecha sin float y sin tamaño.

Si muestras lo que tienes te podremos ayudar a arreglarlo.
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 10/11/2008, 14:26
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Resolucion + Maquetacion

Como yo lo he visto hacer es a lo mismo que menciona Mikmoro (div a la izquierda con anchura fijada en px, y segundo div) contenidos los dos en un div con anchura en definida en %. Más elevado o menos, según el espacio libre que quieras tener en los laterales de la ventana del navegador.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #4 (permalink)  
Antiguo 10/11/2008, 15:00
Avatar de Ronruby  
Fecha de Ingreso: julio-2008
Ubicación: 18°30'N, 69°59'W
Mensajes: 4.879
Antigüedad: 9 años, 4 meses
Puntos: 416
Respuesta: Resolucion + Maquetacion

Por ejemplo, tengo esto:

Código HTML:
<div style = "overflow:hidden; margin-left: auto; margin-right: auto; width:500px;">
    <div style = "height: 45px; width: auto;"></div>
    <div style = "float: left; height: 75px; width: 150px;"></div>
    <div style = "float: right; height: 75px; width: 350px;"></div>
    <div style = "clear: both; height: 45px; width: auto;"></div>
</div> 
Perfecto, funciona sin problemas.

Pero al tratar de hacer lo que ustedes me proponen (poner la capa de la derecha con un ancho en %), si reduzco la ventana lo suficiente, esta capa se pasa a la siguiente linea.
Al parecer tendre que trabajar con % en ambos lados.
  #5 (permalink)  
Antiguo 10/11/2008, 15:33
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Resolucion + Maquetacion

Para evitar eso, que colapse o pasen a la línea inferior, debes utilizar min-width (anchura mínima)
Aquí tienes una explicación
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 10/11/2008, 15:49
Avatar de Ronruby  
Fecha de Ingreso: julio-2008
Ubicación: 18°30'N, 69°59'W
Mensajes: 4.879
Antigüedad: 9 años, 4 meses
Puntos: 416
Respuesta: Resolucion + Maquetacion

Gracias por la informacion ;)

He resuelto hecho justamente lo que queria agregandole un POSITION:RELATIVE a el DIV de la derecha y eliminando la propiedad: FLOAT:RIGHT

;) Muchas gracias.

Código HTML:
<div style = "overflow:hidden; margin-left: auto; margin-right: auto; width:auto;">
    <div style = "height: 45px; width: auto;"></div>
    <div style = "float: left; height: 75px; width: 182px; border:#006699 1px solid;"></div>
    <div style = "height: 75px; width: auto; border:#006699 1px solid; position:relative;"></div>
    <div style = "clear: both; height: 45px; width: auto;"></div>
</div> 
*Nota: el borde es solo para poder ver las capas en el navegador ;)
  #7 (permalink)  
Antiguo 10/11/2008, 16:00
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Resolucion + Maquetacion

Cita:
Iniciado por Ronruby Ver Mensaje
Gracias por la informacion ;)

He resuelto hecho justamente lo que queria agregandole un POSITION:RELATIVE a el DIV de la derecha y eliminando la propiedad: FLOAT:RIGHT

;) Muchas gracias.
Cita:
Iniciado por Mikmoro Ver Mensaje
Esto lo normal es hacerlo poniendo la caja de la izquierda con un float: left y poniéndole un tamaño fijo, y la de la derecha sin float y sin tamaño...
Claro, es lo que te indicaba Mikmoro en su respuesta.
Al no tener tamaño, tenderá a ocupar el espacio disponible (el que le queda libre) y al estar sin 'flotar' se posicionará según el flujo natural del archivo .html.

Me alegro de que hayas alcanzado puerto.
Un saludo

P.D.: supongo que el definir las propiedades de la forma que lo has hecho es sólo para las pruebas.
Creo que ya sabrás que se recomienda tener un archivo .css separado del código html.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #8 (permalink)  
Antiguo 10/11/2008, 20:41
Avatar de Ronruby  
Fecha de Ingreso: julio-2008
Ubicación: 18°30'N, 69°59'W
Mensajes: 4.879
Antigüedad: 9 años, 4 meses
Puntos: 416
Respuesta: Resolucion + Maquetacion

Cita:
P.D.: supongo que el definir las propiedades de la forma que lo has hecho es sólo para las pruebas.
Creo que ya sabrás que se recomienda tener un archivo .css separado del código html.
Asi es, solo lo hice para probar nada mas. ;)
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 18:01.