CSS: Ich verstehe die Logik nicht

frankj

Hallo in die Runde,

nein, ich bin kein CSS-Experte, mache aber trotzdem die eine oder andere Anpassung damit.

Nun stosse ich an meine Grenzen:

Die Standard-Listen (unordered lists) werden in meinem Theme ganz vernüftig und zu meinem Gefallen dargestellt. Nun möchte ich aber eine solche Liste in einen „aufklappbaren Bereich“ einbauen. Für die Aufklapp-Funktionalität habe ich drei Plugins ausprobiert. Keines kann mit den so erstellten Listen umgehen:

In allen drei Varianten der Aufklapp-Bereiche werden nach meiner Lesart die Standardeinstellungen für unordered lists überschrieben.

Mein Wissen reicht nicht aus, um dieses Problem zu lösen. Kann mir bitte jemand auf die Sprünge helfen? Auf der verlinkten Seite habe ich das Problem mit unordered lists (funktioniert nicht) den funktionierenden ordered lists gegenüber gestellt.

Vielen Dank für mögliche Hilfe von Frank

Die Seite, für die ich Hilfe brauche: https://wettbretter.de/arbeiten-mit-der-karte/

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

b3317133

Zitat von frankj

Auf der verlinkten Seite habe ich das Problem mit unordered lists (funktioniert nicht) den funktionierenden ordered lists gegenüber gestellt.

Was genau funktioniert nicht und was funktioniert? Sehe hier keinen Unterschied.

Generell: Wenn man etwas aufklappen will, muss man das irgendwie definieren, manchmal mit Unterpunkten/Unterlisten, manchmal mit anderen HTML-Elementen. Und diese müssen irgendwie klickbar und als solche erkennbar sein, daher sehen sie in der Regel anders aus als Deine normalen Listen.

SEpp55

Zitat von frankj

Für die Aufklapp-Funktionalität habe ich drei Plugins ausprobiert. Keines kann mit den so erstellten Listen umgehen

Ich habe mal in einer meiner Testinstallationen mit dem Plugin [ ]Shortcodes Ultimate einen Versuch gestartet ;-)
Im ersten Moment nicht das, was erhofft war, aber mit ein wenig Handarbeit, sieht es dann doch brauchbar aus.

hier noch der Code falls Interesse daran besteht ...

Code

[su_spoiler title="Spoiler-TEST (mit Unordered List)" class="my_spoiler"]Standardliste -ul- NOT Out-of-the-Box:
<ul>
<li>einen Überblick über bisher bekannte Wettbrettfunde,</li>
<li>erste Informationen zu einzelnen Funden</li>
<li>Orte ohne Wettbrettfunde und</li>
<li>„weisse Flecken“, also bisher nicht untersuchte Gegenden.</li>
</ul>[/su_spoiler]
[su_spoiler title="Spoiler-TEST (mit Ordered List)" class="my_spoiler"]Standardliste -ol- NOT Out-of-the-Box:
<ol>
<li>einen Überblick über bisher bekannte Wettbrettfunde,</li>
<li>erste Informationen zu einzelnen Funden</li>
<li>Orte ohne Wettbrettfunde und</li>
<li>„weisse Flecken“, also bisher nicht untersuchte Gegenden.</li>
</ol>
[/su_spoiler]

Alles anzeigen

Falls man immer nur eine der Optionen geöffnet haben will, kann man das noch in ein Accordion verpacken!
[su_accordion] [/su_accordion]

frankj

Zitat von b3317133

Was genau funktioniert nicht und was funktioniert? Sehe hier keinen Unterschied.
…

Ah, danke für den Hinweis, ich habe das Problem vielleicht nicht genau genug beschrieben.

Meine Standard-Unordered-List hat Bullets vorneweg. Diese Bullets verschwinden in den aufgeklappten Bereichen.

-Frank

frankj

