Sie sind hier: Startseite -> CSS-Grundlagen -> Aufzählungszeichen (ul-Liste)

Aufzählungszeichen bei ul-Listen mit CSS ändern

Ungeordnete Listen und das Aufzählungssymbol

Wenn man eine ungeordnete Aufzählungsliste in HTML mit dem ul-Tag erstellt, erhält man standardmäßig den gefüllten Kreis als Bulletzeichen oder zu deutsch Aufzählungszeichen geliefert. Das Bulletzeichen ist das kleine grafische Symbol, das jeden Listeneintrag ankündigt und diesem vorangestellt ist. Man kann dieses aber auch ändern.

Denn CSS bietet die verschiedensten Möglichkeiten der Gestaltung, um mehr individuelle Darstellung zu ermöglichen, wobei schon im Standardsatz viele verschiedene Symbole möglich sind.

Mit CSS die ungeordnete Aufzählungsliste gestalten

ergibt:

zuerst die normale Liste

dann die CSS-Variante

Im ersten Fall habe ich eine simple ungeordnete Aufzählungsliste mit zwei Einträgen erstellen, wie sie für HTML klassisch ist. Die zweite Aufzählungsliste ist im Prinzip ident, aber dem ul-Tag wurde der CSS-Befehl list-style-type mit auf den Weg gegeben und er erhielt die Option square, womit aus dem üblichen Zeichen ein Quadrat wurde und die Liste gleich anders wirkt - auch wenn das Geschmackssache ist.

Möglich sind folgende Optionen:

Damit stehen im Basispaket von CSS vier verschiedene Möglichkeiten zur Verfügung, wie das Aufzählungszeichen oder Bulletzeichen mit einem einzigen Befehl verändert werden kann. Später kommt noch die Option hinzu, dass man eine eigene Grafik nutzt.

Wie sinnvoll ist die Änderung des Aufzählungszeichens?

Das ist Geschmackssache, aber die Erfahrung zeigt, dass ein Rechteck interessant, weil meistens wird die Kugel gezeigt. Aber wenn man auf allen Listen das Rechteck hat, haben die Besucherinnen und Besucher sich auch bald sattgesehen und der Neu-Effekt ist bald Geschichte.

Eine andere Lösung ist mit eigenem Befehl eine eigene Grafik, für die aber das Gleiche gilt - man kann es bald nicht mehr sehen, vor allem bei langen Listen mit vielen Einträgen.

Buchtipp: Einstieg in HTML und CSS (Thalia)*
* = Affiliate-Link; bei Kauf unterstützen Sie diese Plattform

Lesen Sie auch

Mit CSS lassen sich die Texte sehr schön formatieren und man kann die gesamte Seite mit den Abständen und den Textfluss aufbauen, aber es geht noch mehr. Eine wichtige Thematik ist die Absatzformatierung, bei der vertikale und horizontale Ausrichtung ebenso möglich ist wie auch der Zeilenumbruch und damit bewusst kürzere Zeilenlängen oder die Zeilenhöhe.

Das nächste Thema bei den Formatierungen mit CSS betrifft den Rahmen. Der Rahmen ist häufig ein optisches Werkzeug, um Inhalt hervorzuheben oder zu strukturieren und man kann in CSS viele Formatierungen wählen wie der Typ der Linie, die Farbe oder auch die Rahmenstärke.

Ebenfalls interessant sind die Gestaltungsmöglichkeiten bei den Listen. Sie können bei den Abständen individuell eingestellt werden und man kann bei der ungeordneten Liste sogar ein eigenes Bild als Aufzählungszeichen wählen.

Themenseiten

Diesen Artikel teilen

Infos zum Artikel

Aufzählungszeichen bei ul-ListenArtikel-Thema: Aufzählungszeichen bei ul-Listen mit CSS ändern
Beschreibung: Mit CSS können auch die 👍 ungeordneten Aufzählungslisten (ul-Tag) formatiert und mit ✅ anderen Aufzählungszeichen angezeigt werden.

Kategorien

Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen

Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel
Praxisartikel