Listen Info und CSS

In diesem Kapitel beschäftigen wir uns mit den Möglichkeiten, die Nummerierung einer Liste anzupassen, ein eigenes Bild als Marker zu verwenden, die Einrückungen browser-übergreifend zu vereinheitlichen, und vielem mehr. Listen können Menschen auf verschiedene Arten dabei behilflich sein, den Überblick zu behalten und sich auf das Wesentliche zu konzentrieren. Das beginnt...

Browser-übergreifende Einrückungen mit ul

Sie wollen eine browserübergreifende Darstellung der Listeneinrückungen erreichen. Legen Sie für das ul-Element Werte für die Eigenschaften margin-left und padding-left fest. Browser setzen zwei verschiedene Methoden ein, um die Einrückung einer Liste zu erreichen. Einige steuern die Einrückung über die Eigenschaft padding-left (linker Innenabstand), während andere stattdessen...

Spezielle Aufzählungszeichen mit - list-style-type

Die Standarddarstellung der Liste soll so verändert werden, dass beispielsweise ein anderes Aufzählungszeichen oder eine spezielle Nummerierung benutzt wird, wie in Abbildung gezeigt. Verwenden Sie die Eigenschaft list-style-type, um das Aufzählungszeichen oder den Zähler für die Liste anzupassen. Die CSS 2.1-Spezifikation definiert verschiedene Stile für...

Eigene textbasierte Aufzählungszeichen verwenden

Sie wollen für Listeneinträge Ihre eigenen, textbasierten Aufzählungszeichen benutzen. Verschachtelte Listen sollen hierbei ein eigenes Zeichen erhalten. Verbergen Sie das reguläre Aufzählungszeichen. Fügen Sie dann mithilfe des Pseudoelements :before und der Eigenschaft content den gewünschten textbasierten Marker (spitze Klammern in unserem Beispiel) vor den Einträgen...

Eigene Grafiken als Aufzählungszeichen verwenden

Sie wollen eine eigene Grafik als Marker für Listeneinträge verwenden. Verwenden Sie die Eigenschaft list-style-image, um eine Grafik für den Marker anzugeben. In der ersten Deklaration dieser Lösung geben wir an, welches Aufzählungszeichen verwendet werden soll, falls das Bild nicht geladen werden kann. In der zweiten Deklaration wird dann das Bild selbst geladen, das nach...

Aufzählungszeichen innerhalb des Listeneintrags

Der Marker soll innerhalb der Box für den Listeneintrag dargestellt werden, wie in Abbildung gezeigt. Dadurch umfließt der Text den Marker. Benutzen Sie die Eigenschaft list-style-position mit dem Wert inside:. Durch die erste Deklaration wird das Aufzählungszeichen vom übrigen Inhalt des Listeneintrags umflossen. Standardmäßig werden die Listenmarker außerhalb der...

Die Kurzschrifteigenschaft list-style verwenden

Sie wollen die wichtigsten Werte für die Gestaltung von Listen in einer Deklaration zusammenfassen. Verwenden Sie die Kurzschrifteigenschaft list-style mit den entsprechenden Werten. Beide Regeln sorgen dafür, dass die enthaltenen Listenelemente statt des standardmäßigen Kreises ein Quadrat als Aufzählungszeichen verwenden...

Trennlinien für Listeneinträge erstellen

Die Listeneinträge sollen durch horizontale Linien voneinander getrennt werden, wie in Abbildung zu sehen. Schaffen Sie mithilfe der Eigenschaft padding etwas Platz zwischen den Listenelementen. Für die Trennlinien verwenden Sie die Eigenschaft border-bottom. Mit der Pseudoklasse :first-child können Sie die fehlende Linie oberhalb des ersten Listenelements erstellen...

Listeneinträge nebeneinander darstellen

Die Elemente einer Liste sollen nebeneinander angeordnet werden und nicht, wie sonst üblich, untereinander. Entfernen Sie die Aufzählungszeichen und definieren Sie die Listeneinträge (li) als Floats. Damit die Einträge voneinander getrennt erscheinen, benutzen Sie das Pseudoelement :before, um für alle Elemente bis auf das erste ein Komma einzufügen. Zu Beginn setzen wir...