Danke für den Test, SEpp55. Ich habe das von Dir benutzte Plugin installiert, Deinen Code eingesetzt — und das selbe Problem: Die Bullets in der unordered list werden nicht angezeigt.

Untersuche ich die Elemente in Firefox, dann gehen auch hier Formatierungen verloren. Und ich verstehe nach wie vor nicht, wir ich das in den Griff bekommen kann.

-Frank

b3317133

Zitat von frankj

.. Standard-Unordered-List hat Bullets vorneweg. Diese Bullets verschwinden in den aufgeklappten Bereichen.

Die Bullets verschwinden nicht, sondern sie werden von Deinem Theme explizit nur auf dem Top-Level innerhalb von [FONT=Courier New].entry-content[/FONT] gezeigt.

Ein Workaround wäre z.B. Code wie dieser basierend auf Deinem bestehenden Theme CSS und bestehenden inline CSS, der die Bullets auch innerhalb eines [FONT=Courier New]div[/FONT] im Top-Level von [FONT=Courier New].entry-content[/FONT] zeigt:

Code

.entry-content > div > ul, .entry-content > div > ul ul {
    list-style-type: none;
    margin-bottom: 20px;
}
.entry-content > div > ul li {
    padding: 0px 0px 10px 30px;
    position: relative;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.entry-content > div > ul li {
    padding: 0px 0px 5px 50px;
}


.entry-content > div > ul li::before {
    content: "";
    width: 20px;
    height: 20px;
    background: url('https://wettbretter.de/wp-content/themes/directory2/design/img/lists.png') -60px 0px no-repeat #1d70a3;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}
.entry-content > div > ul li::before {
    top: 4px;
    left: 20px;
}

Alles anzeigen

Am Rande: Für BBSpoiler müsste noch ein weiterer div Level mit rein...

Mit WordPress an sich hat das alles nichts zu tun.

SEpp55

Wenn du dir in meinem Beispiel den ersten Block ansiehst, war das nur mit dem Shortcode Plugin genau so!
Wie habe ich das gelöst?
Zuvor - ich habe das mit dem Classic-Editor gemacht! Werde das aber auch mit dem Gutenberg noch versuchen ....
Plugin ist aktiviert. Erstelle einen Testbeitrag. Versuche einfach meinen Code, wie er ist in den Editor im Text-Modus einzugeben, speichern - Vorschau!
Habe ich soeben nochmal gemacht und - passt!!

SEpp55

Ein Fehler ist auch drinnen - ich habe der vierten Zeile auch einen eigenen <li> </li> Tag gegeben, das kann man reparieren ;)

frankj

Danke für eure Hinweise und eure Geduld! Ich kann nicht behaupten, dass ich euch zu 100 % folgen kann.

So annähernd begreife ich aber, wo der Fehler liegt. Mein angepasstes CSS wird von den Accordion-Plugins schlicht ignoriert, weil es nicht die Klasse .entry-content benutzt:

Code

.entry-content > ul li::before {
    content: "";
    width: 20px;
    height: 20px;
    background: url('https://wettbretter.de/wp-content/themes/directory2/design/img/lists.png') -60px 0px no-repeat #1d70a3;
    top: 4px;
    left: 20px;
}

Schlingel, diese Plugins! :-)

Mir ist nicht klar, wie ich diese Regel auch für eines der Accordion-Plugins verbindlich mache. Diese Vererbung sehe ich im Firebug:

Code

ol, ul {
    list-style: none;
}

Ist es ein falscher Ansatz, wenn ich frage: Welcher Klasse muss ich das von mir gewünschte CSS zuweisen, um das gewünschte Ergebnis zu bekommen?

-Frank

b3317133

Die Klasse entry-content sollte nirgends anders genutzt werden.

Verwende den in #6 geposteten Code, z.B. am Ende von Design > Customizer > Zusätzliches CSS, der passt so für Deine ersten beiden Aufklapptests auf der Testseite.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

CSS: Ich verstehe die Logik nicht

Jetzt mitmachen!