Problem mit Hintergrund-Farbe von Textstellen

    Ich möchte bestimmte Textstellen mit gelber Farbe markieren. Dazu habe ich:

    · Im Customize

    · Unter Additional CSS

    · Den Befehl

    y {
    background-color: yellow

    }

    Eingegeben.

    · Wenn ich jetzt schreibe <y>Textstelle</y> , dann hat Textstelle nach dem Save einen gelben Hintergrund

    · Wenn ich die Seite erneut aufrufe, sind alle Markierungen gelöscht.

    · Woran liegt das??

    Hier der Link zur Website: https://joachim-polster.de/concert-of-the…ecember-3-2022/

    • Gerade eben
    • Anzeige

    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

    "y" ist kein gültiges HTML-Element. Wordpress schmeißt so etwas bei der Ausgabe im Frontend zum Schutz deiner Besucher raus, denn mit so etwas kann man auch für Fehldarstellungen und Fehlermeldungen in Browsern sorgen.

    Um das sauber zu lösen würde ich folgendes empfehlen:
    Umgib die Textstellen mit einem span-Element und einer Klasse an diesem. Beispiel:

    Code
    <span class="mark">Textstelle</span>

    Im CSS schreibst Du dann:

    Code
    span.mark { background-color: yellow }
    Zitat von opowoj

    Ich danke ganz herzlich für die Lösung. Es ist heile Welt...

    Ich beneide Dich, denn Du hast verstanden. Ich nicht (DAU).

    Wo füge ich diesen Code ein:

    Code
    span.mark { background-color: yellow }


    Vielleicht in das Zusätzliche CSS? Hab ich so:

    Wo füge ich das ein?

    Code
    <span class="mark">Textstelle</span>


    In den laufenden Text?

    Ich möchte das z.NB. hier einfügen an dieser Textstelle:

    Zitat

    1989 wurde mein Reiseführer „Thailand preiswert reisen“ veröffentlicht.

    Müßte demnach so aussehen: <span class="mark">„Thailand preiswert reisen“</span>

    Bin so zu einer Lösung gekommen:

    In das Zusätzliche CSS eingetragen

    Code
    span { background: black; }

    In die Textstelle eingetragen:

    Code
    <span>„Thailand preiswert reisen“</span>

    Hat jetzt aber den Nachteil, dass mein Inhaltsverzeichnis ebenfalls markiert ist.

    Zitat von Kurt Singer


    Hat jetzt aber den Nachteil, dass mein Inhaltsverzeichnis ebenfalls markiert ist.

    Hab ich händisch korrigiert, "span" einfach weggelassen. Andersfarbige Hintergründe füge ich dafür mit span2, span3 usw ein.

    Vielleicht hilft das auch dem Threadstarter.

    Zitat von Kurt Singer

    Vielleicht hilft das auch dem Threadstarter.


    Nee, der sollte sich lieber an die Anweisung von threadi halten. ;)

    Zur Erläuterung: <span> ist ein fest definiertes html tag.
    mark hingegen ein frei gewählter class Name, den man auch durch text-gelb-hinterlegt ersetzen könnte, was für einen Amateur auch durchaus sinnvoll ist, weil man so später leichter durchsteigt, welche class wofür gedacht war bzw. was sie macht.

    Nun scheint es mit <span3> doch den gewünschten Textteil farblich (grey) zu hinterlegen ... ;)

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

    Ja, aber nicht mit dem ,wie geraten, Code von threadi aus #2 :).
    Also ist mir der Begriff <span class="mark">Textstelle</span>immer noch kein Begriff. Aber so wie ichs mache klappts ja auch.

    Versuch ....
    Du öffnest o.a. Beitrag, je nach Editor wechselst du in den Code-Editor (im Blockeditor) oder in die Text Ansicht beim Classic-Editor.
    Die Textstelle „Thailand preiswert reisen“ ergänzt du vorne mit [COLOR=#0000ff]<span class="mark">[/COLOR] und hinten mit [COLOR=#0000ff]</span>[/COLOR] den Tag schliessen.
    Danach öffnest du im Customizer die Zusätzlichen CSS und fügst eine neue CSS-Regel [COLOR=#0000ff]span.mark { background-color: yellow } [/COLOR]ein. Das sollte sofort Wirkung zeigen.
    Wenn du verschieden Farben willst kannst du z.B. eine class mark_yellow taufen und eine weitere mark_red. In den Zusätzlichen CSS sind dann 2 CSS Regeln zu erstellen

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

    Ja, so habeich es gemacht, nur die Reihenfolge war andes, also erste Zus. CSS, dann Textstelle.

    span.mark { background-colour: yellow; }

    Text <span class="mark=">Ich habe dafür 2 Jahre lang </span>Text

    Aber egal, das andere funktioniert ja.

    ..... das ist aber egal, sollte genau so funktionieren ...!

    Einen Fehler in deinen CSS habe ich aber gefunden:

    Code
    span3 {
 background:grey
}
span2 {
 background:yellow
}
span.mark {
 background-colour:yellow
}

    background-[COLOR=#ff0000]colour[/COLOR]:

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

    Zitat von SEpp55

    ...
    Einen Fehler in deinen CSS habe ich aber gefunden:
    background-[COLOR=#ff0000]colour[/COLOR]:

    Igitt....gibt es doch wirklich zwei Schreibweisen für "Farbe"???!!!!! Nimmt man die richtige, ists falsch :eek:

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden