HTML Bulletpoint verschoben (HTML/CSS)

[Nicodil]

Hallo,

ich kämpfe schon seit mehreren Tagen mit einem Designdetail. Wie im Bild unten zu sehen ist, hat der 5. Überpunkt den Bulletpoint/Aufzählungspunkt in der Mitte des Aufzählungssatzes und nicht, wie gewünscht, am oberen Anfang des Aufzählungssatzes. Mir wurde auch schon von KI etwa smit Flex-Box vorgeschlagen, alles ohne Erfolg. Hat jemand eine Idee?

CSS

.faq-container {
width: 100%;
max-width: 600px;
margin: 0 auto;
}
.faq-item {
border-bottom: 1px solid #dadce0;
}
.faq-item:hover {
border-bottom: 2px solid #6da5be;
}

.faq-question {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 10px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
font-family: 'Source Sans Pro', 'Arial', sans-serif;
}
.faq-question:hover {
background-color: #f1f3f4;
font-family: 'Source Sans Pro', 'Arial', sans-serif;

}
.faq-answer {
display: none;
padding: 2px 15px 15px;
font-size: 14px;
color: #5f6368;
line-height: 1.6;
}
.arrow {
width: 15px;
height: 15px;
transition: transform 0.3s ease;
}
.rotate {
transform: rotate(180deg);
}

#my-special-list-item {
list-style-type: none;
padding-left: 18px;
margin-left: -40px;
background-image: url('../wp-content/uploads/2024/11/circle.png');
background-repeat: no-repeat;
background-position: left center;
font-size: 14px;
font-family: 'Source Sans Pro', 'Arial', sans-serif;
}

HTML

<div class="faq-item">
<div class="faq-question">
Gesundheitsprävention und Vorsorgeuntersuchungen
<span class="arrow">▼</span>
</div>
<div class="faq-answer">

<ul>
<li id="my-special-list-item">Ganzheitliche, partnerschaftliche Gesundheitsförderung</li>
<li id="my-special-list-item">Check-up 35, ab 35 Jahren (alle 3 Jahre)</li>
<ol>
<li id="my-special-list-item">Anamnese, körperliche Untersuchung</li>
<li id="my-special-list-item">Laboruntersuchung (Blutzucker und Blutfette, Urinuntersuchung)</li>
<li id="my-special-list-item">Überprüfung des Impfstatus</li>
<li id="my-special-list-item">Beratung und Aufklärung</li>
</ol>
<li id="my-special-list-item">Hautkrebs-Früherkennung, ab 35 Jahren (alle 2 Jahre)</li>
<li id="my-special-list-item">Prostatakrebs-Früherkennung, ab 45 Jahren (jährlich)</li>
<li id="my-special-list-item">Darmkrebs-Früherkennung (Beratung und ggf. Stuhluntersuchung (iFOBT), ab 50 Jahren (alle 1-2 Jahre)</li>
<li id="my-special-list-item">Bauchaortenaneurysmen-Früherkennung, Männer ab 65 Jahren (einmalig)</li>
</ul>

</div>
</div>

 

[Fenatics]

background-position: left center;

Hier gibst du doch selbst an, dass es vertikal zentriert sein soll.
Entweder an 2. Stelle top nutzen, oder absolute angeben, zum Beispiel 2px oder halt mit em arbeiten oder was es sonst noch gibt.

 

[Nicodil]

Danke für die schnelle Antwort.

background-position: left top;

background-position: left absolute;
top: 40px;

background-position: 0% 50%;

background-position: 0% 25%;

 

[Fenatics]

Sorry, vielleicht war das mit absolute ein wenig falsch beschrieben, bzw. hat zur Verwirrung geführt.
Damit meinte ich absolute Pixel Zahlen STATT center, also so:
background-position: left 10px;
Und damit einfach mal rumspielen. 20px, 5px, usw.
Damit sollte der Abstand zur oberen Kante immer identisch sein. Und da du immer nur die erste Zeile eines <li> Elements betrachten willst, sollte das eigentlich funktionieren, den Abstand von oben zu nehmen und fest anzugeben.

Ich bin nicht mehr so ganz drin in CSS und HTML, aber ne ID mehrmals zu verwenden, ist glaube nicht so gut, lieber durch ne Klasse ersetzen. Ich meine die hier: <li id="my-special-list-item">
IDs sollten einzigartig sein, wenn ich mich recht erinnere.

 

[Nicodil]

Super, vielen Dank!

background-position:left 5px;

hat funktioniert! Ich hatte vorher

background-position:left 0px;
top: 5px;

Aber das scheint nicht zu funktionieren... Verstehe ich ehrlich gesagt nicht, ist ja eigentlich identisch und der untere Wert sollte den oberen überschreiben. So geht es aber. Vielen Dank!

 

[Fenatics]

Nein, das sind 2 komplett unterschiedliche Werte.
Top, bezieht sich auf das gesamt <li> Element und auch nur, wenn das übergeordnete Element als "absolute" positioniert ist (wenn ich das noch richtig im Kopf habe).
Und background-position:left 5px; bezieht sich wirklich nur auf das Hintergrundbild.

Aber wenn es jetzt klappt, ist doch alles bestens.

 

[VeryFix]

Schau mal hier nach:
https://www.w3schools.com/css/css_list.asp

Sieht dann so aus:

 

[Fenatics]

Stimmt, man kann natürlich das ganze auch im Standard belassen, dann muss man sich mit sowas nicht rumärgern. Es ist sogar möglich die Aufzählungszeichen durch eigene Bilder zu ersetzen:

list-style-image: url("star-solid.gif");

Einfach mal damit rumspielen und gucken wie es aussieht.

Mit CSS ist mittlerweile fast alles möglich und das auf 1.000 verschiedenste Varianten