2x bewertet

Eigene Listenpunkte sauber mit CSS formatieren

von pixelprinzessin  |  10.12.2008 um 09:52 h
CSS Grundlagen
Typ: CSS Grundlagen
Stufe:Einfach
Eigene Listenpunkte sehen natürlich toll aus, sind auch einfach zu formatieren. Allerdings, wenn man sie über list-style-type im CSS formatiert, kann es sein, dass sie in den Browsern unterschiedlich angezeigt werden. Dies kann man einfach umgehen.


ul.meinelistenpunkte { list-style-type: none; }
ul.meinelistenpunkte li { background: url(pfad/grafik.gif) left top no-repeat; padding: top right bottom left; margin: top right bottom left; }


Erklärung: bei den Listen wird der Punkt als Hintergrund definiert. das left und top steht für die Pixelanzahl, um die der Background, also der Listenpunkt verschoben wird. Ich schreibe meistens 0 5px, also formatiere nur die Position von oben, das müsst ihr selber gucken wie es bei eurer Grafik passt. Bei den Padding und Margin Angaben bedeuten top, right, bottom, left die Reihenfolge, wie es mit den Pixeln geschrieben werden muss. Zum Beispiel: padding: 0 0 0 12px; bedeutet, dass der Text des Listenpunktes 12 px vom linken Rand weggeschoben wird.


<ul class="meinelistenpunkte">
<li>Der tolle Text</li>
</ul>


Erkärung: Naja ich denke man muss dazu nicht viel sagen ;)

Ich hoffe, dass ihr damit klarkommt... So ist es auf jeden Fall besser ;)



1 Kommentare




Chiara

Schön erklärt.. ˆˆ
Danke für das Tut, ich hab lange nach sowas gesucht! ˆˆ
am 10.01.2010 um 19:00 Uhr