CSS-Problem

[Timo]

Servus,

ich arbeite mit Wordpress und habe in den CSS-Einstellungen des Themes eine Klasse für alle Buttons erstellt. Hier u.a. "font-weight=400px !important;" Funktioniert auch wunderbar. Jetzt möchte ich auf einer Seite wieder diesen Button verwenden, möchte aber nicht, dass er direkt wieder zu der Klasse zugeordnet wird, da er anders designt sein soll. Bei dem neuen Button möchte ich nämlich "font-weight=bold" einstellen, geht aber nicht, da ich es ja in der für alle Wordpress-Seiten gültigen Datei festgelegt habe. Wie kann ich diesen einen Button von der übergeordneten Klasse lösen?

Danke!

[m.]

Mahlzeit,

Wie kann ich diesen einen Button von der übergeordneten Klasse lösen?

Ist gar nicht nötig. Durch Selektoren kannst du den Button komplett anders gestalten bzw. das bisherige Styling überschreiben. Wie der entsprechende Selektor aussehen muss hängt von deiner Seite un dem Button-Element ab.

[Timo]

Hast du ein Beispiel für mich?

[m.]

Mahlzeit,

Hast du ein Beispiel für mich?

Ohne das Element und/oder den Quellcode der Seite zu kennen, keines das dich weiter bringt.

[marctrix]

Hej Timo,

Hast du ein Beispiel für mich?

Unter anderem hier im Wiki gibt es für selektoren und Kombinationen von selektoren zahlreiche Beispiele. Auch mal nach Selektor 😉

Marc

[beatovich]

hallo

Servus,

ich arbeite mit Wordpress und habe in den CSS-Einstellungen des Themes eine Klasse für alle Buttons erstellt. Hier u.a. "font-weight=400px !important;" Funktioniert auch wunderbar.

Das ist sehr schlecht. !important Regeln sollten der letzte Ausweg sein. Sie eigenen sich auch für debugging CSS (falsches HTML markieren), nicht aber für normales HTML.

Wenn du alle buttons beschreibst

button { ... }

So kannst du für abweichende buttons CSS-Klassen definieren

button.highlighted { font-weight:bold }

oder ganz bestimmte Buttons rausfischen wie

/* submit buttons */

button[type="submit"] { ... }

oder sie entsprechend dem umgebenden HTML beschreiben

/* der letzte Button jedes Formulars */

form button:last-of-type {...}

[Timo]

Danke dafür. Jetzt habe ich folgendes:

.easyclient_button.highlighted{
    font-family: arial !Important;
    font-size: 20px;
    font-weight: bold;
    width: 300px !Important;
    margin-left:3%;
    margin-right:3%;
    border-radius:0px;
    text-transform: capitalize !important;
    height:50px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(246, 246, 255) rgb(166, 166, 175) rgb(166, 166, 175) rgb(246, 246, 255);
    display: table;
}

Aber die Befehle werden nun gar nicht mehr umgesetzt...

[beatovich]

hallo

Danke dafür. Jetzt habe ich folgendes:

.easyclient_button.highlighted{
    font-family: arial !Important;
    font-size: 20px;
    font-weight: bold;
    width: 300px !Important;
    margin-left:3%;
    margin-right:3%;
    border-radius:0px;
    text-transform: capitalize !important;
    height:50px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(246, 246, 255) rgb(166, 166, 175) rgb(166, 166, 175) rgb(246, 246, 255);
    display: table;
}

Aber die Befehle werden nun gar nicht mehr umgesetzt...

Du hast wohl andere Regeln im CSS, die höhere Spezifität haben (deren Selektoren haben höheres Gewicht), oder sie beinhalten !important Regeln die schwer zu überschreiben sind.

zur Spezifität https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Kaskade

Es kann helfen, die Browser Tools zu konsultieren und sehen, welche Regeln angewendet werden.

[Gunnar Bittersmann]

@@Timo

Bitte formatiere Code im Posting so, dass er lesbar ist: mit dem </>-Button über dem Eingabefeld oder selbst das Markdown eingeben wie in Formatierung der Beiträge beschrieben.

Aber die Befehle werden nun gar nicht mehr umgesetzt...

Ob der Selektor .easyclient_button.highlighted auf irgendwas passt, kann dir ohne Kenntnis des HTMLs niemand sagen.

„CSS kennt im Übrigen keine Befehle, bestenfalls Empfehle, ehm. ;-)“ —Orlando

LLAP 🖖

[Regina Schaukrug]

Ob der Selektor .easyclient_button.highlighted auf irgendwas passt, kann dir ohne Kenntnis des HTMLs niemand sagen.

