Sie sind hier: Startseite -> CSS-Grundlagen -> Listen -> list-style-image

CSS-Grundlagen: eigenes Aufzählungszeichen

Eigenes Aufzählungszeichen durch CSS

In den beiden vorangegangenen Artikeln habe ich die Möglichkeit aufgezeigt, wie man in geordneten Listen (ol-Tag) und ungeordneten Listen (ul-Tag) die Aufzählungszeichen verändern kann. Es handelt sich dabei um den list-style-type-Befehl in CSS, der eine Umstellung möglich macht.

Es gibt aber noch eine Möglichkeit, bei ungeordneten Aufzählungslisten das Zeichen, das jeden Eintrag der Liste ankündigt und auch Bulletzeichen genannt wird, zu manipulieren. Und zwar gibt es die Lösung, dass man eine eigene Grafik einsetzt, die per Pfad hinzugeladen wird. Der Aufruf erfolgt wie bei den bereits gezeigten Listen beim ul-Tag direkt und hier kommt aber der CSS-Befehl list-style-image zum Tragen.

Mit diesem simplen Befehl ist es möglich, individuelle Grafiken einzusetzen, die als Aufzählungszeichen zum Einsatz kommen. Einige Zeit war es im Internet fast üblich, solche individuellen Lösungen anzustreben, aber mittlerweile ist man mehrheitlich davon wieder abgekommen.

Der Hauptgrund ist der, dass ein Overkill-Effekt eintritt, wenn man längere Listen vor sich hat. Stellen Sie sich vor, Sie haben eine Aufzählungsliste mit 20 Einträgen und 20mal kommt das Logo in kleinster Form vor, zusätzlich ist das Logo in normaler Größe links oben auf der Seite zu sehen und wenn man die nächste Unterseite aufruft, sieht man wieder zigfach das Logo - das kann sehr schnell zuviel werden und von den Besucherinnen und Besuchern als anstrengend empfunden werden.

Deshalb haben viele diese Idee, die an sich eine lustige und nette ist, wieder fallengelassen.

Ebenfalls interessant:

Bulletzeichen (ul)

Informationen über die Möglichkeit, mit CSS die Aufzählungszeichen der Listen zu verändern.

Bullettzeichen (ol)

Informationen über die Möglichkeit, die Aufzählungszeichen bei geordneten Listen mit CSS zu verändern.

[aktuelle Seite]

list-style-image

Informationen über den CSS-Befehl list-style-image, mit dem bei einer ungeordneten Aufzählungsliste ein eigenes Zeichen eingebaut werden kann.

Listen formatieren

Informationen über die Möglichkeiten, mit CSS Aufzählungslisten zu formatieren.

Soziale Medien

Wenn der Artikel gefallen und/oder geholfen hat, bitte teilen:

Zurück zum Hauptthema

Übersicht Listen

Startseite CSS-Grundlagen