Einfache und nützliche Tipps für den "Selbstvollender" - Teil 6

Wie erzeugt man gefärbte Aufzählungselemente in ungeordneten oder geordneten Listen?

Sieht nicht gerade spektakulär aus, ist jedoch mit Standard-HTML nicht so einfach zu realisieren.

Um das vorstehend genannte Beispiel mit dem roten Aufzählungsquadrat zu realisieren, verwendet man passende Style-Sheet-Anweisungen im Quellcode des ul-tags:

<ul style="list-style-type:square; color:#FF0000">
<li><span>Listenpunkt 1</span></li>
<li><span>Listenpunkt 2 </span></li>
<li><span>Listenpunkt 3 </span></li>
</ul>

Mit der nachfolgenden CSS-Anweisung, untergebracht z.B. im Head-Bereich der HTML-Seite

<style type="text/css">
li span {color:#000000; }
</style>

kann man zudem die Schwarzfärbung der Texte innerhalb der Aufzählung festlegen.

In ungeordneten Listen lässt sich ein gefärbtes Aufzählungselement auch in Form einer geeigneten Grafik mit Hilfe der nachfolgenden Style-Sheet-Anweisung einbauen:

<li style=" list-style-image: url(../Pfad zur Grafikdatei/Grafikdatei)">... </li>

Weitere Interessante Möglichkeiten mit Listen und CSS-Anweisungen:

Mit der CSS-Anweisung <ul style="list-style: none; margin: 0; padding: 0;"> lassen sich die Listenelemente und die Einrückung ganz entfernen. Das Ergebnis sehen Sie nachstehend:

• Listenpunkt 1
• Listenpunkt 2
• Listenpunkt 3

Und mit der CSS-Anweisung "li display: inline;" kann man eine Liste auch horizontal anordnen:

• Listenpunkt 1
• Listenpunkt 2
• Listenpunkt 3
Listenpunkt 4

<ul style="list-style: none; margin-left: 50;">
<li style="display: inline; padding-right: 50px;">Listenpunkt 1</li>
<li style="display: inline; padding-right: 50px;">Listenpunkt 2</li>
<li style="display: inline; padding-right: 50px;">Listenpunkt 3 </li>
<li style="display: inline;">Listenpunkt 4</li>
</ul>

Mit den beiden letztgenannten Varianten ist es möglich, vertikale und horizontale Navigationsleisten zu erstellen und dabei auf den Einsatz von umständlichen Tabellen zu verzichten.

zurück zu Teil 5 | zurück zu Teil 3 | zurück zu Teil 1