Hola a tod@s.
Llevo varios días buscando una solución y no la encuentro. Estoy tratando de poner varios inputs dentro de una sola imagen para incluirla en un formulario. El problema está al redimensionar la imagen con la resolución del navegador: los inputs se van "por su cuenta" y no marcan donde deben estar.
El código es el siguiente (falta parte del formulario y el CSS está incluido en el HTML para no poner dos códigos aquí):
<pre class="codigo">
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento</title>
<style type="text/css">
.contenedor{
max-width: 1200px;
}
.mapa {
background-image: url('http://www.isla-baru.com/images/Map/isla-baru.jpg');
-webkit-background-size: 100%;
-moz-background-size: 100%;
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
padding-top: 56.25%;
}
span.mina {
position: absolute;
margin-top: -20%;
margin-left: 10%;
}
span.rio {
position: absolute;
margin-top: -10%;
margin-left: 20%;
}
span.tren {
position: absolute;
margin-top: -30%;
margin-left: 80%;
}
</style>
</head>
<body>
<div class="contenedor">
<div class="mapa">
<span class="mina">
<input type="radio" name="transporte" value="1">Mina
</span>
<span class="rio">
<input type="radio" name="transporte" value="2">Rio
</span>
<span class="tren">
<input type="radio" name="transporte" value="3">Tren
</span>
</div>
</div>
</body>
</html>
</pre>
Las opiniones de la comunidad e serían de gran ayuda.
Un saludo y gracias.
