La idea es que esos iconos posicionados con CSS se adapten a cualquier resolución de la pantalla de modo que queden ubicados por encima y al final de cada linea de la imagen. La imágenes de las lineas es un fondo fijo que sí se adapta pero al abrir el documento se desordenan estos iconos y no logro que se adapten junto al tamaño del fondo.
-
Tal vez quieras ver responsive-image-maps.– Paul Vargasel 14 abr. 2016 a las 16:57
-
Comparte el código relacionado– Alvaro Montoro ♦el 14 abr. 2016 a las 18:24
-
en css lo tengo asi #boton1 { position:absolute; top: 200px; left: 1060px; } #boton2 { position:absolute; top: 195px; left: 786px; } esta posicionado en una pc con una resolucion y cuando ejecuto esa misma web en otra pc con otra resolucion sale cm se muestra en la imagen arriba...– nacheel 14 abr. 2016 a las 18:49
-
¿Y cuál es el código de la imagen de fondo? Por favor, añade HTML + CSS, lee Cómo crear un ejemplo mínimo, completo y verificable– Alvaro Montoro ♦el 14 abr. 2016 a las 19:34
-
aca esta el html disculpa, <div id="boton1"> <a href="www.facebook.com"><img src="17.png" width="138" height="138"/></a> </div> cada boton lo estoy trabajando con un div diferente para poder posicionarlos bn en sus lugares, se posicionan bn en dond la estoy trabajando pero al abrirla en otra resolucion se mueven y necesito que se queden dond deberian estar– nacheel 14 abr. 2016 a las 22:35
1 respuesta
Yo lo que haría seria crear una imagen del mismo tamaño con transparencia e incluiría los iconos ahí ( Tenes que acomodarlos a mano ) y que se ponga encima de tu background y lo aplicaría en el mismo background por css.
Seria algo asi por css:
.clase{background: url('./images/XXX.XXX') ,url('./images/banner/XXX.XXX');}
Con esto te quedarían las 2 imágenes superpuestas individualmente y se deberían ajustar correctamente sin importar el navegador.
-
Buena idea, aparte ya tiene el trabajo hecho con la primera, no deberia haber muchos inconvenientes, excepto que necesite programerle eventos, esperemos que no– jasilvael 14 abr. 2016 a las 19:50
-
Parece por el comentario de OP que esas imágenes son botones, con esta solución, ¿el usuario podría pulsarlos?¿o como están todos superpuestos sólo podrá pulsar en el que esté más arriba?– Alvaro Montoro ♦el 14 abr. 2016 a las 20:09
-
Fakux el codigo que colocastes no lo entendi muy bn, que quieres decir co superpuestas? pasa que cada uno de esos botones tiene su funcion en cascada que al darle click al la imagen baje automaticamente al lugar que le ponga ya todo eso esta listo, solo q esas imagenes al cambiarlas de resolucion se movieron drasticamente– nacheel 14 abr. 2016 a las 22:40
-
Probablemente, no te quede otra opción que posicionarlos de forma fija por
CSS
confixed
o algo similar y controlar tu mismo conbreakpoints
esos puntos. O usarjavascript
para que haga los cálculos por tí....– Alexel 26 abr. 2017 a las 11:00