graphische Pfeile die Ihre Größe anpassen

[Andreas Korthaus]

Hallo!

Ich denke dass es nicht ohne SVG oder Flash geht, aber vielleicht ja doch:

Kann ich so einen Pfeil:

----------
\          \  \          \  /          /
/          /
----------

irgendwie in eine Seite einbetten, so dass er seine Größe in Abhängigkeit von der sichtbaren Fensterfläche des Browsers anpasst?

Ich verwende halt ein einfaches Gif, aber das hat immer eine feste Größe.

Gibts da eine Möglichkeit?

Grüße
Andreas

[Marcus]

Hi,

mit zwei GIFs und z.B. einer skalierenden Tabellenzelle dazwischen die die gleiche Farbe hat?

----l-----l-
\   l     l  \  \  l     l   \  /  l     l   /
/   l     l  /
----l-----l-

Gruß

_marcus

[Andreas Korthaus]

Hi,

mit zwei GIFs und z.B. einer skalierenden Tabellenzelle dazwischen die die gleiche Farbe hat?

Oh Gott - da wäre ich ja jetzt _überhaupt_ nicht drauf gekommen, obwohl ich Vergleichbares oft einsetze, sogar auf derselben Seite ;-)

Vielen Dank!

Grüße
Andreas

[Orlando]

Hi Andreas,

Ich denke dass es nicht ohne SVG oder Flash geht, aber vielleicht ja doch:

hast du dich schon in den Unicode-Tabellen umgesehen? Gut möglich, dass es einige ähnliche Zeichen gibt:

http://unicode.org/charts/

-> http://unicode.org/charts/PDF/U2190.pdf
 -> http://unicode.org/charts/PDF/U2900.pdf

LG Roland

[Andreas Korthaus]

Hi Roland!

hast du dich schon in den Unicode-Tabellen umgesehen? Gut möglich, dass es einige ähnliche Zeichen gibt:

http://unicode.org/charts/

-> http://unicode.org/charts/PDF/U2190.pdf
-> http://unicode.org/charts/PDF/U2900.pdf

Dass das _so_ umfangreich ist wußte ich tatsächlich nicht. Aber da ich was in den Pfeil schreiben will kommt das nicht in Frage. Danke trotzdem!

Grüße
Andreas

[Orlando]

Hi Andreas,

http://unicode.org/charts/

Aber da ich was in den Pfeil schreiben will kommt das nicht in Frage.

Du könntest ja auch etwas *über* einem entsprechenden Symbol darstellen, Stichwort z-index.

LG Roland

[Christian Seiler]

Hallo Orlando,

Du könntest ja auch etwas *über* einem entsprechenden Symbol darstellen, Stichwort z-index.

Hmm. Dann machst Du Dich aber von der Fähigkeit eines Browsers abhängig, diese Schriftzeichen darzustellen. Die Tabellenlösung ist meiner Ansicht nach auch nicht das Wahre, denn dann bist Du beim Pfeil in der Höhe festgelegt oder Du nimmst Pixeleffekte in Kauf.

Andreas, auch wenn Du es ausgeschlossen hast:

Flash wäre hier IMHO die sinnvollste Lösung. [1] Das kann man auf die Größe des Browserfensters skalieren, (width="100%" height="100%") es ist ein Vektorformat und es ist sehr weit verbreitet. Du musst nur Alternativinhalte sinnvoll einsetzen. (d.h. jeder, der kein Flash-Plugin hat, bekommt zumindest den Text in einer "normalen" Box zu Gesicht)

SVG wäre prinzipiell gesehen noch einfacher, allerdings lässt dessen Verbreitung zu Wünschen übrig. (und es lässt sich wegen eines Bugs im Adobe SVG Viewer nicht als <object> sondern nur als <iframe> einbinden, sonst sürzten alle Geckos beim Anzeigen der Seite ab - und bei <iframe> muss man auf Alternativinhalte verzichten)

Viele Grüße,
Christian

[1] So, jetzt dürft ihr mich schlagen. ;-)

[Orlando]

Hi Christian,

Du könntest ja auch etwas *über* einem entsprechenden Symbol darstellen, Stichwort z-index.

Hmm. Dann machst Du Dich aber von der Fähigkeit eines Browsers abhängig, diese Schriftzeichen darzustellen.

