Posicionar div para diferentes resoluciones

xeme · #1 (**permalink**) 11/09/2010, 16:32

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-image: url(../images/imagen.png); 
    top: 955px; 
    left: 171px; 
    position: absolute; 
    width: 206px; 
    height: 226px; 
}

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.

Shaito · #2 (**permalink**) 11/09/2010, 18:47

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

xeme · #3 (**permalink**) 12/09/2010, 05:50

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.

kseso? · #4 (**permalink**) 12/09/2010, 05:53

Cita:

Iniciado por xeme

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.

Shaito · #5 (**permalink**) 12/09/2010, 06:03

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!

xeme · #6 (**permalink**) 12/09/2010, 06:06

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!

kseso? · #7 (**permalink**) 12/09/2010, 06:16

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)

xeme · #8 (**permalink**) 12/09/2010, 06:18

Vale, creo que lo he entendido.

Voy a probar! Gracias

Shaito · #9 (**permalink**) 12/09/2010, 06:20

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<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">
</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

xeme · #10 (**permalink**) 12/09/2010, 06:21

Vale. Gracias de nuevo

Shaito · #11 (**permalink**) 12/09/2010, 06:36

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

xeme · #12 (**permalink**) 12/09/2010, 06:45

Tiene que sobresalir por la izquierda unos 10px

Saludos

Shaito · #13 (**permalink**) 12/09/2010, 07:03

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

xeme · #14 (**permalink**) 12/09/2010, 10:09

Cita:

Iniciado por kseso?

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