Colocacion de imagenes en capa.

[pepefe]

Hola a todos. Soy totalmente nuevo y autodidacta en estos temas y despues de leerme un par de manuales me he decidido a hacer una página web y llevo pegándome cabezazos unos cuantos días con un problema que soy incapaz de resolver. Tengo una página con una capa de fondo centrada en la quiero colocar una serie de imágenes a modo de menú gráfico, pero no consigo que se vean bien a todas las resoluciones, cuando se cambia la resolución me bailan todas las imágenes por la pantalla.
He leido por ahí soluciones a base de capas insertadas en tablas o de javascript, pero ninguna lo suficientemente clara.
¿Alguien podría contarme si hay una manera sencilla de hacer esto, o si es complicada, contarmela muy claramente y con mucha paciencia?
Muchas gracias anticipadas y un saludo muy grande a todos los partipantes del foro.

[Mikmoro]

Hola, pepefe. Bienvenido.

Yo por mi parte, agradecería que mostraras el código html y css de lo que estás intentando (o una imagen del diseño), para averiguar por qué falla y darte algún consejo sobre cómo arreglarlo.

Al no tener claro qué quires hacer, no sabría qué recomendarte.

Mikel.

[pepefe]

Hola Mikmoro. Muchas gracias por tu rápida respuesta, pero como hago para dejarte el código, la página es esta: http://gemadiaz.myartsonline.com/inicio.html
pero no se como pegarte el código. El problema es que los menus (formación y experiencia) bailan por la pantalla con el cambio de resolución. Tengo que meter más debajo de 'Galería' pero antes quiero aprender la manera de colocarlos... Si me dices como postear el código ¿o hago aqui un copy/paste?

[Mikmoro]

No, para mi está bien con el enlace, aunque puedes copiar el código y pegarlo encerrado entre las etiquetas de QUOTE (ese bocadillo amarillo que hay en la barra sobre el texto).
En cuanto pueda (mañana), lo miro un poco a ver qué se ve. Igual alguien te hecha un cable antes que yo.

Mikel.

[Mikmoro]

Hola de nuevo.

He mirado tu págna, y el problema no es que te bailan las imágenes, sino todo lo contrario, que se quedan clavadas, estáticas.

Esto es porque las tienes colocadas en posición absoluta con respecto de la página, y eso es lo que le estás pidiendo, que se queden quietas.
Para esto hay varias soluciones: o bien quitas la posición absoluta y las colocas de otra manera, o bien, pones "position: relative;" a la caja que las contiene, de manera que se coloquen de forma absoluta con respecto a esa caja que se mueve, no con respecto a la página.

¿Entiendes más o menos?

Deberás buscar información sobre posición absoluta y relativa en css. Intétalo y si no lo consigues consulta, que te echaremos una mano.

Mikel.

[pepefe]

Hola Mikel.
Gracias por tu respuesta. Estoy intentando colocar las capas con distancias relativas, lo que no veo claro es con respecto a que son relativas esas distancias, porque no parecen serlo ni a la capa que las contiene ni a las capas que la preceden, quiero decir, en el caso:

<div> capa1
<div> capa 11</div>
<div> capa 12</div>
<div>capa 13</div>
</div>

Si coloco la capa 12 con position relativa, los valores top y left, ¿son 'relativos' a la capa 1 (que es la que la contiene) o a la capa 12 (que es la que la precede).

Estoy haciendo pruebas y ademas de no tenerlo claro, cuando veo la página en IE y en otra resolución, las imágenes siguen bailando.

Muchas gracias.

[Mikmoro]

Bien, vas bien.

La idea es la siguiente: si la capa 1 tiene una posición relativa, admite que otras capas dentro de ella se coloquen de forma absoluta con respecto a ella. Lo que significa que si pones capa1 con position: relative;, después puedes poner las capas 11, 12 y 13 que están dentro de ella con position: absolute;, y se colocarán en posición absoluta con respecto de capa1, así que con top, left, right o bottom las podrás colocar con respecto a su contenedor. Y por tanto, si su contenedor se mueve al cambiar de resolución, se moderán al unísono con él.

Espero que te sirva.

Mikel.