Grafik für Aufzählung (CSS)
    
 Home • CSS • Aufzählungsliste

 Grafik als Aufzählungszeichen (CSS)

Listen in HTML können neben Nummerierungen auch Punkte (default), Bullets oder Kreise (disk) als Aufzählungszeichen haben. Sie können mit Hilfe von CSS aber auch eigene Grafiken für die einzelnen Elemente einer Liste anzeigen lassen.

eigene Aufzählungszeichen für Listen <li>

Manchmal ist es nicht nur aus designtechnischen Gründen sinnvoll, eigene kleine Grafiken als Aufzählungszeichen zu verwenden. Dazu können Sie natürlich HTML-Techniken einsetzen:

Grafiken / Aufzählungszeichen vor HTML-Listen
farbige Bullets / Aufzählungszeichen mittels Sonderzeichen
Einrückung mit HTML und mit CSS

Ich empfehle aber den Einsatz von CSS-Formatierungen. Sie erweitern Ihre Möglichkeiten auf die Verwendung eigener Grafiken für Aufzählungslisten. Diese Technik findet eine Anwendung nicht nur bei einfachen Listen sondern auch bei CSS-Menüs und formatierten Sitemaps.


   Eigene Grafiken / Aufzählungszeichen in Listen <li> mit CSS

Ein wenig 'Kosmetik' für Ihre Listen

Anwendungen: Sitemap / Telefonlisten / Links

  • Userprofil MadMax anzeigen
  • Userprofil JuppZupp anzeigen
  • Userprofil SuperDad anzeigen
  • Userprofil Omi99 anzeigen

  • Userprofil MadMax anzeigen
  • Userprofil JuppZupp anzeigen
  • Userprofil SuperDad anzeigen
  • Userprofil Omi99 anzeigen

1   Beispiel globale Definition für alle Listen der Seite

CSS-Anweisung im HEAD der HTML-Datei: 
ul{
list-style-image:url(grafik.gif);
}

<ul>
  <li>Userprofil anzeigen</li>
  <li>Userprofil anzeigen</li>
  <li>Userprofil anzeigen</li>
  <li>Userprofil anzeigen</li>
</ul>


2   Als CSS-Inlineanweisung im <ul>-Tag: 
<ul style="list-style-image:url(../images/b9x9a.gif)">
  <li>wichtiger Text steht hier</li>
  <li>wichtiger Text steht hier</li>
  <li>wichtiger Text steht hier</li>
  <li>wichtiger Text steht hier</li>
</ul>
2a) Resultat: Grafik mit dem Dateinamen 'block9x9.gif'

  • wichtiger Text steht hier
  • wichtiger Text steht hier
  • wichtiger Text steht hier
  • wichtiger Text steht hier
2b) Beispiel: Grafik mit dem Dateinamen 'telefon.gif'

  • Telefonnummer steht hier
  • Telefonnummer steht hier
  • Telefonnummer steht hier
  • Telefonnummer steht hier

3  Zuweisung durch CSS-Klasse

Sie notieren eine Anweisung für eine CSS-Klasse und weisen die dort festgelegten Formatierungen für die Aufzählung über das Attribut 'class' zu.

CSS-Anweisung im HEAD der HTML-Datei: 
ul.stern {
list-style-image:url(sternchen.gif);
}

<ul class="stern">
  <li>Userprofil anzeigen</li>
  <li>Userprofil anzeigen</li>
  <li>Userprofil anzeigen</li>
  <li>Userprofil anzeigen</li>
</ul>





   List-Style-Position



3a) Beispiel: ohne Grafik, ohne List-Style-Position

  • Zeile1 Hinweis auf die Datei
    Zeile2 Hinweis auf die Datei
    Zeile3 Hinweis auf die Datei
  • Hinweis auf die Datei steht hier
  • Hinweis auf die Datei steht hier
  • Hinweis auf die Datei steht hier


3b) Beispiel: ohne Grafik, mit list-style-position:inside;

  • Zeile1 Hinweis auf die Datei
    Zeile2 Hinweis auf die Datei
    Zeile3 Hinweis auf die Datei
  • Hinweis auf die Datei steht hier
  • Hinweis auf die Datei steht hier
  • Hinweis auf die Datei steht hier


3c) Beispiel: mit Grafik

  • Zeile1 Hinweis auf die Datei
    Zeile2 Hinweis auf die Datei
    Zeile3 Hinweis auf die Datei
  • Hinweis auf die Datei steht hier
  • Hinweis auf die Datei steht hier
  • Hinweis auf die Datei steht hier


