Manaleisten Code

Okay, das ich jetzt schon ein zweites Mal nach meinem Code für die Manaleiste gefragt worden bin, dachte ich, dass ich den auch gleich öffentlich zur Schau stellen kann.

Ist nicht kompliziert und ein wenig eigensinnig ist er auch, Profi in sowas bin ich halt nicht.







Der äußere der drei Codes gibt das Aussehen des Hintergrundes wieder, hier habe ich den Rahmen gestaltet, sowie eine Hintergrundfarbe festgelegt (Bei mir habe ich das auf none gestellt, damit kein Hintergrund angezeigt wird)

Der mittlere Code ist für die eigentliche Leiste zuständig, hier könnt ihr die Farbe des Balkens anpassen und auch, wie viel angezeigt wird. Wenn ihr die Größe verändert, muss die width als Prozentsatz angegeben werden, damit er auch korrekt funktioniert, sonst landet er euch am linken Rand des Bildschirms.

Der innere Code ist rein für den Text in der Mitte zuständig, damit dieser seine Position nciht verändert, wenn der Balken schmaler wird.

Code:

<div style="width: 300px; height: 15px; background-color: none; margin: auto; border: 1px solid #ffffff; border-radius:10px; box-shadow:3px 3px 10px #000000;"><div style="width: 100%; height: 15px; background-color: #028A0F; border: none; border-radius:10px; text-align: center; color:#000000;"><div style="width: 300px; text-align: center; color:#000000; text-size: 10px;">220 / 220</div></div></div>

Viel Spaß damit und zerschießt nicht das Forum, sonst holt euch Medusa.