Ist denn der Punkt im Bezeichner einer Klasse überhaupt zulässig? In -?[_a-zA-Z]+[_a-zA-Z0-9-]* kann ich ihn nicht finden.

Oder soll es ein "chained class selector" sein? Also Elemente addressieren, die sowohl Mitglieder der Klasse easyclient_button also auch highlighted sind?

[Matthias Apsel]

Hallo Regina Schaukrug,

Ob der Selektor .easyclient_button.highlighted auf irgendwas passt, kann dir ohne Kenntnis des HTMLs niemand sagen.

Ist denn der Punkt im Bezeichner einer Klasse überhaupt zulässig? In -?[_a-zA-Z]+[_a-zA-Z0-9-]* kann ich ihn nicht finden.

Oder soll es ein "chained class selector" sein? Also Elemente addressieren, die sowohl Mitglieder der Klasse easyclient_button also auch highlighted sind?

Letzeres tut er.

Bis demnächst
Matthias

[Regina Schaukrug]

Ob der Selektor .easyclient_button.highlighted auf irgendwas passt, kann dir ohne Kenntnis des HTMLs niemand sagen.

Ist denn der Punkt im Bezeichner einer Klasse überhaupt zulässig? In -?[_a-zA-Z]+[_a-zA-Z0-9-]* kann ich ihn nicht finden.

Oder soll es ein "chained class selector" sein? Also Elemente addressieren, die sowohl Mitglieder der Klasse easyclient_button also auch highlighted sind?

Letzeres tut er.

Ok, dann hoffen wir mal, dass im HTML etwas wie <button class="easyclient_button highlighted"> steht und richten das besondere Augenmerk auf Punkte, Unterstriche und Leerzeichen. Wissen können wir es ja nicht.

[Gunnar Bittersmann]

@@Timo

font-family: arial !Important;

Ich habe etliche ansehnliche Schriften auf meinem System. Warum soll der Button in der unansehnlichen Arial angezeigt werden?

text-transform: capitalize !important;

Das kann nicht gehen. capitalize ist kein gültiger Wert. Was du willst, ist text-transform: uppercase.

display: table;

Wozu das denn?

LLAP 🖖

[beatovich]

hallo

text-transform: capitalize !important;

Das kann nicht gehen. capitalize ist kein gültiger Wert. Was du willst, ist text-transform: uppercase.

Der Wert wäre gültig aber die Eigenschaft ist falsch geschrieben.

[Gunnar Bittersmann]

@@beatovich

text-transform: capitalize !important;

Der Wert wäre gültig aber die Eigenschaft ist falsch geschrieben.

??

LLAP 🖖

[beatovich]

hallo

@@beatovich

text-transform: capitalize !important;

Der Wert wäre gültig aber die Eigenschaft ist falsch geschrieben.

??

Ich meinte dein Zitat:

font-family: arial !Important;

[Gunnar Bittersmann]

@@beatovich

text-transform: capitalize !important;

Der Wert wäre gültig aber die Eigenschaft ist falsch geschrieben.

??

Ich meinte dein Zitat:

font-family: arial !Important;

Die Fragezeichen bleiben. Ich verstehe immer noch nicht, worauf du hinauswillst.

LLAP 🖖

[MudGuard]

Hi,

text-transform: capitalize !important;

Das kann nicht gehen. capitalize ist kein gültiger Wert.

Sicher?

W3 und Mozilla sagen was anderes. (und sogar die w3schools - auch wenn ich die nicht unbedingt als Referenz betrachte).

Was du willst, ist text-transform: uppercase.

Wenn er capitalize (Wortanfangsbuchstaben groß) will, will er nicht uppercase (alle Buchstaben groß)

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@MudGuard

capitalize ist kein gültiger Wert.

Sicher?

Nö! I stand corrected.

Wenn er capitalize (Wortanfangsbuchstaben groß) will

Da steckt der Fehler. Das macht für einen Button keinen Sinn.

Womöglich will er button::first-letter { text-transform: uppercase } (oder von mir aus capitalize).

LLAP 🖖

[Gunnar Bittersmann]

@@beatovich

!important Regeln sollten der letzte Ausweg sein.

Das ist schlicht Unsinn.

!important-Regeln sollten bedacht werden und bewusst eingesetzt werden. Und dann von Anfang an.

!important-Regeln sollten nicht der letzte Ausweg sein. Wie Harry Roberts sagt: “Never use !important in anger!”

Sie eigenen sich auch für debugging CSS (falsches HTML markieren), nicht aber für normales HTML.

?? Wie bitte?

/* submit buttons */

button[type="submit"] { ... }

