Estoy realizando la maquetación de un mapa y quiero que los de los elementos de éste sea texto.
Para hacer esto he creado una capa contenedora (mapa) que tiene de fondo la imagen del mapa sin información y he creado diferentes elementos con la información de cada punto para posicionarlo dentro del mapa con position.
El codigo es algo parecido a esto
Cita:
<div id="mapa">
<a href="#" id="elemeto1" >Ayuntamiento</a>
<a href="#" id="elemeto2" >Zoo</a>
<a href="#" id="elemeto3" >Zona nocturna</a>
<a href="#" id="elemeto4" >Zona restaurantes</a>
<a href="#" id="elemeto5" >Aeropuertos</a>
.....
</div>
<a href="#" id="elemeto1" >Ayuntamiento</a>
<a href="#" id="elemeto2" >Zoo</a>
<a href="#" id="elemeto3" >Zona nocturna</a>
<a href="#" id="elemeto4" >Zona restaurantes</a>
<a href="#" id="elemeto5" >Aeropuertos</a>
.....
</div>
y el CSS
Código:
Con esto logro posicionarlo correctamente, el problema es que si modifico algún texto de algun elemento todo se descuadra. a#elemento1 { padding-left: 36px; position: relative; top: 217px; } a#elemento2 { padding-left: 106px; position: relative; top: 244px; }
Lo que me gustaría es que la posición de los diferentes elementos no dependieran de los otros elementos.
Cualquier ayuda o apunte será bienvenido
Muchas gracias!!