Foros del Web » Creando para Internet » CSS »

Posicionar div para diferentes resoluciones

Estas en el tema de Posicionar div para diferentes resoluciones en el foro de CSS en Foros del Web. Hola a todos foreros! Tengo un problema para posicionar un div y que quede igual de bien en todas las resoluciones posibles. La propiedad del ...
  #1 (permalink)  
Antiguo 11/09/2010, 17:32
 
Fecha de Ingreso: septiembre-2010
Mensajes: 20
Antigüedad: 7 años, 3 meses
Puntos: 0
Exclamación Posicionar div para diferentes resoluciones

Hola a todos foreros!

Tengo un problema para posicionar un div y que quede igual de bien en todas las resoluciones posibles.

La propiedad del div es:

Código PHP:
{
    
background-imageurl(../images/imagen.png);
    
top955px;
    
left171px;
    
positionabsolute;
    
width206px;
    
height226px;

En la resolución de mi portatail (1.680x1.050 píxeles) se ve perfectamente colocado donde quiero, pero en el ordenador de sobremesa (1.024x728) no queda igual... se desplaza hacia dentro por la propiedad LEFT.

¿Alguna solución para que quede bien en cualquier resolución?

Muchas gracias.
  #2 (permalink)  
Antiguo 11/09/2010, 19:47
Avatar de Shaito  
Fecha de Ingreso: agosto-2010
Mensajes: 383
Antigüedad: 7 años, 4 meses
Puntos: 37
Respuesta: Posicionar div para diferentes resoluciones

Hola!

Podrías facilitarnos una dirección web?

Se me ocurre una posible forma de solucionarlo, pero si no vemos la web dudo de que podamos ayudar.

Saludos
  #3 (permalink)  
Antiguo 12/09/2010, 06:50
 
Fecha de Ingreso: septiembre-2010
Mensajes: 20
Antigüedad: 7 años, 3 meses
Puntos: 0
Respuesta: Posicionar div para diferentes resoluciones

Aqui tienes la url: http://www.qtrucos.com/posicionar_divs/

El div que no consigo encajar de igual forma en cualquier resolución es el bloque amarillo.

Espero noticas!

Gracias.
  #4 (permalink)  
Antiguo 12/09/2010, 06:53
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Posicionar div para diferentes resoluciones

Cita:
Iniciado por xeme Ver Mensaje
Hola a todos foreros!

Tengo un problema para posicionar un div y que quede igual de bien en todas las resoluciones posibles. ¿qué entiende por lo subrayado?

La propiedad del div es:...

En la resolución de mi portatail (1.680x1.050 píxeles) se ve perfectamente colocado donde quiero, pero en el ordenador de sobremesa (1.024x728) no queda igual... se desplaza hacia dentro por la propiedad LEFT. ¿Y dónde es eso, objetivamente?

¿Alguna solución para que quede bien en cualquier resolución? Véase nota primera

Muchas gracias.
Desconocemos, no lo dice, dónde debería colocarse. Por lo tanto, difícil nos pone el adivinar sus gustos.
  #5 (permalink)  
Antiguo 12/09/2010, 07:03
Avatar de Shaito  
Fecha de Ingreso: agosto-2010
Mensajes: 383
Antigüedad: 7 años, 4 meses
Puntos: 37
Respuesta: Posicionar div para diferentes resoluciones

Hola xeme!

Solo nos queda que nos contestes a una cosa:

¿Donde quieres colocar el bloque amarillo? Si tienes alguna imagen de como lo quieres sería de gran ayuda para nosotros o una sencilla explicación

Saludos!
  #6 (permalink)  
Antiguo 12/09/2010, 07:06
 
Fecha de Ingreso: septiembre-2010
Mensajes: 20
Antigüedad: 7 años, 3 meses
Puntos: 0
Respuesta: Posicionar div para diferentes resoluciones

Quizás no me he explicado bien, perdonar las molestias.

Para verlo más claro con un ejemplo real de internet busco este efecto:

http://www.nesthostelsgranada.com/

La mochila con las banderas sobresale por la izquierda. Se ve igual tanto en una resolución grande como en una pequeña. De hecho, en las resoluciones más pequeñas digamos que hay parte de la mochila que no se muestra.

Quiero conseguir ese mismo efecto.

Un saludo y gracias!
  #7 (permalink)  
Antiguo 12/09/2010, 07:16
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Posicionar div para diferentes resoluciones

mal ejemplo esa página de referencia, a resoluciones bajas la zona izquierda no queda accesible.

No ha definido las propiedades de /#cuerpo/ el contenedor general de los contenidos.

Declárelo y lo coloca como /"relative"/ para que sea el referente de su contenido. Después sólo es cuestión de un margen izquierda negativo a su "mochila" y que /#cuerpo/ permita su desborde (overflow)
  #8 (permalink)  
Antiguo 12/09/2010, 07:18
 
Fecha de Ingreso: septiembre-2010
Mensajes: 20
Antigüedad: 7 años, 3 meses
Puntos: 0
Respuesta: Posicionar div para diferentes resoluciones

Vale, creo que lo he entendido.

Voy a probar! Gracias
  #9 (permalink)  
Antiguo 12/09/2010, 07:20
Avatar de Shaito  
Fecha de Ingreso: agosto-2010
Mensajes: 383
Antigüedad: 7 años, 4 meses
Puntos: 37
Respuesta: Posicionar div para diferentes resoluciones

Hola!

Digamos que esta web a optado por el modo fácil y rápido, pero este modo les impide poner más cosas de las que tienen en la web, si ponen más texto o cosas se saldría por abajo mira:

Código HTML:
Ver original
  1. <div style="position: relative; left: -30px; top: 0pt; width: 900px; height: 604px; z-index: 1;" id="layer 1"><img width="1224" height="1531" border="0" alt="hostels granada" usemap="#Map" src="http://images.nesthostelsvalencia.com/imagenes/Home_granada_english.jpg">
  2. </div>

Eso hace que una imagen con toda la web sin texto se quede en el fondo y sobre ella se ponen las cosas.

Voy a hacer un esquema, pues no tengo mucho tiempo para ponerme a crear ahora el css y su correspondiente Html, pero será más sencillo para si alguien lo ve y puede ayudarte.

Ahora te pongo mi idea
  #10 (permalink)  
Antiguo 12/09/2010, 07:21
 
Fecha de Ingreso: septiembre-2010
Mensajes: 20
Antigüedad: 7 años, 3 meses
Puntos: 0
Respuesta: Posicionar div para diferentes resoluciones

Vale. Gracias de nuevo
  #11 (permalink)  
Antiguo 12/09/2010, 07:36
Avatar de Shaito  
Fecha de Ingreso: agosto-2010
Mensajes: 383
Antigüedad: 7 años, 4 meses
Puntos: 37
Respuesta: Posicionar div para diferentes resoluciones

Hola!

A cuantos px quieres poner el div mochila del borde izquierdo de contenido?

Es decir, a cuantos px de espacio el bloque amarillo del negro?

Saludos
  #12 (permalink)  
Antiguo 12/09/2010, 07:45
 
Fecha de Ingreso: septiembre-2010
Mensajes: 20
Antigüedad: 7 años, 3 meses
Puntos: 0
Respuesta: Posicionar div para diferentes resoluciones

Tiene que sobresalir por la izquierda unos 10px

Saludos
  #13 (permalink)  
Antiguo 12/09/2010, 08:03
Avatar de Shaito  
Fecha de Ingreso: agosto-2010
Mensajes: 383
Antigüedad: 7 años, 4 meses
Puntos: 37
Respuesta: Posicionar div para diferentes resoluciones

Hola...

La idea es la siguente, pero no se porqué Dreamweaver no pone de su parte y me es imposible ponerla en funcionamiento...

La cosa es sencilla, un div que abarque toda la web con un ancho 10px superior al actual.
Dentro de este colocar a la altura querida el div, sin cambiar la distancia de left.

Esto nos dará como resultado un div que sobresale por la derechay a la altura que queramos.

Si alguien lo puede poner en funcionamiento que avise... si nadie puede, más tarde lo intentaré de nuevo.

Saludos
  #14 (permalink)  
Antiguo 12/09/2010, 11:09
 
Fecha de Ingreso: septiembre-2010
Mensajes: 20
Antigüedad: 7 años, 3 meses
Puntos: 0
Respuesta: Posicionar div para diferentes resoluciones

Cita:
Iniciado por kseso? Ver Mensaje
mal ejemplo esa página de referencia, a resoluciones bajas la zona izquierda no queda accesible.

No ha definido las propiedades de /#cuerpo/ el contenedor general de los contenidos.

Declárelo y lo coloca como /"relative"/ para que sea el referente de su contenido. Después sólo es cuestión de un margen izquierda negativo a su "mochila" y que /#cuerpo/ permita su desborde (overflow)
Ya lo tengo! He seguido los pasos de kseso? y funciona perfectamente.

Muchas gracias a todos!!!

Hasta pronto

Etiquetas: diferentes, posicionar
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:57.