zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Statusbalken mit Prozente in der Mitte

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.06.2009, 12:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.06.2009
Beiträge: 2
rollerueckwaerts befindet sich auf einem aufstrebenden Ast
Standard Statusbalken mit Prozente in der Mitte

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:
HTML-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
Angehängte Grafiken
Dateityp: png Bild 1.png (1,3 KB, 8x aufgerufen)

Geändert von rollerueckwaerts (05.06.2009 um 12:44 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 05.06.2009, 13:01
Benutzerbild von mantiz
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.02.2007
Beiträge: 2.844
mantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 05.06.2009, 16:06
Neuer Benutzer
neuer user
 
Registriert seit: 05.06.2009
Beiträge: 27
cheza befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 05.06.2009, 18:00
Benutzerbild von mantiz
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.02.2007
Beiträge: 2.844
mantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
  #5 (permalink)  
Alt 05.06.2009, 23:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.06.2009
Beiträge: 2
rollerueckwaerts befindet sich auf einem aufstrebenden Ast
Standard

Super Geil Leute !!!

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



Greetz
Tobi
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
3-Spalten-Layout: Mitte feste Weite, links und rechs und links flexible Weite jogiwebster CSS 17 25.02.2011 17:11
Seite halbieren - Oben bis Mitte, Mitte bis Unten Felixus CSS 6 19.10.2008 19:32
DIV immer ganze Breite - normal?!?!? csski CSS 3 02.07.2008 12:20
Holy Grail und der Internet Explorer! ONeill CSS 23 01.06.2006 18:20
Im 3 Spalten Layout geht Mitte "unten durch" Zwacky CSS 3 16.12.2004 22:07


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:22 Uhr.