 Image als Aufzählungszeichen (CSS)
Listelemente in HTML können neben Nummerierungen die oft recht sinnvoll sind auch Punkte (default), Bullets oder Kreise (disk) als Aufzählungszeichen haben. Manchmal ist es, nicht nur aus designtechnischen Gründen sinvoll, eigene kleine Grafiken zu verwenden.
 Grafiken / Aufzählungszeichen vor Listelementen mit HTML
farbige Bullets / Aufzählungszeichen mittels Sonderzeichen
Einrückung mit HTML und mit CSS
Eigene Grafiken / Aufzählungszeichen in Listelementen <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 im HEAD
CSS-Anweisung im HEAD der HTML-Datei:
ul{
list-style-image:url(user.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
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
vorangestellte(r) vertikaler Balken / vertikale Linie
Diese Lösung bietet sich für größere Textpassagen an (mehr als eine Zeile).
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>
Resultat:
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) Als CSS-Anweisung im HEAD
Definition einer eigenen Klasse
.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>
| 
WWW.WEB-TOOLBOX.NET
ZURÜCK