Liste mit Pfeil

[André]

Hallo zusammen!

Ich möchte gerne eine Liste in mein HTML Dokument einbinden und in dieser sollen manche Aufzählungen einen Pfeil als Item haben.

Die Besonderheit - und ich fürchte hiermit wird es schwer - es soll keine externe Grafik sein. Der Pfeil rechts → oder Doppelpfeil rechts ⇒ würden mir gut gefallen.

Dass ich mit list-style-image eine eigene Grafik einbinden kann weiß ich - das erfüllt aber wie erwähnt nicht meine Kriterien. Das erstellte Dokument soll eine Art Script sein und nur aus dieser einen Datei bestehen...

Falls jemand eine Möglichkeit kennt, würde ich mich sehr über eine Antwort freuen!

Besten Dank und liebe Grüße,

André  :D

[ChrisB]

Hi,

http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#before_after
http://wiki.selfhtml.org/wiki/Doku:CSS/Eigenschaften/generierter_Inhalt

MfG ChrisB

[André]

Hallo ChrisB!

http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#before_after

Phantastisch - ich glaube daraus kann man was machen. Allerdings: Wenn ich in der CSS-Definition content: "→"; einsetze, wird das so Zeichen für Zeichen voran gestellt - ein Pfeil resultiert daraus nicht.

Wie kann ich daraus einen (HTML) Pfeil machen?

Danke, André  :D

[Der Martin]

Hallo,

Wenn ich in der CSS-Definition content: "→"; einsetze, wird das so Zeichen für Zeichen voran gestellt - ein Pfeil resultiert daraus nicht.

natürlich, der Kontext an dieser Stelle ist "Text", nicht "HTML".

Wie kann ich daraus einen (HTML) Pfeil machen?

Schreib ihn im Klartext, anstatt HTML-Entity-Referenzen zu benutzen.

Ciao,
 Martin

[André]

Schreib ihn im Klartext, anstatt HTML-Entity-Referenzen zu benutzen.

:-|)  Was meint das?!? Wenn ich den Pfeil von http://de.selfhtml.org/html/referenz/zeichen.htm#benannte_pfeile@title=hier rein kopiere, wird daraus ein Fragezeichen gemacht.

Danke, André

[Der Martin]

Hallo,

Schreib ihn im Klartext, anstatt HTML-Entity-Referenzen zu benutzen.
:-|)  Was meint das?!? Wenn ich den Pfeil von http://de.selfhtml.org/html/referenz/zeichen.htm#benannte_pfeile@title=hier rein kopiere, wird daraus ein Fragezeichen gemacht.

(1) Wo reinkopiere?
(2) Wo wird ein Fragezeichen draus?

Natürlich ist es notwendig, auch eine Zeichencodierung zu verwenden, die dieses Zeichen überhaupt darstellen kann. Da würde sich UTF-8 anbieten. Wenn ich den Pfeil von der selfhtml-Seite in ein Dokument kopiere, das "nur" ISO-8859-x kennt, wird er bei mir auch zum Fragezeichen. In ein UTF-8-codiertes Dokument eingefügt, wird er dagegen in seiner vollen Pracht angezeigt.

Ciao,
 Martin

[André]

Hey Martin!

(1) Wo reinkopiere?

Sorry - hab mich wohl wenig klar ausgedrückt. Reinkopieren meinte ich in die CSS-Definition: p.result:before { content: "→ " }

(2) Wo wird ein Fragezeichen draus?

Wenn ich die Definition anwende: <p class="result">Wort</p>. Ergibt ein Fragezeichen vor dem "Wort".

Natürlich ist es notwendig, auch eine Zeichencodierung zu verwenden, die dieses Zeichen überhaupt darstellen kann. Da würde sich UTF-8 anbieten.

Ok, wenn ich <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> im Kopf angebe, werden alle Umlaute zu einem Raute-Zeichen mit einem Fragezeichen drin.

Sorry - wie man sieht bin ich da nicht so der Crack.

