Cómo hacer responsive algo absoluto

[rapuig]

Hola, mi duda es cuando tengo un div con posición absoluta y que se encuentra centrado de la siguiente manera:

Código CSS:

width: 960px;
margin-left: -480px;
left: 50%;
position: absolute;
 

Cómo hago para hacerlo responsive? Es decir, al achicar la ventana del navegador no encuentro la forma de que se vaya adaptando. Conozco las media-queries pero usándolas tampoco me doy cuenta de cómo hacerlo.
Quizás deba centrarlo de otra forma al div, pero si o si tiene que tener posición absoluta.

Muchas gracias! :)

[pzin]

Iniciado por rapuig

Quizás deba centrarlo de otra forma al div, pero si o si tiene que tener posición absoluta.

¿Si o si por qué? Mucha gente usa la posición absoluta cuando no debería. Y estos son los problemas que ocurren. Con el afán de ayudar, estaría bien que expusieras el porqué de necesitar una posición absoluta. Porque parece un contenedor, por la medida y eso. Y para la maquetación en general es una muy mala práctica usar posiciones absolutas.
Estaría bien que lo explicaras a ver si, con respecto a la vez que perdón, se puede hacer algo más robusto en vez de arreglar cosas inestables.

Iba a poner una respuesta con una solución, pero casi que prefiero saber que realmente no queda otra que usar posiciones absolutas.

[rapuig]

Gracias por responder pzin.

Es porque se encuentra sobre un div, obviamente con posición relativa, el cual es un slider de imgs.

[pzin]

Pues mucho no explicas de porqué tiene que ser si o si de esa forma.

Poer bueno, si quieres algo más estable y más fácil de mantener de lo que tienes, yo haría algo así:

Código HTML:

<div id="contenedor">
  <div id="caja"></div>
</div>
 

Código CSS:

div#contenedor {
  position: absolute;
  left: 50%
}
 
div#caja {
  position: relative;
  left: -50%;
  width: 960px;
}
 

La única diferencia es que se centraría de forma automática.

Pero no me queda lo del tema responsivo. Con esto al aplicarle media-queries puedes ir cambiando solo el valor del ancho de #caja y se queda centrado siempre.

Y ahora volviendo con las dudas.

Si ese elemento lo tienes dentro de otro, ¿por qué no aplicas una medida porcentual? Así consigues tener un diseño líquido. Yo creo que debe de haber una mejor solución, pero falta información. Explícate un poco más a ver.

[rapuig]

Iniciado por pzin

Si ese elemento lo tienes dentro de otro, ¿por qué no aplicas una medida porcentual? Así consigues tener un diseño líquido. Yo creo que debe de haber una mejor solución, pero falta información. Explícate un poco más a ver.

Olvide decir que el div absoluto tiene width 100% y max-width 960px.
No se muy bien cómo explicarme jeje es decir, la web tiene que ser así, tengo que poner un div sobre otro y la manera correcta para esto no es poner el de abajo relativo y el de arriba absoluto?

Si te parece te mando el link por privado para que no se indexe por acá así entiendes mejor, sino todo bien.

Gracias nuevamente.

[pzin]

Vi el enlace. Está chulo el sitio.

Y si, la forma correcta de hacerlo sería sin usar posiciones absolutas.

Puedes crear un contenedor que ocupe todo el ancho, como ya tienes en realidad. En vez de poner una imagen, pones esa imagen como fondo. Y en ese mismo contenedor pones el buscador.

Código HTML:

<section>
  <div id="buscador"></div>
</section>
 

Luego el CSS sería algo como esto:

Código CSS:

section {
  height: 500px; /* O cuanto necesites */
  background-image: url(fondo.png);
  background-size: cover; /* Ayuda a que la imagen se ajuste */
}
 
div#buscador {
  width: 960px;
  max-width: 95%; /* Por dejar un margen a los lados */
  margin: 0 auto;
}
 

Supongo que la idea es más o menos clara. Así se adaptará perfectamente, ya que sigue manteniendo una estructura fluída con el ancho máximo de 95%.

El problema que tienes ahora de porqué lo tienes que poner con una posición absoluta, es porque estás "creando" una imagen de fondo a partir de un elemento que es una imagen.