Antworten auf deine Fragen:
Neues Thema erstellen

Erledigt - CSS Überstreichung ausschalten

draupnir

Moderator

Teammitglied
Hallo zusammen,
ich versuche gerade die Überstreichung in HTML5/CSS3 für einen besonderen Fall abzuschalten. Die Korrekturzeichen, die die class="_red_" haben, sollen nie überstrichen werden. (Hinweis: {6:} ist eine Ligatur, die zu dem Korrekturzeichen wird.)
Safari, Firefox und Edge liefern leider immer das falsche Ergebnis:



Mein Quelltext sieht so aus:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>-DRAFT-</title> <style>._red_{ color: #FF0000; text-decoration: none; }</style> <style>._draft_{ color: #1E90FF; text-decoration: overline;}</style> <style>._draft_ ._red_ { color: #CCC; text-decoration: none;}</style> <style>._draftB_{ color: #999; font-weight: bold;}</style> <style>@font-face { font-family: "TimeSaverG40-eBook"; font-weight: normal; font-style: normal; src: url(fonts/TimeSaverG40-eBook.otf); }</style> <style>._cBody_{font-family: "TimeSaverG40-eBook"; line-height: 1.5rem; font-variant-ligatures: common-ligatures; }</style> <style>._ts_{font-family: "TimeSaverG40-eBook"; font-variant-ligatures: common-ligatures; font-weight: normal;}</style> </head> <body id="body-0" class="_cBody_"> <h4>Das Korrekturzeichen darf keine Überstreichung habe</h4> <p id="p-0">Wort <span class ="_draft_"> <span class ="_draftB_"> <span class="_ts_"> <span class="_red_">{6:}</span> </span>UJ: </span> »ist das richtig?« </span> , die ... </p> <p id="p-1">Wort <span class ="_draft_"> <span class="_ts_"> <span class="_red_">{6:}</span> </span>Richtig? </span> , die ... </p> <p id="p-2">Wort <span class="_red_">{6:}</span> weiter im Text ... </p> </body> </html>

Geht das nicht oder sehe ich den Denkfehler nicht.

Schönen Abend,
– j.
 

draupnir

Moderator

Teammitglied
Im Licht des Sonntagmorgen scheint es so zu sein, dass man keine verschachtelte Eigenschaft in CSS aufheben kann, nur überschreiben. Also _red_ könnte dem Überstrich die Farbe weiß zu weisen, dann wäre es auf weißen Hintergrund nicht mehr zusehen, dies würde jedoch nur den blauen Überstrich von _draft_ überdecken, nicht abschalten.

So mit bleibt mir als Lösung nur, die Verschachtelung der <span> zu verändern. Also _red_ darf nicht in _draft_ liegen:
<p id="p-0">Wort <span class ="_draftbox_"><span class="_ts_"><span class="_red_">{6:}</span></span><span class="_draft_"><span class ="_draftB_">UJ:</span>»ist das richtig?«</span></span> , die ... </p>
Nur so kann ich verhindern, dass _red_ einen Überstrich bekommt. Hurrah! Dann werde ich meine Programmierung halt entsprechend ändern.

Danke für's Lesen, schönen Sonntag,
–j.
 
Moin,
richtig verschachtelt das Ganze?
<h4>Das Korrekturzeichen darf keine Überstreichung habe</h4>
<p id="p-0">Wort
<span class="_red_">{6:}</span>
<span class ="_draft_">»ist das richtig?«</span>
<span class ="_draftB_"> ...die </span>

<span class="_ts_"> font-weight: normal; sollte mit in den style von _red_ </span>

hatte auch gerade fertig :)
 

draupnir

Moderator

Teammitglied
So sieht das Ergebnis aus:
( A ) Ein Markdown-Text mit eigenen Erweiterungen wird per Javascript mit REGEX (regular expressions) zu HTML mit den passenden CSS-Klassen, siehe ( B ) links Text in Edge, rechts HTML-Code.

Sinn der ganzen Übung: eine Basis für bessere E-Books (.epub)
 

Myhar

Hat es drauf

Im Licht des Sonntagmorgen scheint es so zu sein, dass man keine verschachtelte Eigenschaft in CSS aufheben kann, nur überschreiben.
Generell kann man im CSS nie eine Eigenschaft aufhaben, man kann Eigenschaften nur mit anderen Werten überschreiben.
Ein Element hat entweder die vom Browser/Benutzer vorgegebenen Standardwerte oder die überschriebenen Werte vom CSS file.
 

Myhar

Hat es drauf

Stimmt, es gibt unset/revert etc. An die habe ich gar nicht gedacht, die verwende ich einfach zu selten.
unset sagt, dass die vom elternelement vererbten styles übernommen werden sollen, das könnte in dem Fall also funktionieren.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.634
Beiträge
1.538.447
Mitglieder
67.555
Neuestes Mitglied
scheflo
Oben