3d) Beispiel: mit Grafik, mit list-style-position:inside;

  • Zeile1 Hinweis auf die Datei
    Zeile2 Hinweis auf die Datei
    Zeile3 Hinweis auf die Datei
  • Hinweis auf die Datei steht hier
  • Hinweis auf die Datei steht hier
  • Hinweis auf die Datei steht hier



   Alternative durch Randdarstellung

Ein vorangestellter Balken / eine vorangestellte vertikale Linie ist eine Alternative zu formatierten Listenelementen. Dazu wird für das Seitenelement (z.B. <p>, <div> oder <span>) ein linker Rand bestimmt. Dieser Rand kann für größere Textpassagen dann auch über die gesamte vertikale Höhe angezeigt werden.

Beispiel:

Freilebende Gummibärchen gibt es nicht.

Man kauft sie in Packungen an der Kinokasse.

Gummibärchen haben eine Konsistenz wie weichgekochter Radiergummi.


1  als Inline-Argument 
<div style="border-left:10px solid #00AD66; padding-left: 10px;">
  Freilebende Gummibärchen gibt es nicht. Man kauft sie in Packungen
  an der Kinokasse. Dieser Kauf ist der Beginn einer fast erotischen
  und sehr ambivalenten Beziehung Gummibärchen-Mensch. Zuerst genießt
  man. Dieser Genuß umfaßt alle Sinne. Man wühlt in den Gummibärchen,
  man fühlt sie. Gummibärchen haben eine Konsistenz wie weichgekochter
  Radiergummi.
</div>
Diese Lösung bietet sich besonders für größere Textpassagen (mehr als eine Zeile) an. In Druckwerken wird sie zur Markierung wichtiger Abschnitte verwendet.

Freilebende Gummibärchen gibt es nicht. Man kauft sie in Packungen an der Kinokasse. Dieser Kauf ist der Beginn einer fast erotischen und sehr ambivalenten Beziehung Gummibärchen-Mensch. Zuerst genießt man. Dieser Genuß umfaßt alle Sinne. Man wühlt in den Gummibärchen, man fühlt sie. Gummibärchen haben eine Konsistenz wie weichgekochter Radiergummi.


Freilebende Gummibärchen gibt es nicht. Man kauft sie in Packungen an der Kinokasse. Dieser Kauf ist der Beginn einer fast erotischen und sehr ambivalenten Beziehung Gummibärchen-Mensch. Zuerst genießt man. Dieser Genuß umfaßt alle Sinne. Man wühlt in den Gummibärchen, man fühlt sie. Gummibärchen haben eine Konsistenz wie weichgekochter Radiergummi.


Freilebende Gummibärchen gibt es nicht. Man kauft sie in Packungen an der Kinokasse. Dieser Kauf ist der Beginn einer fast erotischen und sehr ambivalenten Beziehung Gummibärchen-Mensch. Zuerst genießt man. Dieser Genuß umfaßt alle Sinne. Man wühlt in den Gummibärchen, man fühlt sie. Gummibärchen haben eine Konsistenz wie weichgekochter Radiergummi.



2  Definition einer eigenen Klasse

CSS-Anweisung im HEAD 
.textblock
{
border-left:   10px solid #DFDFDF;
padding-left:  10px;
}


Einbindung: 
<div class="textblock">
  Freilebende Gummibärchen gibt es nicht. Man kauft sie in Packungen
  an der Kinokasse. Dieser Kauf ist der Beginn einer fast erotischen
  und sehr ambivalenten Beziehung Gummibärchen-Mensch. Zuerst genießt
  man. Dieser Genuß umfaßt alle Sinne. Man wühlt in den Gummibärchen,
  man fühlt sie. Gummibärchen haben eine Konsistenz wie weichgekochter
  Radiergummi.
</div>



Mini-Grafiken für eine Site-Map finden sie in meiner "MINI_IMAGE-BOX" im Untermenü 'Site-Map'. und 'Aufzählungszeichen'. Insgesamt werden dort ca. 7000 winzige Bildchen für den Homepagebau zum Download angeboten.

Ein Projekt der Web-Toolbox  MINI-IMAGE-BOX







Sitemap 01 - Aufzählungsliste mit eigenen Grafiken

Sitemap 02 - Kennzeichnung der Ebenen durch Einrückung

Sitemap 03 - detailierte Sitemap mit DIV-Containern

Sitemap 04 - Quicknavi als Sitemap (Grafiken)

Sitemap 05 - Sitemap als verschachtelte Aufzählungsliste

NACH OBEN