Balkendiagramm mit Liste - Beschriftung

[mote]

Hallo,

habe gerade ein einfaches Balkendiagramm geschrieben dass auf einer Liste basiert. Hier werden dann per php die height Werte zugewiesen und fertig. Dachte ich halte das alles so einfach wie möglich.


Meine Vorgehensweise ist, dass ich dem <li> eine Hintergrundfarbe geben und die Höhe dynamisch zuweise. Jedoch will ich dass die Beschriftung über dem Balken angezeigt wird. Theoretisch also außerhalb des <li> Tags.

habe jetzt versucht mit <span> die Beschriftung anzusprechen und einen transparenten Hintergrund zu deklarieren. Dies funktioniert leider nur zum Teil, da ich verschiedne große Zahlen habe und diese dann nie zentriert dargestellt bekomme. Hat jemand eine Idee wie man hier am Besten Tricksen kann? ;)


html

<ul>
                         <li class="a" style="height:200px;"><span>200</span></li>
                         <li class="b" style="height:140px;"><span>140</span></li>
                         <li class="c" style="height:160px;"><span>160</span></li>
                     
                </ul>

css

  div.item.myStatistic .myStatistic-content .left .statistic-container .tables ul { 
        width: 378px; 
        height: 207px; 
    }
    div.item.myStatistic .myStatistic-content .left .statistic-container .tables ul li {  
        position: absolute; 
        width: 40px; 
        bottom: 0px; 
        background-color:red;
        text-align: center; 
        font-weight: bold; 
        color: white; 
    }

funktioniert nicht

span{background-color:#FFF; color:red; text-align: center; padding: 2px 10px; }

DANKE!

 

[Sempervivum]

Wahrscheinlich musst Du dem umgebenden Element des span, d. h. dem li, das "text-align: center;" geben.
PS: Das bezog sich jetzt auf die Zentrierung. Um das span oberhalb des li anzuzeigen, könntest Du dem li ein negatives padding geben.
Eine andere Lösung wäre, das "text-align: center;" im span zu belassen und diesem eine feste Breite zu geben. Dann kannst Du dieses span absolut über dem li positionieren.

 

[thecain]

Dafür gibts auch tolle js frameworks... Zb. D3js

 

[mote]

Danke, hat mit der Positionierung funktioniert. Display:Block war sehr hilfreich :)

JS für die Darstellung möchte ich sowenig wie möglich verwenden, aber danke für den Link werde ich mir ansehen.


EDIT:

Im FF wird der obere Balken leider 3 Pixel zu weit rechts angezeigt. Sieht jemand im Codefragment einen Fehler? Und zwar tritt der Fehler auf, da das erste zum zweiten Icon einen größeren Abstandn hat als die anderen. Danke