Individuelle Spiegelstriche sind zwar nett, aber schlecht zu positionieren. Internet Explorer und Firefox ordenen sie unterschiedlich an, so dass man nicht einmal mit etwas Hintergrund um den Punkt zum gewünschten Ergebnis kommen kann.
Besser:
- ul {list-style-type: none;}
- li {padding-left: 20px;background-image:url(pics/punkt.gif); background-repeat:no-repeat; background-position: 5px 5px;}
Die Liste wird ohne Punkte angezeigt, die Spiegelstriche als Grafik in das Padding des einzelnen Listenelements verlagert und nach Wunsch positioniert.
21. Mai 2008 um 09:30 Uhr
*grosserdankeskuss*
Jetzt geht’s endlich!
23. Januar 2008 um 18:03 Uhr
Klar, da fallen Hintergrundbilder gewöhnlich weg. Dann muss eben im Print-Stylesheet wieder auf die häßlichen HTML-Punkte zurückgegriffen werden
23. Januar 2008 um 17:53 Uhr
Ja, ist ganz nett. Es eignet sich aber nicht fuer alle media-types. Bei print werden zb Hintergruende ueberschrieben.
30. September 2007 um 10:23 Uhr
Bin zwar keine Expertin, aber ich hoffe, hier trotzdem willkommen zu sein…
Dieser Tipp hat mit einem Schlag alle Probleme gelöst, die ich mit der Formatierung listen-basierter Menüs hatte!
Einfach genial! Genial einfach!
Ein Beispiel, wie prima das jetzt funktioniert, findet man hier:
http://www.powertemplate.de/kunden/fonez/index.php/cPath/50_53
Mit “list-style-image” hätte ich das nie so hinbekommen.
25. August 2007 um 15:59 Uhr
Hatte gerade das angesprochenen Problem mit der unterschiedlichen Darstellung der Aufzählungszeichen.
Hatte mich dann schon mit den Standard-Dingern abgefunden.
Bin dann auf diesen Tipp gestoßen, und siehe da: Mein Problem ist gelöst.
Super Tipp, vielen Dank.