list-style-image umschiffen
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.
Geschrieben am 23.08.2006 um 09:22:21 Uhr in der Kategorie CSS, Fortgeschrittene, Feed: RSS 2.0. Sie können einen Kommentar schreiben.
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.
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.
Ja, ist ganz nett. Es eignet sich aber nicht fuer alle media-types. Bei print werden zb Hintergruende ueberschrieben.
Klar, da fallen Hintergrundbilder gewöhnlich weg. Dann muss eben im Print-Stylesheet wieder auf die häßlichen HTML-Punkte zurückgegriffen werden
*grosserdankeskuss*
Jetzt geht’s endlich!