✔ CSS Listenformatierung

[Pantalaimon]

Hallo Zusammen,

ich wollte eine Liste <ul><li> erstellen, in der die Größe und die Farbe der Bullets angepasst werden kann.
Bei der Farbanpassung habe ich das Problem, dass auch der Text der Aufzählung die Farbe ändert.
Für die Größenänderung des Bullets habe ich leider noch gar keine Idee.

Hat jemand von euch einen Tipp, wie das umgesetzt werden kann?


Danke und Gruß
Pantalaimon

 

[Maik]

Hi,

die Größe des Bullet-Zeichens lässt sich nicht mit CSS beeinflussen / einstellen. Hierfür müsstest du dir eine individuelle Bullet-Grafik erstellen.

Um das Bullet-Zeichen entgegen dem Text einzufärben, verwende folgende CSS-Regeln:

li { 
color:red; 
}

li span { 
color:black; 
}

<ul>
    <li><span>Text</span></li>
</ul>

 

[Pantalaimon]

Vielen Dank für die Hilfe! Hat meine Frage gelöst.

Jetzt hattest du mich allerdings auf die Idee gebracht eine eigene Grafik als bullet zu definieren. Hier stellt sich die nächste Hürde: Die Grafik positioniert sich immer oben am Zeilenrand. Wie kann man diese Grafik so ausrichten, dass diese sich mittig in der Zeile anordnet?


Gruß
Pantalaimon

 

[Maik]

Hi,

in diesem Fall empfehle ich dir, die Grafik als Hintergrundbild für die Listenpunkte zu definieren und mittels der background-position-Eigenschaft wie gewünscht auszurichten:

li {
background-image: url(bullet.jpg);
background-position: left center;
background-repeat: no-repeat;
padding-left: 15px; /* linker Innenabstand, damit der Text nicht über der Grafik liegt */
}

oder in Kurzform:

li {
background: url(bullet.jpg) left center no-repeat;
padding-left: 15px; /* linker Innenabstand, damit der Text nicht über der Grafik liegt */
}