Frage CSS 'XP-Bar'

[Gykonik]

Hey Leute,

ich habe nochmal eine Frage. Auf der Website http://xhtmlforum.de/33112-ist-die-knowledge-base.htmlhttp://xhtmlforum.de/33112-ist-die-knowledge-base.html ist rechts eine Art 'XP-Bar', so eine würde ich auch gerne in meine Website einbauen.

Im Quellcode der Website steht folgendes:

<div>
     <span id="repdisplay_241128_1">
          <img class="inlineimg" src="images/reputation/reputation_pos.gif" alt="hemfrie ist jedem bekannt" border="0" />
          <img class="inlineimg" src="images/reputation/reputation_pos.gif" alt="hemfrie ist jedem bekannt" border="0" />
          <img class="inlineimg" src="images/reputation/reputation_pos.gif" alt="hemfrie ist jedem bekannt" border="0" />
          <img class="inlineimg" src="images/reputation/reputation_pos.gif" alt="hemfrie ist jedem bekannt" border="0" />
          <img class="inlineimg" src="images/reputation/reputation_pos.gif" alt="hemfrie ist jedem bekannt" border="0" />
          <img class="inlineimg" src="images/reputation/reputation_highpos.gif" alt="hemfrie ist jedem bekannt" border="0" />
     </span>
</div>

Meine Frage dazu ist:
Muss man das mit den Bildern machen (weswegen das auch immer .gifs sind...) oder gibt es eine Möglichkeit mit CSS?


Mein Plan ist nämlich folgender:
Ich möchte so eine 'XP-Bar' für jeden User machen. Berechnet werden die 'XP' nach verschiedenen Kriterien (Einträge, Registrierdatum, etc.)
Hat ein User mehr als 10 'XPs' so sollen da zwei von den Abschnitten sein (im Beispiel 2x das Bild)

 

[MrMurphy]

Hallo,

die Anzeige von Bildern für solche Anzeigen ist veraltet. Das geht auch mit CSS, Stichwort: "linear gradient".

Gruss

MrMurphy

 

[Gykonik]

Hey,

das ist schon nicht schlecht.
Hab jetzt noch eine Frage für die einzelnen Boxen für die Anzeige

Macht man dann einfach ne Box, gibt mit CSS nen rahmen, nen linear gradient und fertig?
und wenn es 3 Boxen oder so sind einfach 3x ne Box oder geht das 'einfacher'?