kniffliges Problem: Balkenanzeige mit GIFs oder Tabelle

[Antje Bijken]

Hallo!

Ich habe eine Aufgabe zu lösen, die mir recht knifflig erscheint. Vielleicht fällt Euch ja eine smarte Lösung ein:

Ich möchte eine Art Balkenanzeige in HTML realisieren. Das ist soweit nicht schwer, liesse sich über eingefärbte Tabellen oder Gifs mit entsprechender Länge realisieren. Nun soll aber Text in der Balkengraphik stehen, der, wenn erforderlich, über den Balken hinausgeht. Zur Veranschaulichung:

--------------------------------------------
| Hier steht Text innerhalb eines Balkens  |
--------------------------------------------

aber auch:

-------------------------------------:
| Hier steht ein längerer Text innerhalb eines anderen Balkens
-------------------------------------:

Dadurch scheidet meines Wissens eine Tabelle als Graphikersatz aus. Und ein GIF als Hintergrund lässt sich doch nicht auf einen Pixelwert festlegen, oder?

Eine weitere Einschränkung: ich möchte, wenn irgendwie möglich, kein DHTML nutzen müssen. Mir fällt nix schlaues mehr ein, vielleicht habt Ihr ja einen Rat.

Für jede Hilfe dankbar,
Gruss und Kuss,
Antje

[Michael Schröpl]

Hi Antje,

ich hatte vor einiger Zeit ein ähnliches Problem, allerdings ohne den zwingenden Bedarf für Text innerhalb der Balken.
Deshalb habe ich mein Problem mit Bildern (und Tooltips für die 'Beschriftungen') gelöst:

http://www.schroepl.net/pbm/partien/yield/_1901_f/boerse.htm

Dadurch scheidet meines Wissens eine Tabelle als Graphikersatz aus.

Ich hatte damals auch diverse Versuche durchgeführt, das Bild durch HTML-Code zu ersetzen (um HTTP-Zugriffe zu sparen - das HTML-Dokument ließe sich anschließend hervorragend komprimieren), bin aber letztlich daran gescheitert, diesen "Pseudo-Balken in allen Browser-Varianten auf dieselbe Basis-Linie neben den Zahlenwert zu setzen (was nicht bedeuten muß, daß das nicht doch irgendwie funktionieren könnte ...), was mit dem Bild problemlos funktioniert.

Wenn Du Text hast, der größer ist als der entsprechende Balken, dann kannst Du entweder versuchen, beides entsprechend zu überlagern (den Text in ein <div> mit transparentem Hintergrund legen und via CSS über die Z-Koordinate vor den Balken positionieren), oder den Text direkt in das Bild hinein zu generieren (über entsprechende serverseitige Software, wie das beispielsweise der Webalizer macht:
   http://webalizer.teamone.de/selfaktuell/
, wobei Dein Bild dann neben dem Balken zusätzliche Fläche in einer transparenten Farbe aufweisen muß, über welche Du Deine Beschriftung legen kannst).

Und ein GIF als Hintergrund lässt sich doch nicht auf einen Pixelwert festlegen, oder?

Ein GIF, das nur 1x1 px groß ist, so wie dieses hier
   http://www.schroepl.net/pbm/partien/yield/buy1000.gif
, kann genau eine Farbe enthalten - wie groß Du es in Deinem HTML-Code skalierst, das ist Deine Entscheidung.

Eine weitere Einschränkung: ich möchte, wenn irgendwie möglich, kein DHTML nutzen müssen.

Nichts von alledem, was ich bisher erzählt habe, würde sinnvollerweise browserseitig stattfinden.

In meinem Fall ist es so, daß ich das oben verlinkte Dokument tatsächlich statisch generiere (mit einem DOS-Programm, yeah!) und anschließend hochlade; eine dynamische Generierung auf dem Server wäre aber prinzipiell genauso möglich.

Beachte, daß im vorliegenden Falle die Anzahl der tatsächlichen Zugriffe auf diese kleinen Bild-Dateien möglichst minimal ausfallen sollten - liefere also hinreichend lange Aufbewahrungsfristen in Form passender HTTP-Header mit. In meinem Falle sind das derzeit 4 Wochen:
   http://www.schroepl.net/cgi-bin/http_trace.pl?url=http%3A%2F%2Fwww.schroepl.net%2Fpbm%2Fpartien%2Fyield%2Fbuy1000.gif&method=GET&version=HTTP%2F1.1
(Header "Cache-Control" und "Expires")

Was Du eigentlich tatsächlich haben willst, das wäre eine browserseitig hinreichend gut unterstützte Sprache für Vektorgraphiken, etwa
   http://selfhtml.teamone.de/grafik/formate.htm#svg
Aber das Problem ist derzeit eben die browserseitige Unterstützung ...

Viele Grüße
      Michael

[wahsaga]

hi,

[...] den Text direkt in das Bild hinein zu generieren (über entsprechende serverseitige Software, wie das beispielsweise der Webalizer macht:
   http://webalizer.teamone.de/selfaktuell/
, wobei Dein Bild dann neben dem Balken zusätzliche Fläche in einer transparenten Farbe aufweisen muß, über welche Du Deine Beschriftung legen kannst).

