Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » Design » Listige Listenzeichen

Listige Listenzeichen

Listen gehören zu den häufig verwendeten HTML Elementen, leider lassen sie nur wenige Formatierungen zu. Immerhin sind eckige und hohle Bullets, so heißen die trennenden Symbole, möglich. Legen wir los. Nicht zuletzt Dank CSS verfügen wir über ein gut bestücktes...

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • Ein Kommentar
Lesedauer: 2 Minuten
  • von Sven Lennartz
  • 20. April 2004
Bookmarke mich
Share on pocket

Listen gehören zu den häufig verwendeten HTML Elementen, leider lassen sie nur wenige Formatierungen zu. Immerhin sind eckige und hohle Bullets, so heißen die trennenden Symbole, möglich.
Legen wir los. Nicht zuletzt Dank CSS verfügen wir über ein gut bestücktes Arsenal interessanter Möglichkeiten. Listenzeichen, die so genannten Bullets, lassen sich einfach verändern.
rund und hohl

  • rund und hohl
 <ul style="list-style-type:circle">
    <li>rund und hohl</li>
    </ul> 

eckig

  • eckig
      <ul type=square>
    <li>eckig</li>
    </ul>

rund (Standard)

  • rund
      <ul style="list-style-type:disc">
    <li>rund</li>
    </ul>

Auch die Farbe können wir bestimmen:

  • rund und hohl
       <ul style="list-style-type:circle">
    <li style="color : red;">rund und hohl</li>
    </ul> 

Sollen sich aber Listenzeichen und Text der besseren Optik wegen unterscheiden, müssen wir etwas tiefer in die Trickkiste greifen. Zum Beispiel so:

  • Element 1
  • Element 2
  • Element 3
      <ul>
    <li style="color : red"><div style="color : black">Element
    1</div></li>
    <li style="color : green"><div style="color : black">Element
    2</div></li>
    <li style="color : blue"><div style="color : black">Element
    3</div></li>
    </ul>

Wem das nicht genügt, der greift zu eigenen Listenzeichen. Das ist technisch kein Problem. Es wird eine beliebige, geeignete Grafik eingebunden. Allerdings streiken an dieser Stelle die meisten Browser. Ein Problem ist das aber nicht, schlimmstenfalls bleibt es beim Standardzeichen.

      li { list-style-image: url(re.gif)}

Alle anderen Browser zeigen ihren „Default“-Wert. CSS 3 wird noch mehr können, zum Beispiel Häkchen.
CSS bietet auch die Möglichkeit eine eigene Grafik zu verwenden, leider wird der Effekt nur von sehr neuen Browser unterstützt. Ein Problem ist das aber nicht, da im ungünstigsten Falle die Liste wie immer angezeigt wird.

Die eckige Alternative
Verwenden Sie diesen Befehl. Achten Sie auf den korrekten Pfad zur Grafikdatei (hier re.gif):

      LI { list-style-image: url(re.gif)}

Auf diese Weise ist es ohne Weiteres möglich große Symbole, kleine Zeichnungen und allerlei Farben zu verwenden.
Bleibt eigentlich nur eine Anwendung. Klassische Bullets, jedoch in anderen Farben als die ausgewählten Textelemente. Das funktioniert nicht einfach so. Denn wenn der <li>-Tag verändert wird, nehmen Listenzeichen und Text immer dieselbe Farbe an. Schade eigentlich, doch mit einer Verschachtelung lässt sich auch das machen. Die Textbestandteile der Aufzählung werden separat formatiert.

  • Element 1
  • Element 2
  • Element 3
      <ul>
    <li style="color : red"><div style="color : black">Element
    1</div></li>
    <li style="color : green"><div style="color : black">Element
    2</div></li>
    <li style="color : blue"><div style="color : black">Element
    3</div></li>
    </ul>

Auf diese Weise sorgen wir für bunte Listenzeichen und einen einheitlich lesbaren Text. Das klappt auch mit Ringen:

  • Element 1
  • Element 2
  • Element 3

Der Quellcode:

      <ul type="circle">
    <li style="color : red;"><div style="color : black">Element
    1</div></li>
    <li style="color : green"><div style="color : black">Element
    2</div></li>
    <li style="color : blue"><div style="color : black">Element
    3</div></li>
    </ul>

Drachenbrowser (Moz) und Marktbeherrscher (IE) kennen keinen Unterschied, auch die nordische Fröhlichkeit (Opera) spielt zumindest ab Version 7 mit.
Enthalten die Aufzählungen längere Texte werden diese bündig hinter dem Listenzeichen dargestellt. Das muss aber nicht sein, mit list-style: inside reiht sich auch das Listenzeichen (für gewöhnlich ein kleiner, schwarzer Kreis) in den Textblock ein. list-style: inside hebt die Formatierung dann wieder auf.

  • Die ist ein längerer Text, der als Muster dient.
  • Die ist ein längerer Text, der als Muster dient.
  • Die ist ein längerer Text, der als Muster dient.

Der Quellcode:

      <style type="text/css">
    <!--
    ul { list-style: inside; }
    – >
    </style>
    <ul>
    <li>längerer Text</li>
    <li>längererText</li>
    <li>längererText</li>
    </ul>

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Sven Lennartz

Sven Lennartz

Agenturpartner

Webdesign DOERRER

Frankfurt am Main

minddraft AG

Allenwinden

BIZ Digital Marketing

Nürtingen

Webtronix Media GmbH

Hanau

One Step Webdesign

Hannover

Alle Agenturpartner

Jobs

Senior SEO Manager

München

SEO Junior für Suchmaschinen­optimierung

Salzburg

Online Marketing Manager

München

Senior Online Marketing Manager und stv. Geschäftsführer

Innsbruck

SEA Manager in München

München

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Vollkommen geschmacklos: So stellst du fest, ob ein Design gut oder schlecht ist

Dein eigener Geschmack ist ein schlechter Ratgeber in der Frage der Beurteilung, ob ein Design nun gut oder schlecht ist. Lass uns da mal objektiver

 →   

Design: Was für Sprach-Interfaces der Zukunft wichtig ist

Seit fast zwei Jahren besitze ich einen Amazon Echo. Das Gerät zeigt mir seitdem eindrucksvoll, wie limitiert heutzutage Sprach-Interfaces sind. Da muss sich was tun.

 →   

Mal was anderes: Mondrianismus im Webdesign

Kennst du Mondrian? Nein, wirst du vermutlich sagen. Das ist unwahrscheinlich. Zumindest sein Kunststil wird dir bekannt vorkommen. Schau selbst. Wie hilfreich war dieser Beitrag?

 →   

Eine Antwort zu „Listige Listenzeichen“
— was ist Deine Meinung?

  1. LaTex sagt:
    3. Juni 2012 um 12:34 Uhr

    Sehr ausführlich und verständlich geschrieben.
    Eine Sache ist mir aufgefallen.
    Bei list-style-image fehlen die Hochkommas:
    Also anstatt list-style-image: url(re.gif) muss es list-style-image: url(‚re.gif‘) heißen.

    Antworten

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.