Dibujar con divs

[xinxan22]

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

[maycolalvarez]

¿y porque no usa canvas o svg?: francamente usar CSS relative difiere en muchos navegadores y ni hablar del modo quirks!

[xinxan22]

Porque todavía lo desconozco ... algún ejemplo o tutorial para poderlo hacer?

Un saludo y gracias

[furoya]

Lástima que olvidaste poner las imágenes, para saber mejor qué diseño quieres.

Código:

<div style="border: none; border-bottom: 10px black dotted; height: 10px;">
</div>

[kseso?]

Que si se puede "dibujar"
Sólo como muestra:
http://bit.ly/MKB37R

Y barras de progreso sólo css, hay muchas realizaciones, animadas y sin animar.

[caricatos]

Hola:

Si es a partir de una imagen: Imágenes sin imágenes, claro que nos ayudamos de php... y ayudados con javascript puedes buscar en los foros que en algún sitio puse algo de una librería gráfica, que justamente generaba capas para mostrar puntos...

Saludos