IMHO kein Grund, deshalb auf Unicode zu verzichten, zumal ein Layout-Pfeil ohnehin niemals ein essentieller Bestandteil sein sollte. Wenn er fehlt, wird wenigstens der Text darin korrekt dargestellt.

Die Tabellenlösung ist meiner Ansicht nach auch nicht das Wahre, denn dann bist Du beim Pfeil in der Höhe festgelegt oder Du nimmst Pixeleffekte in Kauf.

Die Frage ist eher: Sind Pfeilfragmente tabellarische Daten? *g*

Flash wäre hier IMHO die sinnvollste Lösung. [...] Du musst nur Alternativinhalte sinnvoll einsetzen.

Unter diesen Voraussetzungen spricht nichts gegen Flash. Naja, ein bisschen Evangelismus vielleicht.

[1] So, jetzt dürft ihr mich schlagen. ;-)

<img src="http://skop.net/self/jehova.jpg" border="0" alt="">

Es heißt nicht GETSTEINIGUNG, sondern SELFSTEINIGUNG ;-)

LG Roland

[Christian Seiler]

Hallo Roland,

Wenn er fehlt, wird wenigstens der Text darin korrekt dargestellt.

Das wird er bei Flash und der Tabellenlösung auch.

Flash wäre hier IMHO die sinnvollste Lösung. [...] Du musst nur Alternativinhalte sinnvoll einsetzen.

Unter diesen Voraussetzungen spricht nichts gegen Flash.

Ctrl+D

Naja, ein bisschen Evangelismus vielleicht.

Evangelismus mit welcher Alternative? Bei Unicode mißbrauchst Du Text als darstellendes Element, bei Tabellen hast Du sowieso Probleme, daher bliebe nur noch SVG - das ist allerdings zu problematisch gerade in dem Fall. (wegen dem <object>-Crash des SVG-Plugins)

[1] So, jetzt dürft ihr mich schlagen. ;-)
Es heißt nicht GETSTEINIGUNG, sondern SELFSTEINIGUNG ;-)

Ich habe SCHLAGEN gesagt !!!111 nicht STEINIGEN !!!11111 Ich will einen Anwalt !!!!!!!!!111111111 ;-)

Viele Grüße,
Christian

[Fabian Transchel]

Hi Christian,

Ich habe SCHLAGEN gesagt !!!111 nicht STEINIGEN !!!11111 Ich will einen Anwalt !!!!!!!!!111111111 ;-)

Stonie ist bestimmt schon unterwegs *fg*

Im Ernst jetzt (*g*): Wenn du schon Flash in den Mund nimmst, fest der Meinung bist, ge_schlagen_ zu werden, warum dann nicht steinigen? >;)

Fabian

[Orlando]

Hi Christian,

Wenn er fehlt, wird wenigstens der Text darin korrekt dargestellt.

Das wird er bei Flash und der Tabellenlösung auch.

ein *einzelnes* Unicode-Zeichen mit ein wenig CSS ist aber wesentlich eleganter, als jedes Bunti-Plugin-Zeugs. Ich bin versucht zu sagen, es wäre 31337 ;-)

Unter diesen Voraussetzungen spricht nichts gegen Flash.

Ctrl+D

Hehe, [F12][p] (siehe http://skop.net/self/opera_pref.gif).

Bei Unicode mißbrauchst Du Text als darstellendes Element,

Also entschuldige bitte, aber mit dieser Aussage führst du Unicode ad absurdum. Unicode *ist* ein darstellendes Element, kein Text oder Textersatz.

bei Tabellen hast Du sowieso Probleme, daher bliebe nur noch SVG - das ist allerdings zu problematisch gerade in dem Fall. (wegen dem <object>-Crash des SVG-Plugins)

Gibt's keine Alternativen dazu?

Ich habe SCHLAGEN gesagt !!!111 nicht STEINIGEN !!!11111 Ich will einen Anwalt !!!!!!!!!111111111 ;-)

*patsch* *knuff* *Bud-Spencer-style-bonk*

Besser so? ;-)

LG Roland

[Christian Seiler]

Hallo Roland,

Unicode *ist* ein darstellendes Element, kein Text oder Textersatz.

