Globales css kommt nicht an passender Stelle an

[JensDD]

a:link:first-letter, a:active:first-letter, 
a:hover:first-letter,  a:visited:first-letter
{
  font-size: 700%;
}

a:link, a:visited, a:hover, a:active {
  text-decoration: none;
}

p
{ 
	font-family: Poppins !important; 
}

Moin. Bastle mit einem Tool ne Seite zusammen. Während mit "p" und "a:link, a:visited, a:hover, a:active" der angesagt Style greift, wo er soll, nämlich global auf der ganzen Seite, stimmt zwar scheinbar die Grammatik der "a:link:first-letter, a:active:first-letter, a:hover:first-letter, a:visited:first-letter" Anweisung, es werden aber nicht die ersten Buchstaben aller Links vergrößerst auf der Seite, sondern die ersten Buchstaben von halbgrau eingeblendeten Navigationslink für irgendeine toll-interne WP Navigation. Was muß ich tun, daß mein Anliegen entsprechend umgestzt erscheint bzw warum geht es nun grade mit den first-letters nicht, was mit den a.xyz jeweils astrein lief?

[Gunnar Bittersmann]

@@JensDD

a:link, a:visited, a:hover, a:active

Der Selektor ist unsinnig. a:link selektiert alle unbesuchten Links (dumme Bezeichnung); a:visited alle besuchten. Beides zusammen selektiert also schon alle Links, tut also dasselbe wie a:any-link (nicht im IE) oder a[href].

Wenn du die höhere Spezifität nicht brauchst (solltest du nicht) und a-Elemente ohne href-Attribut (sofern es solche gibt) nicht mit selektiert werden sollen, dann kannst du ganz einfach
a { … } verwenden.

"a:link:first-letter, a:active:first-letter, a:hover:first-letter, a:visited:first-letter" Anweisung

Ein Klassiker.

es werden aber nicht die ersten Buchstaben aller Links vergrößerst auf der Seite

Na schauen wir doch mal in die Beschreibung: “The ::first-letter CSS pseudo-element applies styles to the first letter of the first line of a block-level element…” (Hervorhebung von mir.)

Und ja, Pseudoelemente mit zwei Doppelpunkten ::; Pseudoklassen mit einem.

Auch im SELFHTML-Wiki steht’s so: „Das Pseudoelement ::first-letter … kann auf Block- und blockähnliche Elemente (inline-block, Listenpunkte, Tabellenüberschriften und -zellen) angewendet werden.“

a ist ein Inline-Element – sofern du nichts anderes angibst.

Was muß ich tun, daß mein Anliegen entsprechend umgestzt erscheint

Was anderes angeben, dann erscheint’s.

Die Outline hab ich gesetzt, um die Größe des clickbaren Bereichs anzuzeigen. Firefox scheint den so zu berechnen als wären alle Buchstaben groß. Das scheint wohl ein Bug zu sein – ein alter bekannter.

😷 LLAP

[JensDD]

a
{
	display: inline-block;
  text-decoration: none;
	
	outline: thin silver dashed; /* demonstration of bug in Firefox */
}

p
{ 
	font-family: Poppins !important; 
}

a:link, a:visited
{
	color: black;
}

a:active, a:focus, a:hover, a.active:visited
{
	color: #547ef6 !important;
}


a::first-letter {
  font-size: 120%;
}

Was du schreibst, funktioniert! Vielen Dank, Gunnar! Ich habe mir deine verlinkten Infos angeschaut, verstehe aber nicht alles. Ist auch nicht so ganz mein Anspruch, ich geb's zu.

Ich erlaube mir trotzdem eine weitere Frage: Es musste aus irgendeinem Grund nach deinem css Schnipsel zwangsweise geschwärzt werden, weil sonst rot, geht.

Was nun nicht geht, wie ich es mir vorstelle, ich übersehe vermutlich einige Fehlermöglichkeiten bzw sehe nichtmal deren Ursprung:

a:active, a:hover, (a.active:visited und a:focus aus Verzweiflung)

Im Sidebar ist halt das WP Menü eingefügt und es ist genau so der Fall, daß für die aktive Seite der Link auch blau bleibt. Vermutlich ist das mit a:hover (was geht) und a:active (was nicht geht) einfach ein wenig kurzgegriffen. Wie stelle ich das nun an, da die beiden Links in Header und Footer zu jeweils der Startseite und dem Impressum (beide halt einfach Textlinks und nicht eingebunden in Menüstruktur oder wieimmer speziell bezeichnet) auch blau bleiben im Falle der aktiv aufgerufenen Seite?

[Der Martin]

Hallo Jens,

p
{ 
	font-family: Poppins !important; 
}

