Barra grafica dinamica

[salasir]

Vediamo se risco a spiegarmi.

Devo creare delle barre a due colori per realizzare una specie di timeline: in pratica un posizionamento temporale di un evento in modo grafico. (vedere l'immagine). Ovviamente le tre porzioni sono variabili a seconda del tempo in cui è avvenuto l'evento.

Ora ho utilizzato una piccola tabella ( :rollo: ) con le dimensioni delle tre celle impostate da una variabile ed un colore di background. Funziona, come potete vedere, ma vorrei trovare una soluzione magari con CSS e immagini, anche perchè quando stampo la pagina, essendo background, non viene riportato alcunché, salvo modificare le impostazioni del browser (stampa sfondi, background, ..) cosa non proprio bella né comoda e tantomento ovvia per chi ha poca dimestichezza.

Pensate si possa fare?

[Mich_]

Mi mancano delle info per poter consigliare ...

Evidentemente c'e` una certa dinamicita` in quei "grafici", che deve essere fornita da un programma dinamico: lato server o lato client.
Se e` lato client, ti serve JS, per cui al momento non lo prendo in considerazione; se e` lato server, ti serve generare il codice HTML+CSS relativo.

Se la domanda e`:
come posso visualizzare quell'immagine in modo che la parte evidenziata stia in un punto preciso della parte visibile
la risposta e` semplice:
ti fai una immagine molto piu` lunga, e la posizioni dentro un blocco in modo che la parte evidenziata sia proprio dove ti serve
in alternativa fai un blocco (rettangolo lungo) con il colore di sfondo, e ci metti sopra una immagine (tag <img>) di colore diverso da posizionare in modo relativo, e con le dimensioni scelte; in questo caso io metterei la posizione e le dimensioni nel codice HTML, dato che sono elementi di contenuto, non di sfondo/formattazione.

[salasir]

Il codice è generato lato client da un'accoppiata XML/XSL.

La dinamicità è comandata da tre valori proporzionali alla barra (di lunghezza fissa). Tutti possono essere variabili (anche la parte più scura) come dimensione. Per cui non credo si possa utilizzare la prima soluzione dell'immagine lunga, in quanto quella scura può stare ovunque lungo la linea e può avere lunghezze diverse.

Avevo pensato anch'io ad una immagine dimensionata in base alla durata (colore più scuro) da posizionare, ma rimane sempre lo sfondo (colore più chiaro) che se messo come background non viene stampato ... :master:

[Mich_]

Il problema stampa e` una cosa diversa.
E nella stampa e` utile che i colori di sfondo non vengano stampati. Piuttosto io ci metterei un bordo attorno ad ogni "barra", in modo che comunque si veda una striscia colorata all'interno di un rettangolo.

Se hai un CSS specifico per la stampa, puoi aggiungere il bordo solo al CSS di stampa (eventualmente riducendo di 2 px la dimensione in modo da far occupare sempre lo stesso spazio).

Oppure fare il bordo dello stesso colore dello sfondo, cosi` nel browser non si nota, ma in stampa viene visualizzato.

[salasir]

Non avevo pensato al bordo ... ottima idea.

Per il posizionamento dell'immagine scura, invece, la dimensione si può gestire dinamicamente con il width, ma la posizione? Devo generare un css dinamico con, ad esempio, un margin-left variabile?

[Mich_]

Nel tuo caso specifico, proprio perche` la posizione fa parte del contenuto, io userei un CSS embedded:
[img]evidenziato.gif[/img]
oppure:
[img]evidenziato.gif[/img]

mentre invece nel CSS globale la stessa img avra`
position: relative;
height: 100%;

[salasir]

OK. Grande. Ora ci provo.

Grazie mille.

[salasir]

Perfetto Mich, funziona anche meglio delle tabelle che lasciavano uno/due px a sinistra anche definendo width="0" la prima sezione.

Ho solo un piccolo problema con IE (te pareva) ... :rollo:

Ho definito il blocco come

.timeline { height: 5px; width: 327px; float:right; margin:0; padding:0; background-color: #bb9;}
.timeline img {position:relative; height: 100%; }

con FF è perfetto mentre con IE mi viene alto almeno 15px. E non si schioda anche definendo l'altezza 1px. L'immagine l'ho fatta di 100px x 2 px. E rimane anche un px di sfondo sotto l'immagine ... :master:

Forse IE ha una dimensione minima?

[serialkiller]

Originariamente inviato da salasir
Perfetto Mich, funziona anche meglio delle tabelle che lasciavano uno/due px a sinistra anche definendo width="0" la prima sezione.

Ho solo un piccolo problema con IE (te pareva) ... :rollo:

Ho definito il blocco come

.timeline { height: 5px; width: 327px; float:right; margin:0; padding:0; background-color: #bb9;}
.timeline img {position:relative; height: 100%; }

con FF è perfetto mentre con IE mi viene alto almeno 15px. E non si schioda anche definendo l'altezza 1px. L'immagine l'ho fatta di 100px x 2 px. E rimane anche un px di sfondo sotto l'immagine ... :master:

Forse IE ha una dimensione minima?

Dovresti risolvere settando l dimensione del carattere a zero

[salasir]

Ma non ci posso credere ... :rollo:

Grazie. tutto a posto