Das stimmt so nicht. Submit-Buttons wären button:not([type]), button[type="submit"].

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

−1. Da ist wohl jemand mausgerutscht‽

Ansonsten würde mich interessieren, was das soll.

!important-Regeln sollten bedacht werden und bewusst eingesetzt werden. Und dann von Anfang an.

Beispiel:

[hidden] { display: none !important }

kann bspw. ganz bewusst eingesetzt werden, damit <ul class="gallery" hidden=""> auch dann nicht angezeigt wird, wenn .gallery { display: grid } im Autorenstylesheet steht und das [hidden] { display: none } aus dem Browserstylesheet überschreibt. Man möchte an der Stelle keinen Spezifitätskrieg mit Selektoren führen; !important ist hier das Mittel der Wahl.

Auch die empfohlene Methode für visually-hidden setzt !important bewusst ein.

Das hat rein gar nichts mit „letztem Ausweg“ zu tun.

LLAP 🖖

[JürgenB]

Hallo Gunnar,

−1. Da ist wohl jemand mausgerutscht‽

hast du mal einen Blick auf deinen Punktestand geworfen? Ich glaube, Christian hat da nur 16 Bit für den Zähler vorgesehen und jetzt Sorge, das du die 32767 schaffst, bevor er mit der Version 5 fertig ist. 😎

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

Ich glaube, Christian hat da nur 16 Bit für den Zähler vorgesehen und jetzt Sorge, das du die 32767 schaffst, bevor er mit der Version 5 fertig ist. 😎

ROTFL. So hatte ich das noch gar nicht gesehen.

LLAP 🖖

[Christian Kruse]

Hallo JürgenB,

−1. Da ist wohl jemand mausgerutscht‽

hast du mal einen Blick auf deinen Punktestand geworfen? Ich glaube, Christian hat da nur 16 Bit für den Zähler vorgesehen und jetzt Sorge, das du die 32767 schaffst, bevor er mit der Version 5 fertig ist. 😎

Tehe. Du liegst nur um eine Potenz daneben. Aber gut, dass du mich darauf aufmerksam machst.

LG,
CK

[Gunnar Bittersmann]

@@Christian Kruse

Tehe. Du liegst nur um eine Potenz daneben.

Es sei denn, der Zähler ist ein signed integer. Dann springt er von 32767 auf −32768 und man hätte mehr Minuspunkte als Wir-wollen-hier-keinen-Namen-nennen.

Aber man wird ja genullt und fängt wieder von vorne an. Hey, es gibt wieder Medaillen!

LLAP 🖖

[Christian Kruse]

Hallo Gunnar,

Tehe. Du liegst nur um eine Potenz daneben.

Es sei denn, der Zähler ist ein signed integer. Dann springt er von 32767 auf −32768 und man hätte mehr Minuspunkte als Wir-wollen-hier-keinen-Namen-nennen.

Genau genommen ist der Wertebereich von PostgreSQLs 4-Byte-Integern -2147483648 bis [phone]. Du hast also noch Luft nach oben 😉

LG,
CK

[JürgenB]

Hallo Christian,

wenn ich im Computerpraktikum über Zahlendatstellungen rede, bringe ich als Beispiel die Zeit, bei der die Sekunden seit dem 1.1.1970 ab 2038 nicht mehr in ein I32 passen.

Gruß
Jürgen

[Gunnar Bittersmann]

@@Gunnar Bittersmann

[hidden] { display: none !important }

[…] !important ist hier das Mittel der Wahl.

Aber wehe, es kommt jQuery ins Spiel – wozu es aber glücklicherweise keinen Grund mehr gibt.

Die Methoden show() und toggle() haben einen ziemlich üblen Bug, der dazu führt, dass das Element nicht sichtbar wird. Und die jQuery-Entwickler machen keine Anstalten, diesen Bug zu fixen. 😡

LLAP 🖖

[m.]

Mahlzeit,

Das ist sehr schlecht. !important Regeln sollten der letzte Ausweg sein. Sie eigenen sich auch für debugging CSS (falsches HTML markieren), nicht aber für normales HTML.

Da steht deutlich "Wordpress". Da ist das !important mit Sicherheit das geringste Problem.

[Rolf B]

Hallo Timo,

(Edit: CSS-Typo gefixt)

font-weight:400px;

das funktioniert übrigens nicht. Das fällt nur nicht auf, weil 400 ein font-weight im mittleren Bereich ist und deshalb die Darstellung wie von Dir gewünscht aussehen dürfte.

Korrekt ist, dass font-weight eine Zahl als Wert bekommt, ohne Einheit.

font-weight:400;