Unicode ist nur insofern darstellendes Element, als dass Text ein darstellendes Element ist. Unicode ist nichts anderes als ein Zeichensatz für Texte. Genaugenommen der Zeichensatz, der für alle HTML-Dokumente gibt. Verwechsele Unicode nicht mit einer Schriftart.

[SVG-<object>-Problem]

Gibt's keine Alternativen dazu?

Keine Ahnung.

Viele Grüße,
Christian

[Herbalizer]

Hi!

Unicode *ist* ein darstellendes Element, kein Text oder Textersatz.

Unicode ist nur insofern darstellendes Element, als dass Text ein darstellendes Element ist. Unicode ist nichts anderes als ein Zeichensatz für Texte.

Richtig und Falsch. Texte bestehen für mich aus Zeichen, welche eine den regionalen Gepflogenheiten entsprechende Grammatik, Rechtschreibung und Semantik (entehender Wörter) aufweisen. Und das ist für viele in den Codecharts enthaltenen Zeichen nicht der Fall, soll heisen, diese sind nicht für Texte (oder Formeln) zu gebrauchen sondern sind NUR als darstellendes Element, und dazu gehören Smileys, Flugzeuge, Rahmenelemente etc. nicht dazu.

Gruß Herbalizer

[Tim Tepaße]

Hallo Herb,

... und dazu gehören Smileys, Flugzeuge, Rahmenelemente etc. nicht dazu.

Du hast soeben das <I> bekommen, eine auf Smileys, Flugzeuge und Rahmenelementen
basierende Schrift zu entwickeln. ;-)

• Tim

[molily]

Hallo,

Unicode *ist* ein darstellendes Element, kein Text oder Textersatz.

Unicode ist nur insofern darstellendes Element, als dass Text ein darstellendes Element ist. Unicode ist nichts anderes als ein Zeichensatz für Texte.

Richtig und Falsch. Texte bestehen für mich aus Zeichen, welche eine den regionalen Gepflogenheiten entsprechende Grammatik, Rechtschreibung und Semantik (entehender Wörter) aufweisen. Und das ist für viele in den Codecharts enthaltenen Zeichen nicht der Fall, soll heisen, diese sind nicht für Texte (oder Formeln) zu gebrauchen sondern sind NUR als darstellendes Element, und dazu gehören Smileys, Flugzeuge, Rahmenelemente etc. nicht dazu.

Wozu gehören Smileys, Flugzeuge und Rahmenelemente nicht? Der Bezug ist unklar. Sie sind nicht in klassischem Zeichen wie beispielsweise lateinische Buchstaben? Wolltest du sagen, dass sie reine »darstellende Elemente« - wie kommt ihr eigentlich auf diesen Begriff? - sind?

Smileys lassen sich beispielsweise nicht mit Rahmenelementen vergleichen, da Rahmenbausteine ohne Kontext genausowenig Semantik besitzen wie einzelne lateinische Buchstaben. Emoticons und Flugzeugikons hingegen sind genauso wie viele Symbole und Piktogramme im Unicode-Zeichensatz vollständige bedeutungsvolle Zeichen. Wenn ich beispielsweise ein grafisches Pfeilsymbol verwenden möchte, um damit den Inhalt mehrerer sprachlicher Zeichen auszudrücken, verstehe ich nicht, was gegen die Verwendung eines solchen Unicode-Zeichens spricht.

Grüße,
Mathias

[Tim Tepaße]

Hallo Mathias,

Wenn ich beispielsweise ein grafisches Pfeilsymbol verwenden möchte, um
damit den Inhalt mehrerer sprachlicher Zeichen auszudrücken, verstehe ich
nicht, was gegen die Verwendung eines solchen Unicode-Zeichens spricht.

Da ich im Moment mit einer Brotkrümel Navigation rumexperimentiere, überlege
ich natürlich auch, so einen Pfeil einzusetzen. Sollte ich, um den hehren
Idealen der Barriereminimierung zu entsprechen, dieses Unicodezeichen auch
mit mehr Information auszeichen? Zum Beispiel so:

<abbr title="Pfeil">&pfeil;</abbr>

oder mit noch viel mehr Bedeutung...

<abbr title="ist hierarchisch oberhalb von">&pfeil;</abbr>

Gibt es dazu eine Meinung? Ist das Overkill?

(Nein, ich habe nicht vor eine Entity namens &pfeil; zu definieren. Ich
hatte nur keine Lust auf Unicode-Recherche)

