CSS und HTML Optimierung: Statusbar

  • Hallo,
    ich habe versucht eine Statusbar zu erstellen und das ist dabei rausgekommen:

    [Blockierte Grafik: http://www.abload.de/img/pic617lqow.png]

    Allerdings denke ich nicht, dass ich es auf die schöne Art umgesetzt habe. So wird der Prozenttext mit top und left platziert, was ungenau und unschön ist. Gibt es da bessere Möglichkeiten?


    Hier mein Versuch:

    HTML
    <div style="position:absolute; width:550px; height:34px; background-color:#F0F0F0; border:1px solid #696969;">
        <div style="width:165px; height:34px; background-image: url(status.png);">
        </div>
        <div style="position:absolute; top:5px; left:270px; font-size:20px; font-family:Tahoma, Arial, Verdana;">
        30%
        </div>
    </div>

    Danke!

  • Positioniere den Text so wie jetzt absolut, aber mit top und left bei 0. Dehne das div über die gesamte Höhe und Breite aus und setze "text-align: center;" und ggfs. line-height um den text in die vertikale Mitte zu bekommen.