Posición proporcional de un div

[dbh]

Hola a todos, no se si alguien pueda echarme una mano con un problemilla que no he logrado resolver desde hacer unos dias :(

En estos enlaces pondrán ver lo que tengo y lo que quiero hacer, para saber a que me refiero, tienen que redimencionar la ventana.

Muchas gracias desde ya

Lo que quiero conseguir:
http://jsfiddle.net/qYVL4/

Lo que tengo :(
http://jsfiddle.net/BcqLK/


Muchas gracias :)

[pzin]

Por favor, no repitas temas en el foro.

Tu problema no es alinear el texto o no, tu problema es más bien de maquetación. Y eso de usar jQuery para lo que intentas es... Bueno no es bonito.

¿Qué sentido tiene que la parte verde llegue a ocupar 50 pixeles por ejemplo?

Yo lo que haría sería un contenedor que contenga un cuadro de color blanco con el borde gris y otro debajo con fondo verde, en lugar de hacer eso con una imagen. Y luego la imagen de fondo, pondría dos, la del tipo sentado y la del cohete.

Y a partir de ahí puedes jugar con max-width por ejemplo y con media-queries.

Pero una imagen de fondo no puede formar parte, por lo general, de la maquetación en si misma.

[dbh]

Lo siento, pero en realidad no sabía en que sección era mejor ponerlo, el tema de jquery lo estoy utilizando para ajustar el tamaño de fuente.

Y bueno, el problema es que se tiene que mantener la proporción, y ahora mismo, creo que tengo un problema de css, que la verdad no se como solucionar, sinceramente creo que es alguna cosa que se me escapa, que tal vez no se como se hace, porque el top, es el que me está causando problemas, aunque esté por porcentaje, no es proporcional con la redimención :(

Se te ocurre alguna otra cosa?


Saludos y muchas gracias.

[pzin]

Iniciado por dbh

Se te ocurre alguna otra cosa?

Lo que te comenté arriba.

El caso es que estás creando un problema porque tu código inicial es malo. Antes que arreglar ese problema, yo intentaría hacerlo bien desde el inicio porque sino, luego te surgirán otros problemas y vas a estar parcheando a cada rato.

[dbh]

no se si te entiendo bien, pero me sugieres hacer 3 divs?

div 1 = izquierda (aqui va la imagen del hombre sentado)
div 2 = central ( aqui dentro va el div blanco y el div verde )
div 3 = derecha (aqui va la imagen del cohete)


es correcto?

[pzin]

Si, eso también podría servir.

Sea como sea, tendrás que cambiar un poco la forma a como lo haces actualmente porque es un código bastante inestable en el sentido de que te será a ti y a cualquiera difícil de mantenerlo.

[Mikmoro]

Entre otras cosas debes evitar cosas como estas:

float: left;
position: absolute;

que no imagino de qué generador han salido esas dos reglas en una misma clase, pero están muy mal. Si al ver eso no te llama la atención deberías estudiar un poco más de CSS antes de maquetar eso y ponerlo en producción, si no, los problemas que te vas a encontrar a cada paso serán tortuosos.

[dbh]

Muchas gracias por tus respuestas, es verdad que necesito conocer y estudiar un poco más de css, la verdad es que el código lo puse yo, tanto el float como el absolute, pero antes había probado con relative (¿está mal tambien con relative?)

Gracias de nuevo por vuestra ayuda, si teneís algún consejo más me puede ser de mucha utilidad.


Saludos.

[Mikmoro]

Hola.
Hace bastante tiempo hice una pequeña guía para empezar a orientarse un poco con eso de las posiciones, los float, etcétera. Está entre los primeros mensajes de este foro de CSS.
Supongo que habrá un millón de cosas mejores para eso, pero bueno, intenté hacerlo muy sencillo para que se entienda con mucha facilidad. Si vas directamente a los apartados que te interesan supongo que lo entenderás muy fácil, y al menos te sirve para empezar.
Saludos.
http://www.forosdelweb.com/f53/aport...ml-css-648073/