Buenos días,
me gustaría dibujar una pequeña barra con puntos con <div>, mi idea es mostrar una línia de fondo y varios puntos encima de la línia, para ello hago lo siguiente:
Código HTML:
<div style="height:30px; width: 300px; background-color: #CCCCCC;">
<div style="top: 7px; height: 4px; width: 300px; position: relative; background-image: url('img/fondo_barra.png'); background-repeat: repeat-x;"></div>
<div style="top: 0px; height: 10px; width: 9px; left: 0px; position: relative; background-image: url('img/icono_punto.png'); background-repeat: no-repeat;" ></div>
<div style="top: 0px; height: 10px; width: 9px; left: 30px; position: relative; background-image: url('img/icono_punto.png'); background-repeat: no-repeat;" ></div>
</div>
El problema es que no consigo alinear los puntos en la línia de fondo ya que al poner "position: relative", la primera está encima la línia, la segunda queda por debajo de ella.
Como debería de montar los <div> ??
Gracias y un saludo