Umfrage - Balken beschriften

[FBI]

Hi,

ich arbeite gerade an einer kleinen Umfrage. Das Ergebniss soll folgendermaßen aussehen:

Balken, die entsprechend der Prozentwerte breit sind und beschriftet sein sollen. Wenn der Balken nicht lang genug ist, soll der Text eben darüber hinaus gehen...


Wie kann ich das machen? Ich habe als Balken ein 1x15-Pixel-Bild, was ich je nach Prozentwert entsprechend vergrößere.

Ich habe das auch schon in einer Tabelle als Hintergrundbild probiert, aba da passt sich die Balkenbreite ja der Zeilenbreite sprich der Textbreite an...


Danke
FBI

[lomtas]

gib doch einfach für das bild die breite mit also:

<img height="15px" width="_breite_px" />

damit ist das bild genauso breit, wie du _breite_ definierst.

[Zergling-new]

Re: Umfrage - Balken beschriften

Wenn der Balken nicht lang genug ist, soll der Text eben darüber hinaus gehen...

Entscheide dich lieber für ein Layout, entweder Beschriftung immer darüber oder immer darin (overflow). Aber kein Mischmasch. Der Einfachheit und Übersicht halber würde ich die Beschriftung darüber setzen.

Ich machs meistens so (ungetestet jetzt):

<style type="text/css">
span.bar {
  background: black;
  border: 1px outset silver;
  height: 8px;
}
span.winner {
  background: red;
}
</style>

<h1>Heute schon geschnupft?</h1>

Zewa Softis hält für mich die Nase sauber

<span class="bar winner" style="width:60px"></span> 60%



Ich lass laufen *nase-hochzieh*

<span class="bar" style="width:20px"></span> 20%



Ich nehm keine Drogen

<span class="bar" style="width:20px"></span> 20%

[FBI]

gib doch einfach für das bild die breite mit also:

<img height="15px" width="_breite_px" />

damit ist das bild genauso breit, wie du _breite_ definierst.

Schon klar, aber wie mach ich es dann, dass darüber der Text steht??

[lomtas]

das kannst du machen, ist aber blöd:
<div style="margin-top: -14px">text</div>
Aber wie gesagt ist das keine tolle Lösung, da ist die von Zergling schon allein deswegen wesentlich besser, weil man kein Bild dazu braucht.