hier solltest du unbedingt noch eine generische Schriftart für die Besucher angeben, die auf ihrem Gerät keine Schrift mit dem Namen Poppins haben. Ich kenne und habe die zum Beispiel nicht.

a
{
	display: inline-block;
  text-decoration: none;
	
	outline: thin silver dashed; /* demonstration of bug in Firefox */
}

a:link, a:visited
{
	color: black;
}

a:active, a:focus, a:hover, a.active:visited
{
	color: #547ef6 !important;
}


a::first-letter {
  font-size: 120%;
}

Ich erlaube mir trotzdem eine weitere Frage:
Es musste aus irgendeinem Grund nach deinem css Schnipsel zwangsweise geschwärzt werden, weil sonst rot, geht.

Ich habe keine Ahnung, was du mit diesem Satz (der im übrigen gar keine Frage ist), wirklich sagen willst. Ich habe ihn mehrmals aufmerksam gelesen und verstehe ihn trotzdem nicht.

Was nun nicht geht, wie ich es mir vorstelle, ich übersehe vermutlich einige Fehlermöglichkeiten bzw sehe nichtmal deren Ursprung:

a:active, a:hover, (a.active:visited und a:focus aus Verzweiflung)

Im Sidebar ist halt das WP Menü eingefügt und es ist genau so der Fall, daß für die aktive Seite der Link auch blau bleibt.

Könnte es sein, dass du :active falsch interpretierst? Die Pseudoklasse :active gilt für den kurzen Moment vom Anklicken des Links bis zum Loslassen der Maustaste. Das hat nichts mit der gerade aktiven (angezeigten) Seite zu tun.

Wie stelle ich das nun an, da die beiden Links in Header und Footer zu jeweils der Startseite und dem Impressum (beide halt einfach Textlinks und nicht eingebunden in Menüstruktur oder wieimmer speziell bezeichnet) auch blau bleiben im Falle der aktiv aufgerufenen Seite?

Willst du nun eine farbliche Unterscheidung bereits besuchter Seiten (:visited) oder nicht? Wenn ein Link auf die Startseite verweist und du hast sie kurz vorher schon mal aufgerufen, dann gilt :visited, und der Link wird gemäß deinem CSS schwarz dargestellt.

Live long and pros healthy,
 Martin

[JensDD]

Nein, eine Unterscheidung a:visited will ich eigentlich nicht. Nur solange eine Seite besucht ist, soll der darauf verweisende und geklickte Link wie beim a:hover gekennzeichnet sein. a:active verstehe ich offenbar falsch, ja.

[JensDD]

Selbstverständlich verstehe ich auch nicht, was da so steht im Skript:

https://www.tutorials.de/threads/farbe-aktiver-links-beibehalten-und-nur-bei-menuewechsel-aendern.156426/

Ist die Basis mit evtl kleiner Änderung nutzbar?

[JensDD]

Es geht nur um 2 Links. Kann man mit ner inline css Lösung arbeiten?

[Gunnar Bittersmann]

@@Der Martin

p
{ 
	font-family: Poppins !important; 
}

hier solltest du unbedingt noch eine generische Schriftart für die Besucher angeben, die auf ihrem Gerät keine Schrift mit dem Namen Poppins haben. Ich kenne und habe die zum Beispiel nicht.

Vielleicht liefert Jens die ja als Webfont aus?

Alternativen können aber nicht schaden. Das wären dann andere geometrische Schriften wie Futura oder Avant Garde. Sähe dann so aus:
font-family: Poppins, Futura, Avant Garde, sans-serif.

!important sollte das nicht sein.

Und p ist vermutlich auch kein guter Selektor dafür. Oder soll die Schrift nur in Textabsätzen verwendet werden, nicht aber in Listen, Tabellen, …?

😷 LLAP

[Der Martin]

Hallo Gunnar,

p
{ 
	font-family: Poppins !important; 
}

hier solltest du unbedingt noch eine generische Schriftart für die Besucher angeben, die auf ihrem Gerät keine Schrift mit dem Namen Poppins haben. Ich kenne und habe die zum Beispiel nicht.

Vielleicht liefert Jens die ja als Webfont aus?

auch dann ist eine generische Alternative sinnv erforderlich.
Nicht alle Browser laden Webfonts. Aus den unterschiedlichsten Gründen.

!important sollte das nicht sein.

Das hatte ich sinngemäß auch schon geschrieben, vor dem Absenden des Postings aber wieder zurückgenommen. Der Kommentar war mir dann doch nicht important genug.

Live long and pros healthy,
 Martin

[Gunnar Bittersmann]

@@Der Martin

Vielleicht liefert Jens die ja als Webfont aus?

auch dann ist eine generische Alternative sinnv erforderlich.

