Estendiamo il grafico – parte 1: elementi storici
Pensiamo di riportare anche un grafico storico (per esempio il picco delle visite storiche) integrato nello stesso grafico.
Questo fa sempre parte della sezione di ciascuna barra, quindi basta modificare la section in questo modo:
<span class="label"> Firefox:</span> <div class="section"> <span class="chart" style="width:28%;"> <span class="info" >28%</span> </span> <span class="chart2" style="width:18%;"> <span class="info" >18%</span> </span> </div>
Notate la presenza di un nuovo elemento span nell’HTML con classe chart2. Le regole di stile applicate a questo elemento saranno le seguenti:
.chart2{
display: block;
background-color: #c0c0c0;
margin-top: 10px;
border: 1px solid #909090;
float: left;
height: 2em;
}
Insomma: identiche alle regole della classe chart, ma cambiando il colore!
Guardiamo il risultato… stupendo!!!
Ma non mi sento ancora realizzato…sono una persona incontentabile io!
Commenti
3 risposte a “Grafici a barre accessibili”
In base alla segnalazione di alcuni di voi, ho provveduto a sistemare l’incompatibilità che si presentava sulle varie versioni di Internet Explorer.
Sostituendo il commento condizionale dell’esempio 5 con quanto segue, le etichette descrittive di ciascuna barra saranno posizionate correttamente nel posto in cui dovrebbero essere:
<!--[if lt IE 7]> <style type="text/CSS"> .graph_area .label{ margin-left: -50px } </style> <![endif]--> <!--[if lte IE 7]> <style type="text/CSS"> span.chart .info, span.chart2 .info{ margin-top: 5px; margin-left: 2%; display: block !important; } </style> <![endif]-->il “quanto segue” all’interno del tuo commento risulta illeggibile (scritta bianca su sfondo verde-chiaro).
;)
Hai ragione Federico, provvederò quanto prima a sistemare questo maledetto CSS. :)