barra di avanzamento

[pietro09]

sono abbastanza scarso con i fogli di stile e spero nel vostro aiuto.

Vorrei realizzare con gli stili una barra di avanzamento (tipo caricamento files) più o meno fatta così:

un div esterno contenitore

un div interno con centrata la percentuale di avanzamento

un div interno di colore blu che indica l'avanzamento.

ciao

[Mich_]

Direi che hai sbagliato mira.

Prima devi realizzare la cosa in (X)HTML, poi puoi darle forma tramite i CSS.

Comunque la barra deve essere aggiornata/colorata tramite JS o altro: il CSS ti da` le istruzioni statiche, ma la dinamicita` viene da altro.

Diro` di piu`: JS (o qualsiasi programma lato client) puo` solo trasformare dei dati in maniera pseudo-grafica, ma i dati devono arrivare dal server.

[pietro09]

Originariamente inviato da Mich_
Direi che hai sbagliato mira.

Prima devi realizzare la cosa in (X)HTML, poi puoi darle forma tramite i CSS.

Comunque la barra deve essere aggiornata/colorata tramite JS o altro: il CSS ti da` le istruzioni statiche, ma la dinamicita` viene da altro.

Diro` di piu`: JS (o qualsiasi programma lato client) puo` solo trasformare dei dati in maniera pseudo-grafica, ma i dati devono arrivare dal server.

Carissimo Mich_ tu hai ragione, ma voglio spiegarmi meglio.
La mia richiesta, abbastanza semplice, credo, nasce dalla voglia di vedere usare i css come Dio comanda, dato che non li conosco abbastanza e voglio imparare. Pensavo poi di utilizzare il codice, client e server, in un secondo momento.

[Mich_]

OK, ma prima di realizzare il CSS e` necessario realizzare l'(X)HTML.

Prova ad esempio a scrivere in termini di <div> e/o altri oggetti quanto hai descritto sommariamente nel primo post.
Per parte mia, a parte un contenitore del tutto, non ho capito che relazione ci deva essere tra i due "div interni".

[pietro09]

allora, sto facendo prove. Una volta capito quali siano i parametri sensibili farò una funzione javascript o, meglio un oggetto.

Per adesso, i parametri sono:

larghezza, altezza, colore bordo controllo ( un rettangolo)

valore percentuale centrato nel rettangolo contenitore, colore

colore e larghezza della barra di avanzamento

Ho fatto qualcosa. In Firefox e Opera vanno, in IE, no

	<div style="position:relative;border:1px black solid; width:300px; height:16px;">
		<div style="text-align:center;position:absolute; width:50%; height:100%; background-color: #74D5FD;"></div>
		<div style="text-align:center;position:absolute; width:100%; height:100%; background-color: Transparent;font-family:Verdana;font-size: 9pt;">12%</div>
	</div>

[Mich_]

Certo che se metti il CSS inline, la cosa diventa piu` complicata.

Mi pareva volessi fare una cosa fatta bene: questo vuol dire separare il contenuto dalla presentazione.

Traduco:

XHTML:
<div id="barraBox">
	

12%</p>
	[img]pixelblu[/img]
</div>

CSS:
#barraBox {
  position:relative;
  border:1px black solid;
  width:300px;
  height:16px;
}
#barraBox p {
  width: 100%;
  height:100%;
  text-align:center;
  position: relative;
  top:0; left:0;
  z-index: 5;
  background-color: transparent;
}
#barraBox img {
  height:100%;
  width: 12%;
  position: relative;
  top:0; left:0;
  z-index: 2;
  background-color: white; /* vedi tu il colore di sfondo */
}

Poi per le prove di modifica, preparati un campo di testo di questo tipo:
<form>
<input type="text" onchange="setBarra(this.value);" />
</form>

E la funzione Js sara` del tipo:

function setBarra(n) {
  // eventuale test se n >=0 e n<=100
  var cont = document.getElementById('barraBox');
  var perc = cont.getElementsByTagName('p')[0];
  var barr = cont.getElementsByTagName('img')[0];
  perc.innerHTML = n+'%';
  barr.style.width = n+'%';
}

[pietro09]

Originariamente inviato da Mich_
Certo che se metti il CSS inline, la cosa diventa piu` complicata.

Mi pareva volessi fare una cosa fatta bene: questo vuol dire separare il contenuto dalla presentazione.

Lo avrei fatto dopo ciao

[pietro09]

scusa, come si può centrare verticalmente il div con la percentuale 12%

	<div style="position:relative;border:1px black solid; width:300px; height:200px;margin:0px; padding:0px; ">
		<div style="text-align:center;position: absolute; width:50%; height:100%; background-color: #74D5FD;"></div>
		<div style="text-align:center;position: absolute; top:0px; left:0px; width:100%; height:100%; background-color: Transparent;font-family:Verdana;font-size: 10pt;vertical-align: baseline;">12%</div>
	</div>

[Mich_]

Originariamente inviato da pietro09
scusa, come si può centrare verticalmente il div con la percentuale 12%

Che c'entra l'allineamento verticale?
Quel div e` alto 100%: non puo` venir centrato verticalmente: occupa tutto lo spazio.