Listenzeichen ändern

html.de-Forum HTML, XHTML & CSS
1

Hallo miteinander,

ich bin Webmaster einer technisch orientierten Webseite, und ich möchte gerne Inhalte zum Thema Maple (das ist eine Mathematik-Software) einbinden.

Maple hat eine spezielle Benutzereingabe, siehe z.B. hier: http://www.rzbt.haw-hamburg.de/dankert/WWWErgVert/assets/images/ZweiLinGlMaple.gif

Wie kann ich das möglichst einfach mit CSS implementieren? Ich hatte gedacht, eine div oder so zu nehmen, deren Hintergrundfarbe und deren Textfarbe und Schriftart anzupassen, so weit kein Problem, aber das einegntliche Problem sind die > - Zeichen. Wenn jemand den Text von der Seite kopieren will um selbst was auszuprobieren soll er nicht erst die ganzen > entfernen müssen.

Daher: Vielleicht kann man eine

  • nehmen, und das >-Symbol als list-style-Zeichen? Aber ich kenne mich da nicht so aus, gibt es eine elegantere Methode?

    Danke für eure Zeit,
    beste Grüße
    Jens

    • 2

    http://www.css2all.de/list-style-image.html

    3

    http://de.selfhtml.org/html/text/listen.htm

    4

    Pfeil musst du dann selber machen mit Paint, Fireworks etc.

    Danach zuweisen über CSS

    li { list-style-image:url( http://link-oder-pfad.jpg ); }

    5

    Hallo,

    danke für eure zahlreichen Antworten… Also ich hatte gehofft dass ich selber ein Zeichen definieren kann. Aber OK, das wäre dann ne Behelfslösung.

    Hört sich die Vorgehensweise nach nem sauberen Stil an?

    6

    Es gibt kein Standart „>“ Zeichen für Listeneinträge. Nur circle, square etc.

    Am besten du erstellst dir ein .gif mit transparentem Hintergrund und nur und dem „>“ Zeichen. Das bild ist dann nur so 10x10px gross.

    Wenn dann jemand die Formeln kopieren will, werden die .gif 's nicht mitmarkiert da diese immernoch Auflistungszeichen sind.

    7

    Mir ist schon klar wie es funktionieren wird, aber ich finde es irgendwie „unsauber“… Naja, kan man wohl nix machen.

    Danke für eure Hilfe :slight_smile:

    Gruß
    Jens

    8

    oder du formatierst die Liste mit

    ul { list-style: none; }
    li:before { content: „>“; }

    dann brauchst du kein Bild :wink:

    hier ein Beispiel:
    http://www.css2all.de/workshops-listen.html

    9

    Jawoll, genau so etwas meinte ich!!! Danke :slight_smile:

    Aber unterstützen das auch „Browser“ wie IE? Wohl eher nicht, oder?

    10

    Probier es doch einfach aus.

    11

    Erst ab IE8.
    Ich verwende für sowas Grafiken (background-image). Z.B für li oder für li a mit ausreichendem padding(-left).

    12

    Hallo,

    genau das hatte ich befürchtet… Dieses element:before ist noch etwas zu neu, um es flächendeckend vorauszusetzen. Dann nehme ich lieber ein Image.

    Gruß
    Jens

    13

    Es gibt übrigens auch

      -Zeichen auf japanisch, römisch(groß und klein), oder auch vieles andere.

    14

    Wenn es erst ab IE8 Möglich ist, benutz lieber meine Variante.

    15

    Ja, ich denke das werde ich wohl auch machen :slight_smile:

    Danke für eure Hilfe :slight_smile: