[rollerueckwaerts]

Hallo liebe Community,
Ich scheiter an den Verusch einen Statusbalken mit css durchzusetzten an einer wahrscheinlichen Kleinigkeit

Ich möchte die Prozente genau mittig im "graph" darstellen und nicht mittig von der "graphbar" wie es jetzt momentan ist.

Zur Veranschaulichung des Problems hab ich ein Bild mit angehängt.

Mein Code:

<style>
    .graph { 
      margin: auto;
        position: relative; /* IE is dumb */
        width: 200px; 
        border: 1px solid #B1D632; 
        padding: 2px; 
    }
    .graph .bar { 
        margin: left;
        display: block;
        position: relative;
        background: #B1D632; 
        color: #333; 
        height: 2em; 
        line-height: 2em;            
    }
    .graph .bar span { 
    position: absolute; 
    left: 1em; 
    }
</style>

<div class="graph">
    <strong class="bar" style="width: <?php echo $percent3; ?>%">
    <?php echo $percent3 ?> %</strong>
</div>

Wie schaff ich es die Prozentzahl nicht in der Mitte des Statusbalken anzuzeigen, sondern in der Mitte des gesamten Balkens ?
Hab schon viel rumprobiert und nach ner Lösung gesucht aber so richtig will es nicht.

Hoffe auf eure Mithilfe

Lg
Tobi

[mantiz]

Muss das so bleiben, dass das strong in der Breite variiert?

Ansonsten würde ich mal versuchen das strong als display: block über die volle Breite anzeigen zu lassen und den Text per text-align: center zentrieren.

Den Statusbalken kannst Du dann so realisieren, dass Du z.B. das Grün als Hintergrundfarbe wählst und das weiß als Grafik. Dann verschiebst Du die weiße Grafik je nach Prozentwert per background-position nach rechts.

[cheza]

Es darf nicht inhalt deines Strong Tags sein. Denn jede Veränderung übträgt sich dann auf die Kindelemente.

Also musst du es rausnehmen und und überlagernde Elemente schafften:

div graph
-- div StatusBar
-- div prozentwert

Wenn du sie nun so platzierst, dass sie übereinander angezeigt werden, hast du es geschafft. (Geht auch mit position angaben. Den Text selbst (also die Prozentzahl kannst du mit text-align: center anpassen, dass er mittig steht.

[mantiz]

Ich habe vergessen zu sagen, dass das Verschieben der Hintergrundgrafik nur per Angabe in px möglich ist, evtl. ist dann doch das übereinanderlegen zweier Elemente die einfachere Möglichkeit.

[rollerueckwaerts]

Super Geil Leute !!!

Vielen Lieben Dank. Funktioniert jetzt super.
1 A Support !!



Greetz
Tobi