Buenos días, necesito ayuda en un proyecto que estoy realizando.
Consiste en una tabla para presentar estadísticas con un gráfico de barras en el lateral.
Para hacerlo normalmente no tengo problema, cargo los datos con javascript y dibujo la tabla, el gráfico lo dibujo en una celda mediante una imágen GIF y le voy dando el tanto por ciento a rellenar.
El problema viene porque estoy intentando meter dos barras continuas con sus respectivos textos de esta manera:
1º color texto 2º color texto
XXXXXXXXXXXXX 10%XXZZZZZZZZZZ 4% ZZ
De esta forma consigo que el gráfico no sea muy extenso en altura.
Funciona perfecto pero al aumentar o disminuir las barras de tamaño los textos no siguen anclados a ellas y se descolocan.
Lo tengo puesto de la siguiente manera:
<td>
<img src="URL 1º IMAGEN" style="width: TPC%; position: relative;">
<span style="margin-left: -TPC%; position: absolute;" class="izda">1ºTEXTO</span>
<img src="URL 2º IMAGEN" style="width: TPC%;">
<span style="margin-left: TPC%;" >TPC%</span>
</td>
TPC es variable
El problema es que me hago un lio con las propiedades CSS position,display, etc y no consigo que los textos queden anclados a sus barras.
¿Se puede realizar?