Was ebenfalls ungünstig ist, ist die Angabe von Font- oder Buttongrößen in Pixeln. Wenn der Anwender zoomt, oder eine spezifische Textvergrößerung eingestellt hat (was viele Gründe haben kann), dann folgt deine Angabe dieser Skalierung nicht.

Fontgrößen solltest Du auf die Default-Fontgröße des Dokuments beziehen, also in rem angeben.

Buttongrößen solltest Du auf den im Button verwendeten Font beziehen, also in em angeben.

Wenn du grundsätzlich alle Buttons stylen willst, dann wirst Du vermutlich nicht darum herum kommen, etwas wie

button {
   foo:bar;
}

zu schreiben und versetzt Dich damit in der CSS Spezifischitätsnahrungskette weit nach unten. Aus Sicht der Herkunfts-Priorisierung bist Du mit dem Wortpress-Theme auf einer Ebene, so dass andere Spezifitäts-Fische Vorrang bekommen.

Du KANNST das mit der !important-Bombe lösen (hast Du den Specifishity-Cartoon angeschaut?). Aber muss das immer sein? Die Folge erlebst Du prompt: ein Nuke reicht nicht mehr, nun fehlt die H-Bombe. Es geht auch sanfter.

Die Frage ist: Wie sind Buttons im Theme gestyled? Vermutlich über Klassen, und das bedeutet: Wenn Du spezifischere Selektoren formulieren kannst als das Theme, dann bekommst Du Vorrang.

/* angenommenes Button-Styling im Theme - Spezifität 0-1-1 */
button.themeBtn {
   bla:fasel;
}

/* deine Angabe - Spezifität 0-1-2 */
body button.themeBtn {
   bla:fasel;
}

Das würde schon reichen und du brauchst keinen !important Nuke mehr. Mit !important versetzt Du deine Angaben auf eine andere Herkunftsstufe, die an der Spezifität vorbei geht. Beats Link zur Kaskade erklärt das.

Wenn es nun eine SPEZIELLEN Button gibt, dann hat der sicherlich ein Merkmal, mit dem Du ihn finden kannst. Zum Beispiel eine eigene Klasse. Oder ein Elternelement mit einer bestimmten ID oder Klasse. Das nutzt Du, und bekommst wieder eine höhere Spezifität:

/* deine Spezialbutton, ein Kind eines Elements mit Klasse oink - Spezifität 0-2-2 */
body .oink button.theme_but {
   bla:fasel;
}

Ganz ohne !important würde diese Regel über dein Button-Styling Vorrang bekommen.

Damit Du das korrekt umsetzen musst, brauchst Du natürlich einen Überblick über alle Einflüsse, die das Theme auf die Buttons ausübt. Dafür musst Du in die Entwicklerwerkzeuge des Browsers einsteigen und in der DOM-Ansicht („Elemente“) analysieren, was so alles passiert.

Natürlich kannst Du dieses Spiel auch mit !important Eigenschaften spielen. Sind zwei Eigenschaften mit !important zugewiesen, gewinnt die mit der höheren Spezifität. Wenn Du zu oft Lemmings gespielt hast und lieber den Nuke-Knopf drückst...

Rolf

[Gunnar Bittersmann]

@@Rolf B

Korrekt ist, dass font-weight eine Zahl als Wert bekommt, ohne Einheit.

font-weight=400;

Nu mach mal’n Punkt! Oder zwei!

Mit der grünen Farbe wolltest du uns weismachen, dass das korrekt wäre? Ich hab’s mal angemessen eingefärbt. 😏

Was ebenfalls ungünstig ist, ist die Angabe von Font- oder Buttongrößen in Pixeln.

So weit richtig.

Wenn der Anwender zoomt […] , dann folgt deine Angabe dieser Skalierung nicht.

In welchem Browser wäre das der Fall?

In meinem(!) Browser (Firefox) werden 1rem und 16px gleich groß dargestellt. Daran ändert sich auch beim Zoomen (⌘+ / ⌘−) nichts.

oder eine spezifische Textvergrößerung eingestellt hat

Setze ich in den Einstellungen die Standardschriftgröße auf 18, dann wirkt das auf 1rem (ist jetzt größer als bei Einstellung 16), aber nicht auf 16px (verändert sich nicht).

LLAP 🖖

[marctrix]

Hej Gunnar,

Wenn der Anwender zoomt […] , dann folgt deine Angabe dieser Skalierung nicht.

In welchem Browser wäre das der Fall?

In meinem(!) Browser (Firefox) werden 1rem und 16px gleich groß dargestellt. Daran ändert sich auch beim Zoomen (⌘+ / ⌘−) nichts.

