Diesen Artikel teilen
Infos zum Artikel
Artikel-Thema: Aufzählungslisten mit CSS gestalten
Beschreibung: Mit CSS kann man die 👍 Aufzählungslisten sehr einfach gestalten und die ✅ Anzeige entsprechend beeinflussen wie etwa bei den Abständen.
Neben den Aufzählungszeichen gibt es vor allem die Möglichkeit, mit CSS die generelle Darstellung sehr bequem zu verändern. Das betrifft die Liste als solches ebenso wie jeden einzelnen Eintrag, der in seinen Abständen und Einrückungen verändert werden kann. Man kann auch darüber hinaus weitere Überlegungen anstreben.
Denn man könnte zum Beispiel mit den Symbolen als Aufzählungszeichen bei der ungeordneten Liste verschiedene Symbole verwendet, je nach Thema und Klasse. Man kann auch einmal einen größeren Abstand wählen und einmal eine engere Darstellung auswählen, sodass man verschiedene Formen zusammenstellen kann.
Webhosting mit viel Software bei Alfahosting (Affiliate-Link)
Da steht ein Satz.
Da steht noch ein Satz.
Das ist wohl der letzte Satz.
Im ersten Fall sieht man eine 08/15-Aufzählungsliste, wie sie für HTML typisch ist. Sie ist zusätzlich zwar unterteilt, indem der erste Listenpunkt zwei Unterpunkte erhalten hat und damit zwei Ebenen dargestellt werden, aber ansonsten sind es die Standardeinstellungen, wie sie der Browser üblicherweise anzeigt.
Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)
Die zweite Liste ist mit CSS manipuliert worden. Als erstes ist der obere Rand der Liste selbst (ul-Tag) deutlich erhöht worden und deshalb habe ich Sätze zwischen den Listen eingetragen, um den Unterschied sichtbar zu machen. Die erste Liste ist weniger weit vom darüber befindlichen Satz entfernt als die zweite Liste.
Der erste Eintrag der zweiten Liste ist auch weiter nach rechts gerückt als der zweite, weil dieser erste Eintrag vom linken Rand um fünf Pixel verschoben wurde. Seine beiden Unterpunkte sind gar um 30 Pixel verschoben worden, was durch den Unterschied zur ersten Liste offenbar wird.
Mit diesen Befehlen, die man normalerweise natürlich nicht direkt bei den Einträgen schreibt, sondern zentral in einem CSS-Dokument anführt, kann man die Abstände zwischen der Liste und ihrer Umgebung einerseits und innerhalb der Liste bei den Beiträgen andererseits stark verändern. So könnte eine mehrfach verschachtelte Liste durch engere oder weitere seitliche Abstände gut strukturiert werden, damit man erkennen kann, was zusammengehört und was nicht.
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: Aufzählungslisten mit CSS gestalten
Beschreibung: Mit CSS kann man die 👍 Aufzählungslisten sehr einfach gestalten und die ✅ Anzeige entsprechend beeinflussen wie etwa bei den Abständen.
Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen
Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel
Praxisartikel