• Tim

[Herbalizer]

Hi Mathias

Wozu gehören Smileys, Flugzeuge und Rahmenelemente nicht?

Sorry. Ich meinte das sie nicht zu der Gruppe Zeichen gehören, aus denen sich Texte bilden lassen.

Der Bezug ist unklar. Sie sind nicht in klassischem Zeichen wie beispielsweise lateinische Buchstaben? Wolltest du sagen, dass sie reine »darstellende Elemente« - wie kommt ihr eigentlich auf diesen Begriff? - sind?

Können wir uns auf folgende Begriffe einigen: grafisches Symbol, Icon?

Smileys lassen sich beispielsweise nicht mit Rahmenelementen vergleichen, da Rahmenbausteine ohne Kontext genausowenig Semantik besitzen wie einzelne lateinische Buchstaben. Emoticons und Flugzeugikons hingegen sind genauso wie viele Symbole und Piktogramme im Unicode-Zeichensatz vollständige bedeutungsvolle Zeichen. Wenn ich beispielsweise ein grafisches Pfeilsymbol verwenden möchte, um damit den Inhalt mehrerer sprachlicher Zeichen auszudrücken, verstehe ich nicht, was gegen die Verwendung eines solchen Unicode-Zeichens spricht.

Frage mal deinen Deutschlehrer (oder Japanischlehrer) was er davon hält wenn du in einem Diktat statt dem Wort Flugzeug ein solches Symbol malst.
Es ging um explizit um Text bzw. den Missbrauch von Text. Ausgangspunkt des ganzen waren folgende Zitate von Christian in [pref:t=42026&m=230075]: "Bei Unicode mißbrauchst Du Text als darstellendes Element" bzw. [pref:t=42026&m=230088]: "Unicode ist nichts anderes als ein Zeichensatz für Texte" und ich bin der Meinung, das oben angeführte Piktogramme oder auch Rahmen oder andere Zierzeichen nichts mit einem Text zu tun haben, sondern allenfalls als allgemein verständliche Transkription von sprachlichen Begriffen taugen. Und diese Aufgabe läst sich auch statt mit Unicode mit einem Bild bewerkstelligen. Allerdings halte ich im Gegensatz zu Christian beide Methoden für gleichwertig, bzw. sehe ich keinen Mißbrauch von Unicodezeichen, wenn diese rein representativ benutzt werden, weil eben diese Zeichen rein representativ sind, bzw. genauso viel oder wenig Information (welche sprachlich wiedergebbar ist) enhalten wie ein Bild.

Gruß Herbalizer

[jürgen j.]

Hallo!

Ich verwende halt ein einfaches Gif, aber das hat immer eine feste Größe.

Warum gibst Du dem Ding keine Breite in %?

Tschüs, jürgen

[Andreas Korthaus]

Hi!

Warum gibst Du dem Ding keine Breite in %?

Oh - wußte gar nicht das das geht! Interessant, aber ich glaube das gibt probleme mit den Pixeln, aber mal schauen, Danke Dir!

Grüße
Andreas

[MudGuard]

Hi,

Kann ich so einen Pfeil:

---

\          \ \          \ /          /
/          /

irgendwie in eine Seite einbetten, so dass er seine Größe in Abhängigkeit von der sichtbaren Fensterfläche des Browsers anpasst?

<div style="height:100px; background-color:transparent;">
<div style="width:25px; height:0px; margin:0px; background-color:transparent; border-width:50px 0px 50px 25px; border-color:yellow transparent; border-style:solid; float:left;">
 
</div>
<div style="background-color:yellow;height:100px; float:left; padding-right:20px; line-height:100px; vertical-align:middle;">
Hier der Text für den Pfeil
</div>
<div style="width:25px; height:0px; margin:0px 0px; background-color:transparent; border-width:50px 0px 50px 25px; border-color:transparent yellow; border-style:solid; float:left;">
</div>

cu,
Andreas

[MudGuard]

Hi,

Nachtrag: die Nicht-Gecko-Browser sind wohl zu blöd dazu...

cu,
Andreas

[Andreas Korthaus]

Hi!

Du hilfst mir immer wieder mich über meine Unkenntnis von CSS zu erschrecken :-)

Aber leider:

<img src="http://www.knet-systems.de/temp/sc_ie.gif" border="0" alt="">

