Div hinter Text

[Elduration]

Hallo,

ich habe eine, wie ich glaube ungewöhnliche Frage. Zumindest finde ich bei google nichts dazu.

Ich bin dabei ein Votingtool zu basteln. Dafür will ich eine %-Anzeige  haben, wie viele für eine bestimmte Antwort gevotet haben.
Die Balken will ich aber gern ohne Bilder darstellen also am besten mit divs.
Zur Zeit sieht mit quellcode in etwa so aus.

<div style="width:100px;height:20px;">  // Hintergrundbalken (100%)
  <div style="width:30px;height:20px;">  // Balken für 30%
    Antwort 1: 30& (5)
  </div>
</div>

ich will im Grunde bewirken, dass in dem 100% Balken der Text angezeigt wird, der 30% Balken im 100% Balken ist aber nicht von der Testlänge beinflusst wird. Im FF klappt dass, wenn ich statt Leerzeichen &nbsp; benutze aber der IE interpretiert das anders.
Dieser macht dann den 30% Balken so groß wie der Text.
Im Grunde will ich nur, dass er die Schrift über den 30% Balen hinwegschreibt aber genau dass, wird ja von allen Seiten versucht zuverhindern, da ja Divs füre sowas eigentlich auch nicht gedacht sind.

Jetzt ist meine Frage, wie kriege ich dass hin, dass ich die Schrift im 100% Balken stehen habe, der 30% Balken im Grunde darüber liegt mit ner anderen Farbe aber immernoch der Text angezeigt wird.

Geht die überhaput mit CSS ?

Wenn ja gebt mir bitte einen Denkanstoss

[ChrisB]

Hi,

Ich bin dabei ein Votingtool zu basteln. Dafür will ich eine %-Anzeige  haben, wie viele für eine bestimmte Antwort gevotet haben.
Die Balken will ich aber gern ohne Bilder darstellen also am besten mit divs.
Zur Zeit sieht mit quellcode in etwa so aus.

<div style="width:100px;height:20px;">  // Hintergrundbalken (100%)
  <div style="width:30px;height:20px;">  // Balken für 30%
    Antwort 1: 30& (5)
  </div>
</div>

Es handelt sich um mehrere Antworten zu einer Frage - also muss fast zwangslaeufig eine Liste im Code auftauchen.

ich will im Grunde bewirken, dass in dem 100% Balken der Text angezeigt wird, der 30% Balken im 100% Balken ist aber nicht von der Testlänge beinflusst wird. Im FF klappt dass, wenn ich statt Leerzeichen &nbsp; benutze aber der IE interpretiert das anders.
Dieser macht dann den 30% Balken so groß wie der Text.

Ja, der IE < 7 interpretiert overflow:visible leider falsch.

Im Grunde will ich nur, dass er die Schrift über den 30% Balen hinwegschreibt aber genau dass, wird ja von allen Seiten versucht zuverhindern, da ja Divs füre sowas eigentlich auch nicht gedacht sind.

Hae?

Du verwechselst glaube ich gerade Ursache und - Unsinn.

Jetzt ist meine Frage, wie kriege ich dass hin, dass ich die Schrift im 100% Balken stehen habe, der 30% Balken im Grunde darüber liegt mit ner anderen Farbe aber immernoch der Text angezeigt wird.

Eigentlich brauchst du doch hoechstens einen IE < 7 Workaround, wenn ich das ganze richtig verstehe.
(Der koennte fuer diesen veralteten Browser bspw. so aussehen, dass es eben gar keine farbliche Darstellung des Ergebnisses gibt, sondern nur die Zahlenwerte.)

MfG ChrisB

[Detlef G.]

Hallo Elduration

Jetzt ist meine Frage, wie kriege ich dass hin, dass ich die Schrift im 100% Balken stehen habe, der 30% Balken im Grunde darüber liegt mit ner anderen Farbe aber immernoch der Text angezeigt wird.

Geht die überhaput mit CSS ?

Vielleicht so:
<div style="[code lang=css]width:100px;height:20px;background-color:red;">
  <div style="width:30px;height:20px;background-color:green;position:relative;">
    <div style="white-space:nowrap;position:absolute;top:0;left:0;">
     Antwort 1: 30& (5)
    </div>
  </div>
</div>
[/code]

Auf Wiederlesen
Detlef