warum transparent?
auf der einen seite die balkenfarbe, auf der anderen seite die selbe farbe wie sie für den seitenhintergrund verwendet werden soll. transparenz ist hier nicht zwingend erforderlich.

Und ein GIF als Hintergrund lässt sich doch nicht auf einen Pixelwert festlegen, oder?
Ein GIF, das nur 1x1 px groß ist, so wie dieses hier
   http://www.schroepl.net/pbm/partien/yield/buy1000.gif
, kann genau eine Farbe enthalten - wie groß Du es in Deinem HTML-Code skalierst, das ist Deine Entscheidung.

die betonung liegt hierbei auf gif _als hintergrundbild_.
wie möchtest du dem eine andere breite verpassen, als die die es naturgemäss hat? (klar, per repeat auf den gesamten bereich strecken wäre möglich, aber das ist ja hier auch wieder nicht sinn der sache.)

gruss,
wahsaga

[JR]

Hallo!

Ja Hi!

Ich habe eine Aufgabe zu lösen, die mir recht knifflig erscheint. Vielleicht fällt Euch ja eine smarte Lösung ein:
...

Ich verstehe dein Problem nicht ganz. Soll der Text sich bewegen oder wie? Falls er sich bewegen will, würde ich das nehmen:

<marquee align="middle" scrollamount="7" width="100" height="30">Hier kommt dein Text hin</marquee>

Aber ich denke, du könntest das so auch alleine ... also, ich kann nur sagen, dass ich dein Problem wohl falsch verstanden habe, weil das, was ich geschrieben habe, is sehr einfach ...

[wahsaga]

hi,

Ich verstehe dein Problem nicht ganz. Soll der Text sich bewegen oder wie?

ich würde sogar sagen, du hast es komplett misverstanden.

kein webdesigner der etas auf sich hält, setzt text ein der sich von selber bewegt ;-)

Falls er sich bewegen will, würde ich das nehmen:
<marquee align="middle" scrollamount="7" width="100" height="30">Hier kommt dein Text hin</marquee>

es wurde nach einer browserübergreifenden lösung gesucht; spätestens an der stelle dürftest du marquee in die tonne hauen, wenn es denn überhaupt gesucht gewesen wäre ...

gruss,
wahsaga

[jürgen j.]

Hallo!

---

Hier steht Text innerhalb eines Balkens

-------------------------------------:

Hier steht ein längerer Text innerhalb eines anderen Balkens

Das geht mit overflow:visible, aber leider nicht mit dem IE (aber mit Opera und mozilla).
Nimm deshalb z.B. diesen miesen Trick:

<div style="width:18%; background:yellow;"> </div>
<div style="position:relative; top:-1.2em;">Text Text Text Text</div>

tschüs, jürgen

[Antje]

Nimm deshalb z.B. diesen miesen Trick:

<div style="width:18%; background:yellow;"> </div>
<div style="position:relative; top:-1.2em;">Text Text Text Text</div>

tschüs, jürgen

Hallo Jürgen,

Deine Antwort ist hervorragend, so geht es sehr gut.
Ich danke Dir für Deine Hilfe, ebenso allen anderen hier.

Kuss, Antje

[Ingo]

<div style="width:18%; background:yellow;"> </div>
<div style="position:relative; top:-1.2em;">Text Text Text Text</div>

tschüs, jürgen

Hallo Jürgen,

Deine Antwort ist hervorragend, so geht es sehr gut.
Ich danke Dir für Deine Hilfe, ebenso allen anderen hier.

hi Antje,
verlaß Dich aber nicht zu sehr darauf, daß es überall so funktioniert. Ein Problem hat diese Lösung m.E. wohl doch: Sie funktioniert nur, wenn der Browser hier auch wirklich für line-height:1.2em verwendet, was aber nicht grundsätzlich vorausgesetzt werden kann. Daher würde ich dies zumindest noch mit angeben.

Gruß
Ingo

[jürgen j.]

Hallo!

<div style="width:18%; background:yellow;"> </div>
<div style="position:relative; top:-1.2em;">Text Text Text Text</div>

verlaß Dich aber nicht zu sehr darauf, daß es überall so funktioniert. Ein Problem hat diese Lösung m.E. wohl doch: Sie funktioniert nur, wenn der Browser hier auch wirklich für line-height:1.2em verwendet, was aber nicht grundsätzlich vorausgesetzt werden kann.

Das ist theoretisch richtig, aber praktisch unrelevant.
Alle Browser seit Netscape Navigator 1 verwenden als Zeilenhöhe 120%.
Richtig ist, daß das w3c in einem CSS2 Beispiel-Stylesheet für HTML4 vorschlägt (aber nicht vorschreibt):
body { line-height: 1.33em }.

Daher würde ich dies zumindest noch mit angeben.

Ja, zur absoluten Sicherheit:
line-heigt:1.2em im body oder nur in den divs noch reinschreiben.

tschüs, jürgen