In meinem Firefox nicht, weil ich Texte skaliere, nicht die ganze Seite. Wobei das immer weniger problematisch ist dank RWD.

Darüberhinaus können (sehr, sehr alte?) IEs Texte ohne die ganze Seite zoomen.

Nur der Vollständigkeit halber als Antwort auf eine vermutlich rhetorische Frage?!?

Marc

[beatovich]

hallo

Fontgrößen solltest Du auf die Default-Fontgröße des Dokuments beziehen, also in rem angeben.

Das mache ich nur für Sektionen, die das generelle Layout kontrollieren. Ansonsten greife ich durchaus auf em zurück.

Wo dabei der genaue Splittpunkt ist, muss jeder selber entscheiden.

[Gunnar Bittersmann]

@@beatovich

Fontgrößen solltest Du auf die Default-Fontgröße des Dokuments beziehen, also in rem angeben.

Das mache ich nur für Sektionen, die das generelle Layout kontrollieren. Ansonsten greife ich durchaus auf em zurück.

Wo dabei der genaue Splittpunkt ist, muss jeder selber entscheiden.

Ich würde die Entscheidung zwischen rem und em nicht an „außen“ (html, body, …) bzw. „innen“ (span, a, p, …) festmachen, sondern am jeweiligen Anwendungsfall.

Beispiel: eine Box mit Rahmen, die es in normaler und hervorgehobener Ausführung gibt:

.message { border: medium solid }

.message.important { font-size: 1.62em }

Wie wäre der Innenabstand zwischen Rahmen und Text anzugeben?

Man könnte denken, der sollte sich an der Schriftgröße in der Box orientieren, d.h. bei größerer Schrift auch größerer Abstand:

.message { padding: 1em }

Man könnte aber auch wollen, dass bei zwei übereinanderstehenden Boxen – eine mit normaler, eine mit größerer Schrift – die Schrift links und rechts an der gleichen vertikalen Linie ausgerichtet ist, d.h. bei allen Boxen gleicher Innenabstand:

.message { padding: 1rem }

Denkbar ist natürlich auch der unterschiedliche Bezug in vertikaler und horizontaler Richtung (oben/unten em; rechts/links rem):

.message { padding: 1em 1rem }

Oder – da bei Flattersatz rechts sowieso keine vertikale Linie erkennbar ist:

.message { padding: 1em 1em 1em 1rem }

LLAP 🖖

[beatovich]

hallo

gott sei dank gibts noch anderes ausser em und rem ;)

[Regina Schaukrug]

gott sei dank gibts noch anderes ausser em und rem 😉

Naja. Flexibel gehandhabt werden auch andere Maßangaben. So herrschen durchaus unterschiedliche Vorstellungen darüber, was wohl 20cm sind. Dem Vernehmen nach geht das wohl so von 110mm bis 150mm. 😉

[beatovich]

hallo

gott sei dank gibts noch anderes ausser em und rem 😉

Naja. Flexibel gehandhabt werden auch andere Maßangaben. So herrschen durchaus unterschiedliche Vorstellungen darüber, was wohl 20cm sind. Dem Vernehmen nach geht das wohl so von 110mm bis 150mm. 😉

Ein Zoom von 100% vorausgesetzt bin ich da aber entschuldigt, wenn meine mit min-height, min-width versorgten Buttoons von 12 mm immer noch zu klein sein.

[Tabellenkalk]

Hallo,

So herrschen durchaus unterschiedliche Vorstellungen darüber, was wohl 20cm sind. Dem Vernehmen nach geht das wohl so von 110mm bis 150mm. 😉

Du darfst halt beim Umrechnen von Yards in Meter die Mehrwertsteuer nicht vergessen!

Gruß
Kalk

[m.]

Mahlzeit,

font-weight=400;

Aua …

Was ebenfalls ungünstig ist, ist die Angabe von Font- oder Buttongrößen in Pixeln. Wenn der Anwender zoomt, oder eine spezifische Textvergrößerung eingestellt hat (was viele Gründe haben kann), dann folgt deine Angabe dieser Skalierung nicht.

Ja, im Mittelalter haben sich Browser so verhalten.

[marctrix]

Hej m.,

Was ebenfalls ungünstig ist, ist die Angabe von Font- oder Buttongrößen in Pixeln. Wenn der Anwender zoomt, oder eine spezifische Textvergrößerung eingestellt hat (was viele Gründe haben kann), dann folgt deine Angabe dieser Skalierung nicht.

Ja, im Mittelalter haben sich Browser so verhalten.

FF auf nutzerwunsch bis heute.

Marc