Mein "Ursprungsproblem" war ja, eine Aufzählung (Liste) mit einem Pfeil zu kreieren. Die Idee mit ... :before { content: ... war ja schon ganz zielführend. Nun haben sich ein paar Umwege eingeschlichen.

Wie bekomme ich denn nun meinen kleinen Pfeil da hin?

Vielmals Danke - André  :D

[Matthias Apsel]

Om nah hoo pez nyeetz, André!

Ok, wenn ich <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> im Kopf angebe, werden alle Umlaute zu einem Raute-Zeichen mit einem Fragezeichen drin.

Nur weil du auf das Etikett einer Wasserflasche "Rotwein" schreibst, ist da lang noch kein Rotwein drin ;-)

Du musst die entsprechende Datei auch in der Zeichenkodierung UTF-8 speichern. Bei notepad++ etwa unter Kodierung - Konvertiere zu ...

Matthias

[André]

Om nah hoo pez nyeetz, André!

Danke, auch Dir Frieden im Herzen und Glück auf allen Wegen!

Nur weil du auf das Etikett einer Wasserflasche "Rotwein" schreibst, ist da lang noch kein Rotwein drin ;-)

Ha ha - wieder was dazu gelernt. =)

Du musst die entsprechende Datei auch in der Zeichenkodierung UTF-8 speichern. Bei notepad++ etwa unter Kodierung - Konvertiere zu ...

Ah ok - und im PSPad bei "Format" den Haken bei "UTF-8" setzen. Wo wird das eigentlich gespeichert - die Datei ist doch nach wie vor eine ganz normale Text-Datei, oder? Wirkt sich das aus, wenn das auf anderen Rechnern betrachtet wird - sprich, wird dann alles so dargestellt, wie es sein soll?

Danke, André

[Matthias Apsel]

Om nah hoo pez nyeetz, André!

Wirkt sich das aus, wenn das auf anderen Rechnern betrachtet wird - sprich, wird dann alles so dargestellt, wie es sein soll?

Wenn der Browser das beherrscht, ja.

Matthias

[Gunnar Bittersmann]

@@André:

nuqneH

Ah ok - und im PSPad bei "Format" den Haken bei "UTF-8" setzen.

Und zwar vorzugsweise ohne BOM.

Wo wird das eigentlich gespeichert - die Datei ist doch nach wie vor eine ganz normale Text-Datei, oder?

Ja, aber mit anderen Bytesequenzen. Ein 'ä' (Unicode-Codepoint U+00E4) bspw. wird in ISO 8859-1 durch ein Byte E4 codiert, in UTF-8 durch die Bytesequenz C3 A4.

Wirkt sich das aus, wenn das auf anderen Rechnern betrachtet wird - sprich, wird dann alles so dargestellt, wie es sein soll?

Man muss die Zeichencodierung angeben (in HTML so, in CSS so), in der die Datei gespeichert ist.

Einer Textdatei (Folge von Bytewerten) kann man die Zeichencodierung nicht ansehen. Durch eine Heuristik kann man schließen, dass die Bytesequenz C3 A4 für das Zeichen 'ä' stehen soll und nicht für die zwei Zeichen 'ä' (U+00C3 U+00A4), aber das ist Raterei.

Lesetip: Zeichencodierung für Anfänger

Qapla'

[Gunnar Bittersmann]

@@Der Martin:

nuqneH

natürlich, der Kontext an dieser Stelle ist "Text", nicht "HTML".

Nein, der Kontext an dieser Stelle ist "CSS", nicht "Text".

Schreib ihn im Klartext, anstatt HTML-Entity-Referenzen zu benutzen.

Man könnte auch CSS-Escapes benutzen. Was nicht heißt, dass man das tun sollte.

Qapla'

[André]

An alle fleißigen Antwortenden!

Vielen Dank für die Hilfe - die Liste hat nun ihren Pfeil!

Zusammen mit ein paar Änderungen der Außenabstände, dass sich die Aufzählung harmonisch in eine Liste einfügt:

  
  .resultLi { margin-left:-14px;  
              margin-top:0px;  
              margin-bottom:2px;  
              }  
  .resultLi:before { content: "→ "; }  

Danke und liebe Grüße,

André  :D