2 Farbiger Prozentbalken mit Text

[CGollhardt]

Guten Tag,

ich habe eine Liste von bis zu hundert Prozentangaben:



Und zwar möchte die "Gamerscore" grafisch mit Prozentangaben anzeigen.

Also am beispiel von 50%:

_______________________
|***********           |
_______________________

_______________________
|   500/1000 GS (50%)  |
_______________________

Der Obere Balken soll im Hintergrund sein und der untere (also nur der Text) da drauf sichtbar sein.

Ich habe mir folgendes schon angeschaut:
Prozentbalken in css | gfxpark - Die tägliche Inspiration

Bloß dort geht der Text nur in den Prozentbalken und nicht über den Gesamten Balken (Wenn Ihr versteht was ich meine??!)

Gibt es eine möglichkeit sowas mit HTML darzustellen, also Gesamtbalken (100%), in diesem einen Prozentbalken, und über beides hinweg Zentriert einen Text?

Ich habe mir schon überlegt einfach mit PHP GDLIB diesen Balken zu erzeugen, als Hintergrund in ein Div und dann der Text in den Div rein.

Das Problem ist nur bei einer Liste von 100 Balken, dauert dies lange, bis es alles geladen ist. Deswegen wäre es mir lieb, dies mit HTML realisieren zu können.

Es geht mir hierbei nur um die HTML Darstellung, die Werte sind bereits vorhanden.

Vielen Dank im Voraus (ich sollte diesen Text in meine Signatur schreiben :mrgreen:)

 

[kruschimappel]

Du könntest den Text absolut positionieren innerhalb des "äußeren" Div-Containers.

.graph {
 position: relative;
}

strong {
 position: absolute;
 top: 25%;
 left: 25%;
 width: 50%;
}

 

[CGollhardt]

Vielen Dank für deine schnelle Antwort.

Habe jetzt folgendes gemacht:

<div style="padding: 2px;border:1px solid #000000"><div style="background: #7bd930 none repeat scroll 0% 0%; width: 70%; color: black;"><div style="position:relative;"><span style="position:absolute;left:50%;right:50%">70%</span></div>&nbsp;</div></div>

Allerdings sieht das genauso aus wie ohne positionierung?

edit

Es lag an den left:50%;right:50%; Habe einfach den ersten div und den span auf gleiche Länge gesetzt und konnte den Span so ganz normal zentrieren.

Vielen Dank für deine Hilfe!