Listenelement "Haken"

Hallo,

in Ihrem CSS haben Sie ja die Definition li.meineklasse eingefügt. Diese gilt für alle Listenelemente (<li>) mit der Klasse "meineklasse" (.meineklasse), also müssen Sie die Klasse in den einzelnen Listenelementen angeben, wie z.B.: <li class="meineklasse">Ein Listenelement mit Haken!</li>.

In der CSS-Definition muss die URL zum Bild natürlich stimmen, sonst wird das Bild nicht angezeigt werden. Wenn Sie die URL tatsächlich so eingegeben haben, wie hier in Ihrem Code-Beispiel gezeigt, wird das wahrscheinlich nicht funktionieren.
Die korrekte URL zu einem importierten Bild erhalten Sie, wenn Sie die Bildverwaltung öffnen (ALT+2), dann das entspr. Bild anklicken und unter dem Button "Werkzeuge" die Option "Objekt-ID kopieren" wählen. Das fügt die korrekte URL in die Zwischenablage ein und die fügen Sie dann entsprechend im CSS ein, also z.B.: background: url(oid://image/haken) 0 0 no-repeat;

Guten Tag,

wenn ich analog diesem Thread eine eigene Bild-Datei als Aufzählungszeichen erhalten möchte, so funktioniert dies auch bei mir in Zeta 15.3.0 Business. Jedoch erscheint zusätzlich vor dieser Bild-Datei der normale Aufzählungsbutton (rechteckiges Kästchen), siehe Foto.

Was muss man noch eintragen, damit ich nur die Bild-Datei als Aufzählungselement erhalte?

Es soll nicht pauschal bei allen Aufzählungen auf dieser Seite erscheinen, sondern nur bei genau dieser Aufzählung.

<style>
  li.check{
padding-left: 30px;
background: url(yy.png) 0 0 no-repeat
}

<style>

<h2>Test</h4>
<ul>  <li class="check">Aufzählung 1</li>  <li class="check">Aufzählung 2</li>   <li class="check">Aufzählung 3</li>
</ul>

Vielen Dank und viele Grüße

Tobias

Hallo,

da stimmt das CSS eben noch nicht ganz. Der Normale Listenstil ist ja mit dem Kästchen davor. Sie haben dem nur ein Hintergrundbild hinzugefügt, die Kästchen-Darstellung aber nicht deaktiviert. Einfach mal googeln, wie man das macht (so lernt man am meisten). Spoiler.

Hallo Stefan,

besten Dank für den sehr validen Hinweis.

Aber selbst wenn ich die unter der von dir genannten Seite empfohlenen Angaben vornehme, erscheint lediglich das eckige Aufzählungszeichen, unabhängig davon, ob ich einen absoluten, relativen Pfad oder die Zeta-Interne Objekt ID kopiere.

  ul.a {
    list-style-image: url(oid://image/check-xxx);
}

<ul class="a">
  <li>Coffee 
  </li><li>Tea 
  </li><li>Coca Cola </li></ul>

Vielleicht findet sich ein User, der mir weiterhelfen kann.

Grüße

Tobias

Ich wollte ja auch eher auf list-style-type: none; hinweisen

Ja, wäre eine Möglichkeit, aber die "sauberste" ist ja #6.

Wenn ich eine ganz einfache HTML nur mit diesem Inhalt wie unter #6 erstelle, funktioniert es. Es muss sich also irgendwo im Layout "Campfire Responsive - Storyteller" mit anderen Angaben beißen.

Muss ich mal in Ruhe analysieren

Auf jeden Fall vielen Dank für die schnelle Hilfe.

Grüße

Tobias

P.S. Vielleicht noch eine kurze Info warum ich das überhaupt mache: Derzeit habe ich jeweils einfach die Bild-Datei vor dem Aufzählungs-Text eingefügt. Beim Zeilenumbruch fängt der Text dann aber nicht bündig mit dem Text darüber an, sondern direkt zu Beginn der umgebrochenen Zeile. Das ist bei der Aufzählung nicht der Fall. Da ich nicht der Erste bin, der da eine Lösung sucht, könnte man vielleicht in einer der zukünftigen Zeta Versionen eine Option anbieten, statt normalen Aufzählungszeichen auch eigene einzufügen.

Manchmal hilft es hinter die Regel noch ein !important zu setzen, damit diese regeln mit höherer Priorität ggf. überschreibt.