Nö. Es ist ja nicht so, dass, wenn keine der angegebenen Schriftarten gefunden/geladen wurde, der Text nicht angezeigt werden würde. Das wird er – in der im Browser eingestellten Defaultschriftart. Bei Desktopbrowsern dürfte das per Voreinstellung Times New Roman sein.

Die generische Alternative ist nicht unbedingt erforderlich. Aber sinnvoll.

😷 LLAP

[Gunnar Bittersmann]

@@JensDD

a
{
	outline: thin silver dashed; /* demonstration of bug in Firefox */
}

Das willst du bestimmt nicht. Nicht ohne Sinn und Verstand copy and paste, sondern Mitdenken!

a:link, a:visited
{
	color: black;
}

Dass die Kombination a:link, a:visited Unsinn ist, hatten wir doch gerade erst.

Außerdem: Willst du, dass Links schwarz sind oder dass sie die Farbe des übrigen Textes annehmen? Für Letzteres wären color: currentColor oder color: inherit Mittel der Wahl.

Aber es sollten bestimmt nicht alle Links die Farbe des übrigen Textes haben. Links im Text wären dann schlechter als solche zu erkennen.

Also nur die Links auswählen, die wirklich gefärbt werden sollen – mit Nachfahrenkombinator.

Im Sidebar ist halt das WP Menü eingefügt […]

Hier hört’s bei mir auf zu verstehen, was du sagen willst.

😷 LLAP

[JensDD]

a
{
	display: inline-block;
  text-decoration: none;
}

p
{ 
	font-family: Poppins, Roboto, Calibri, Dubai, Verdana, Arial !important; 
}

a:link
{
	color: currentColor;
}

a:active, a:hover
{
	color: #547ef6 !important;
}

a::first-letter {
  font-size: 120%;
}

So, mal bereinigt. Nochmal: Ich will erreichen, daß solange die mit einem Link aufgerufene Webseite aktiv ist, dieser Link im Header oder Footer die Farbe behält, die er bei a:hover und a:active zugewiesen hat.

[Matthias Apsel]

Hallo JensDD,

p
{ 
	font-family: Poppins, Roboto, Calibri, Dubai, Verdana, Arial !important; 
}

generische Schriftfamilie heißt: Setze als letzten Wert (hier) sans-serif. Das !important sollte nicht sein müssen.

Nochmal: Ich will erreichen, daß solange die mit einem Link aufgerufene Webseite aktiv ist, dieser Link im Header oder Footer die Farbe behält, die er bei a:hover und a:active zugewiesen hat.

Das ist allein mit CSS nicht möglich.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

p
{ 
	font-family: Poppins, Roboto, Calibri, Dubai, Verdana, Arial !important; 
}

generische Schriftfamilie heißt: Setze als letzten Wert (hier) sans-serif. Das !important sollte nicht sein müssen.

Und die ganzen scheinbar wahllos reingesetzten Schriftarten auch nicht. Roboto hat mit Poppins so viel zu tun wie … Java mit JavaScript.

😷 LLAP

[Gunnar Bittersmann]

@@JensDD

Nochmal: Ich will erreichen, daß solange die mit einem Link aufgerufene Webseite aktiv ist

Was heißt: eine Webseite ist „aktiv“?

Die Glaskugel sagt: Du willst die aktuelle Seite im Menü kennzeichnen?

Dazu müsste erstmal der Menüpunkt der aktuellen Seite im Markup (im HTML) gekennzeichnet sein. Du schriebst was von „WP“. Erledigt WP diese Kennzeichnung (mittels einer gesetzten Klasse)?

Übrigens: eine gute Kennzeichnung für den Link zur aktuellen Seite ist aria-current="page". Dann braucht man auch keine Klasse dafür. Und der Link sollte nicht zur Seite führen (da ist man ja schon – „Verlinke nicht die aktuelle Seite“, sagt Jakob Nielsen), sondern zu deren Hauptinhalt.

😷 LLAP

[JensDD]

Konnte ne Lösung finden:

Ein Template für sidebar konnte ich entsprechend in Form bringen, daß es auch im header und footer passend aussieht und vor allem die gesuchte Funktionalität verrichtet, hab weitere Menüs erzeugt und alles zusammengestrickt...das Ding läuft rund und hat die gewünschte Optik dank Gunnars Antwort!

Sorry. Ich weiß, ne schönere Art der Hilfestellung als hier gibt es nicht. Nur bin ich ja gar nicht willens, wirklich zu lernen.

Am Ende bin ich über eure Hilfestellung dann aber auch draufgekommen, von hinten durch die Brust ins Auge richtig umzusetzen...Ziel erreicht!

Vielen Dank!!