Auflistung UL mit web fonts

Oli89

Hallo zusammen,

ich bin neu hier und habe gleich ein Problem bei welchem ich in der Suche leider nichts finden konnte.

Ich habe auf meiner Webseite https://www.goldhamster-wissen.de/das-hamsterrad/ die Punkte der UL-Listen entfernt und dafür einen Hamster über Webfonts mit ":before{content:" eingebunden.

Dies sieht meistens auch bereits recht gut aus. Mein Problem entsteht allerdings, wenn mehr Text hinter einem Punkt steht und daher eine zweite Zeile benötigt wird. Hierbei beginnt der Text der zweiten Zeile dann nicht mehr am mit dem gleichen Abstand von Links wie in der darüberliegenden Zeile. Aus diesem Grund habe ich dann versucht die Position des Webfonts als absolut zu definieren und Ihn mit der entsprechenden px Anzahl von left auszurichtigen. Hierbei entsteht jedoch dass Problem, dass sich left nicht auf den content-Bereich sondern auf den linken Außenrand meiner linken Sidebar bezieht. Hierdurch hängen die Webfonts am Smartphone dann nichtmehr an der richtigen Possition.

Habt Ihr eine gute Idee wie ich hier weiterkomme?

Über eine Antwort würde ich mich sehr freuen.

Viele Grüße

Oli

synaptic

Gib dem li ein position relative. Dann padding left.

Dem pseudoelement Position absolute. Bissi top dazu und feddich.

Du kannst auch mit text-indent arbeiten, aber ich bevorzuge die zuerst genannte Variante, die is 100% safe

Arne Drews

Es gibt doch auch list-style-image

Dann passt alles, wie beim Standard.

Oli89

Hallo,

vielen Dank für eure Antworten.

@synaptic ich habe es gerade wie von dir beschrieben versucht. Dies sieht bei mir dann so aus:

Code

.Aufzaehlung ul{list-style:none;}.Aufzaehlung ul :before{content:"\e900";font-family:icomoon; position:absolute; left: 10px; color: #856404;}..Aufzaehlung ul {position: relative; padding-left}

Ich muss jedoch leider auch gleich gestehen dass meinen Programmierkünste nicht die besten sind...

Hierbei habe ich jedoch dass Problem dass die Hamster nun wie im folgenden Bilder ersichtlich am linken Rand des Bildes in der Sidebar hängen:

Passe ich die Position nun mit left entsprechend an (z.B. auf 410px) so passen die Hamster wie im nächsten Bild zu sehen:

Wir jedoch der Bildschirm verkleinert (Smartphone etc.) so hängen die Hamster am rechten Rand.:-(

Hast du eine Idee wie ich hier weiterkomme?

Arne Drews soweit ich weis lassen sich über list-style-image nur Bilder, jedoch keine Web-fonts hinterlegen. Liege ich hier falsch?

Über eine Antwort von euch würde ich mich sehr freuen.

Viele Grüße

synaptic

Code

.entry-content li {
    margin-bottom: 5px;
    position: relative;
    padding-left: 22px;
}

und

Code

.Aufzaehlung ul li:before {
    content: "\e900";
    font-family: icomoon;
    position: absolute;
    right: 10px;
    left: 0;
    top:0;
    color: #856404;
}

du musst die icons und das padding auf die LI anwenden, nicht auf die UL

Oli89

@synaptic, vielen Dank für deine Hilfe.

Jetzt sieht es wie gewünscht aus.

Echt super wenn der Profi nen Blick darauf wirft, DANKE DIR

synaptic

Gerne.

Benutzer online in diesem Thema