Ajuda com valores para posicionar barras em visualizador WEB

Buenas noches. Es mi primer mensaje (no encontré un lugar donde presentarme, disculpen si estoy fuera de sitio)
Quisiera ver si pudiese recibir ayuda respecto a unos valores que requiero sean aceptador por un div.absolute

Me explico:

Dentro de un visualizador WEB en FileMaker ncesito ver 2 "barras" la Azul claro indicandome la posición de inicio y longitud programados según proyecto y la roja, indicandome la posición y longitud de lo que realmente sucede en obra.

Al hacer mis pruebas, puse valores fijos, para la barra azul en left: y width: y si aparece la barra. y traté de poner valores calculados desde la ocurrencia de tabla respectiva y simplemente no aparecen.

Resumiendo: ¿es posible poner valores en left: y with: desde campos externos?
Abajo una copia de mis datos:

"<!doctype html>
<html>
<head>
<style>

div.absolute {
position: absolute;
top: 1px;
left: 267px;
width: 410px;
height: 4px;
border: 1px solid gray;
background-color: lightblue;
}

div.absolute2 {
position: absolute;
top: 8px;
left: Conts_detalles:: DiasDesdeMinimoAgenda;
width: Conts_detalles:: DuracionAgenda;
height: 4px;
border: 1px solid gray;
background-color: red;
}
</style>
</head>
<body>
<div class = \"absolute\"> </div>
<div class = \"absolute2\"> </div>
</body>
</html>"

Saludos y de antemano gracias

Pedro

Algo como una barra de carga?

Hola. Buenas noches.
Si es algo semejante, pero no quiero utilizar el progress, ya que siempre inicia en 0 (según yo)
Más bien como un diagrama de Gantt (creo así se escribe y llama)...
Si ves la imagen , veras que la barra azul, que aparece porque puse números, está arriva del canvas, y representa graficamente las fechas de inicio y término, según proyecto, de un contrato de obra. Y abajo no se ve nada, que es donde se debería ver en rojo, igual graficamente, las fechas de inicio real y término real... es más quiero poder anexar una tercera barra (donde va la roja) que represente excedencias en tiempo.

Espero haberme explicado.

Saludos

Algo como esto:
Pedro

Hola de nuevo.

Creo que lo que necesito es saber como cambiar o introducir valores calculados en "left:" y "width:"
¿Necesitaré definirlos mediante variables?
Sinceramente no tengo ni idea. Llevo 2 días quebrandome la cabeza, Seguramente es una

div.proyecto {
position: absolute;
top: 1px;
left: 267px;
width: 410px;
height: 4px;
border: .5px solid gray;
background-color: blue;
}

Saludos

Pedro

pedrinalex disse:

Hola de nuevo.

Creo que lo que necesito es saber como cambiar o introducir valores calculados en "left:" y "width:"
¿Necesitaré definirlos mediante variables?
Sinceramente no tengo ni idea. Llevo 2 días quebrandome la cabeza, Seguramente es una

div.proyecto {
position: absolute;
top: 1px;
left: 267px;
width: 410px;
height: 4px;
border: .5px solid gray;
background-color: blue;
}

Saludos

Pedro

Clique para expandir...

mmm simplemente cada div tendra un id unico al cual con js (o jquery) le agregas las variables que necesitas... aca te dejo un ejemplo que arme recien: https://jsfiddle.net/chydapnz/

se crea un div padre con un width fijo y un div hijo el cual sera el % a mostrar... entonces solo conviertes el valor que necesitas mostrar sobre el 100%
digamos que son 2 dias de trabajo sobre un total de 7 dias maximo, haces regla de 3 simple...
(2*100)/7=28,57... entonces este valor le pones el % al final y eso sera el % del trabajo realizado.

Muchas gracias (escribo lo que sigue, sin ver tu ejemplo)
ok, pero para cada obra varian tanto los días máximos como los de trabajo. Y no puedo poner esos valores a mano, son obtenidos mediante campos calculados, los cuales quiero reflejar.
(voy a ver lo qu eme dices, en este momento)

Ya lo vi, pero no son valores incrementales. Deben ser valores que vienen de un campo calculado.
No se si me explico correctamente.
Esa regla de 3 que me dices, me queda muy claro, pero no es algo que deba hacerse manualmente.
Si te fijas en la imagen que puse en el primer post. veras que mis representaciónes de visualizadores web
son muchas, (una por cada contrato)

No todo es web. la captura es de una ventana de filemaker, en donde ya obtuve los valores que quiero representar en el div.

Muchas gracias por tomarte el tiempo de leerme y por responder.

Saludos

Pedro