Problemas con Posicion en Porcentajes

[alesgro]

Hola gente del HTML/CSS!

Hace tiempo que me encuentro en un problema de posición de elementos.
Digamos que tengo esta web:
www.tentacular.com.ar

Donde hay un especie de parallax scrolling, con un elemento (capsula) fija, y el fondo son 2 o 3 imágenes en capas diferentes.

El problema es con los elemntos #BOTONES y #REEL. Estos elementos se encuentran en la capa superior. Y tiene ambos una posición absoluta definida en LEFT, RIGHT Y TOP con porcentajes.
El lio se arma al redimencionar o cambiar de explorador... Estos elementos bailan por la web. Osea, que cada proporción de monitor y hasta cada navegador lee la posición de los elementos de forma diferente.

Y ES UN LIO!
Como hago, en una web responsiva, para posicionar elementos y que aproximadamente se queden en un lugar fijo?

AYUDA EXPERTOS DEL HTML/CSS!!!

[webosiris]

la verdad que no entiendo mucho que fue lo que intentaste hacer con tu código, pero me parece que estás intentando mezclar agua con aceite, para escribir css debes primero entender que es lo que estás escribiendo. Si estás intentando hacer responsive design, no seas malo.... no me uses tablas para posicionar iconos sociales!!!

Osea, que cada proporción de monitor y hasta cada navegador lee la posición de los elementos de forma diferente.

por otro lado, es lógico ese comportamiento, es que el 50% de 1000px es diferente que el 50% de 400px. Si quieres usar %, debes de hacer TODO en %.

[alesgro]

Gracias por tu respuesta webosiris!

Bien entiendo que el tema de las tablas no es lo mejor para el responsive, pero no creo que la tabla es la que me este dando el problema de la posicion.

Por otro lado, entiendo que el 50% de 1000px no es el lo mismo que el 50% de 400px. Pero todas las medidas (menos el reel por el momento) están en %.

El problema es que necesito que el elemento este al 50% del elemento madre, pero no lo esta... se mueve! Ese es el problema.

[webosiris]

me autocito

para escribir css debes primero entender que es lo que estás escribiendo.

en tu reel tienes:

Código CSS:

#reel{
left:35%;
right:25%;
width:100%;}
 

que significa eso?
significa que:
el borde izquierdo comience en el 35% del elemento padre
el borde derecho finalice en el 75% del elemento padre
el elemento tenga el 100% del ancho del padre

esas 3 cosas juntas... son una contradicción, no entiendo ni el porqué de esos valores.
¿que quisiste decir? Si quieres tener una capa que mida el 50% del ancho del padre, centrada, basta con:

Código CSS:

#reel{
left:25%;
right:25%;}
 

y ahí la tienes, una capa que empieza en 25 y termina en 75, por lo que tiene el mismo espacio a ambos costados, lo que dicho de otra forma... está centrada (y la capa en si mide 75-25 = 50)


obviamente que eso centra LA CAPA (ponle un fondo negro a #reel y vas a ver). El contenido de la capa no está centrado porque tu no lo estás centrando (y si estás haciendo responsive, deberás adaptarlo al ancho..).


PD: hacer responsive design no trata sobre poner una foto grande y estirarla. Primero debes de escribir html semántico y tu código no lo es (todo el texto debe de ser texto! como te dije antes, estás mezclando aceite con agua). Tu web se ve fea en resoluciones grandes como la mía.