<img src="http://www.knet-systems.de/temp/sc_moz.gif" border="0" alt="">

muss man dazu nochwas sagen? IE 6 und Mozilla 1.3.

Ich gehe davon aus das man es im IE 5 niemals so hinbekommt wie im Mozila, oder? Aber vielen Dank für den Hinweis, gut zu wissen, zumindest irgendwann mal ... in einer leider noch zu fernen Zeit...

Grüße
Andreas

[asdf]

<div style="height:100px; background-color:transparent;">
<div style="width:25px; height:0px; margin:0px; background-color:transparent; border-width:50px 0px 50px 25px; border-color:yellow transparent; border-style:solid; float:left;">
 
</div>
<div style="background-color:yellow;height:100px; float:left; padding-right:20px; line-height:100px; vertical-align:middle;">
Hier der Text für den Pfeil
</div>
<div style="width:25px; height:0px; margin:0px 0px; background-color:transparent; border-width:50px 0px 50px 25px; border-color:transparent yellow; border-style:solid; float:left;">
</div>

Es fehlt ein abschliessendes div!

[Calocybe]

Moin moin!

Verdammt clevere Idee! Hab ne Weile gebraucht, bis ich dahintergekommen bin.
Was den IE angeht, hab dieser Tage mal gelesen, dass der jedem Element eine Mindesthoehe gibt, so dass  die Schriftgroesse reinpassen wuerde. Als Abhilfe wurde font-size:0; line-height:0 vorgeschlagen. Weiss nicht, ob es hilft, aber einen Versuch ist es wert.

So long

[Christian Seiler]

Hallo Calocybe,

Verdammt clevere Idee! Hab ne Weile gebraucht, bis ich dahintergekommen bin.

Full ACK.

Was den IE angeht, hab dieser Tage mal gelesen, dass der jedem Element eine Mindesthoehe gibt, so dass  die Schriftgroesse reinpassen wuerde. Als Abhilfe wurde font-size:0; line-height:0 vorgeschlagen. Weiss nicht, ob es hilft, aber einen Versuch ist es wert.

Also: ich habe es gerade mit dem IE 5.0 (unter Linux) getestet und ja: der macht es, wenn man statt transparenter Rahmenfarbe eine normale Farbe (hier: weiß) angibt. Transparente Rahmen mag er nicht, die macht er schwarz. Hier die Testseite:

http://www.christian-seiler.de/temp/test-div-arrow.html

Wow - ich hätte nicht gedacht, dass man das mit CSS hinkriegt. Opera 6.11 und Konqueror 3.1.1 spielen auch mit. Nur Netscape 4 sträubt sich dagegen.

Respekt, Andreas, Respekt, die Lösung ist einfach genial und genial einfach.

Viele Grüße,
Christian

[Andreas Korthaus]

Hallo!

Danke Euch sehr! Leider, leider muss ich unbedingt auf IE 4 Rücksicht nehmen, naja, aber was beim nächten mal kenne ich eine sehr gute Aternative!

Grüße
Andreas

[MudGuard]

Hi,

transparent ist bei border gar nicht zulässig - die Browser, die schwarz einsetzen statt transparent, liegen also nicht total daneben.
Transparent also jeweils durch die Hintergrundfarbe ersetzen.
Und in den beiden Divs Pfeilspitze und Pfeilende noch line-height:0; wie von Calocybe vorgeschlagen).

Also:

<div style="height:100px; background-color:white;">
<div style="width:25px; height:0px; line-height:0; margin:0px; background-color:white; border-width:50px 0px 50px 25px; border-color:yellow white; border-style:solid; float:left;">
 
</div>
<div style="background-color:yellow;height:100px; float:left; padding-right:20px; line-height:100px; vertical-align:middle;">
Hier der Text für den Pfeil
</div>
<div style="line-height:0; width:25px; height:0px; margin:0px 0px; background-color:white; border-width:50px 0px 50px 25px; border-color:white yellow; border-style:solid; float:left;">
 
</div>
</div>

Dann kommen auch IE 5.5, Opera 7 und 6 und aktuelle Geckos damit klar.

Interessant ist, was der Netscape 4.76 bei mir draus macht - da tauchen bei mir ein roter und ein grüner Bereich auf...

cu,
Andreas