StyleAssistant |
| Startseite |
 |
| Screenshot |
|
| Kurzanleitung |
|
| Download |
|
| Kurse & Infos |
|
| >Tipps & Tricks< |
|
| Unterstützer |
|
| TMXtensions |
|
| ?Freeware! |
|
| About TM |
|
Stand: 07.12.2002 |
Tipps & Tricks – Tipp 55
|
 |
 |
 |
|
55.
Eigene Listensymbole definieren (08.06.2001)
Die Einträge von ungeordneten Listen werden in HTML mit fest vorgegebenen Symbolen (TYPE="circle || disc || square") markiert. In CSS steht dafür die Eigenschaft
List-Style-Type zur Verfügung, wobei sich ebenfalls die drei genannten TYPE-Angaben zuweisen lassen. Eine verbesserte Listen-Optik kann mit einem grafischen Symbol erreicht werden. Dazu
dient die CSS-Definition List-Style-Image: url(grafik.gif).
Zusätzlich kann die List-Style-Position mit den möglichen Werten inside und outside
vorgeschlagen werden. Weitere Positionierungen der Liste bzw. der Listeneinträge lassen sich mittels Margin- und Padding-Angaben vornehmen.
CSS (Beispiel 55):
UL.diskette
{
List-Style-Image: url(diskette.gif);
List-Style-Position: inside;
}
UL.diskette LI
{
Color: #0000FF;
Background-Color: #FFFFFF;
Font-Family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
Font-Size: 95%;
}
Markup (Beispiel 55):
<UL CLASS="diskette">
<LI>Hier könnte ein Download-Link stehen ...</LI>
<LI>Hier könnte ein Download-Link stehen ...</LI>
<LI>Hier könnte ein Download-Link stehen ...</LI>
<LI>Hier könnte ein Download-Link stehen ...</LI>
<LI>Hier könnte ein Download-Link stehen ...</LI>
</UL>
Beispiel 55 funktioniert problemlos unter IE, Opera, Netscape6/Mozilla. Netscape 4.x zeigt keine grafischen Symbole, dafür jedoch das mit der Textfarbe versehene Standardsymbol (disc).
|
|
 |
|
 |