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.
Webhosting mit viel Software bei Alfahosting (Affiliate-Link)
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 Vorteil ist eine individuelle Gestaltung, die es ganz sicher auf keiner anderen Webseite geben kann wie etwa das Logo eines Unternehmens oder eines Projekts. Aber der Nachteil hat sich immer wieder bald eingestellt, denn neu ist die Grafik auch als kleines Bild nett, lustig, innovativ oder ähnliches, aber bald schon geht man davon wieder weg.
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 20-mal 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 vielfach 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 fallen gelassen. Allerdings sollte man im Hinterkopf behalten, dass es diese Möglichkeiten weiterhin gibt. Für so manches Projekt oder für eine Produktseite kann das durchaus interessant sein - man sollte aber kein Logo nehmen, sondern vielleicht ein Symbolbild, das thematisch dazupasst.
Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)
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
Artikel-Thema: CSS und list-style-image ermöglichen eigenes Aufzählungssymbol
Beschreibung: Die 👍 UL-Aufzählungslisten können auch mit einem ✅ eigenen Bild ausgestattet werden und zwar per CSS und list-style-image - zum Beispiel mit einem Logo.
Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen
Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel
Praxisartikel