CSS Pseudoclass :active / :focus

[Maetzzen]

Guten Morgen zusammen! Ich hätte mal wieder eine Frage und zwar wird bei meiner Navigations-Liste immer das überflogene <li> Element hervorgehoben. Nun wäre es toll, wenn dieses Element die css-styles nicht nur bei :hover sondern auch nach dem klicken behält.

Hier ein fiddle dazu.

Wenn ich die href der <a>-Links mit meinen verschiedenen *.php Seiten verlinke, wird die rote Schrift nicht beibehalten. Wenn ich nach dem *.php im href noch eine # hinzufüg (also *.php#) Dann funktioniert es, aber nur wenn man ein zweites Mal auf den Link drückt :)

Gibt es hierfür eine Lösung? Schlussendlich sollen die css-styles von #navigation li:hover für das jeweils aktive Element angezeigt werden (also der Graue Rahmen + Hintergrund). Das andere dient nur um das Problem zu erläutern

Gruß Maetzzen

EDIT: Also Sobald eine neue Seite geladen wird, verschwindet der "style" wieder. Wenn ich auf der Seite bleibe und nur mit # nach oben scroll, funktioniert es..

[MrMurphy1]

Hallo

CSS kann nicht erkennen welche Seite aktuell angezeigt wird und zu welchem Menüpunkt sie gehört.

Um den hervorzuheben musst du ihn demnach auf jeder Seite selbst auswählen und sein Layout anpassen. Dafür gibt es unterschiedliche Möglichkeiten. Ohne deine Seite zu kennen sind konkrete Vorschläge deshalb kaum möglich.

Gruss

MrMurphy

[Maetzzen]

Hallo

CSS kann nicht erkennen welche Seite aktuell angezeigt wird und zu welchem Menüpunkt sie gehört.

Um den hervorzuheben musst du ihn demnach auf jeder Seite selbst auswählen und sein Layout anpassen. Dafür gibt es unterschiedliche Möglichkeiten. Ohne deine Seite zu kennen sind konkrete Vorschläge deshalb kaum möglich.

Gruss

MrMurphy

Okay Danke dir. Früher habe ich je Seite ein eigenes .css benutzt (^_^') da hab ich dann immer jeweils das .nth child eben hervorgehoben. Dann hab ich nur noch 1 .css benutzt und die <li>-Elemente einzeln mit style"..." hervorgehoben. Da ich nun aber Den Head, header und main, also alles was auf jeder einzelnen Seite gleich ist in einer .php Datei gepackt habe kann ich diese nicht mehr einzeln hervorheben.

Ich habe z.B. Ein Fotoalbum, das funktioniert ähnlich wie es bei meiner Nav-Leiste auch gehen sollte.

Fotoalbum

Hier wird immer das aktive Foto (Also die Miniatur davon unten) mit einem gelben Rahmen hervorgehoben. Der unterschied zur Nav-Leiste ist nur dieser, dass die Links bei den Bildern nur auf href="#" verweisen und die der Nav-Leiste auf eine neue *.php Seite.

Aber wenn das nicht möglich ist werde ich es wohl so lassen. Mit jQuery kann man ja auch so etwas machen, da bin ich aber noch am lesen ^^..

[Gunnar Bittersmann]

@@Maetzzen

Früher habe ich je Seite ein eigenes .css benutzt (^_^') da hab ich dann immer jeweils das .nth child eben hervorgehoben.

Keine gute Idee. Bei Änderungen im Menü müsste neu durchgezählt und das Stylesheet angepasst werden. Das will man vermeiden.

Da ich nun aber Den Head, header und main, also alles was auf jeder einzelnen Seite gleich ist in einer .php Datei gepackt habe kann ich diese nicht mehr einzeln hervorheben.

Doch, wie ich eben schon sagte.

Mit jQuery kann man ja auch so etwas machen

Ja, man könnte auch die Verlinkung des aktuellen Menüpunktes mit JavaScript machen. jQuery ist dazu nicht erforderlich.

Und serverseitig wäre besser.

LLAP 🖖

[Gunnar Bittersmann]

@@Maetzzen

Nun wäre es toll, wenn dieses Element die css-styles nicht nur bei :hover sondern auch nach dem klicken behält.

Hier ein fiddle dazu.

Warum verst&uuml;mmelst du Umlaute? Das ist doch &uuml;berhaupt nicht n&ouml;tig.

Warum für :focus einen gänzlich anderen Stil als für :hover? Dir ist die Funktion von :focus bewusst? Und die von :active?

Wenn ich die href der <a>-Links mit meinen verschiedenen *.php Seiten verlinke, wird die rote Schrift nicht beibehalten.

Du rufst dann ja auch eine neue Seite auf. Die neue Seite weiß nichts darüber, was du auf der alten Seiten angeclickt (oder anderweitig angewählt!) hast.

Gibt es hierfür eine Lösung?

Ja. Den Menüpunkt der aktuellen Seite im Markup kenntlich machen und dann entsprechend stylen. Und am besten den Menüpunkt der aktuellen Seite nicht verlinken. (Punkt 10) Aber vielleicht doch bei Keyboard-Navigation von Screenreadern vorlesen lassen. (Conundrum)

Das a-Element kann aber bleiben – ohne href-Attribut. (Beispiel) Gestylt wird dann bspw. 'nav a' und 'nav a[href]'. Oder (in heutigen Browsern) 'nav a:not([href])' und 'nav a[href]'. Oder zukünftig per 'nav a:any-link'.

Auf mehreren Seiten wiederkehrende Dinge kann man auch auslagern; auch dann ist die Nicht-Verlinkung der aktuellen Seite machbar.

TL;DR und dortige Links.

LLAP 🖖

[Maetzzen]

Warum verst&uuml;mmelst du Umlaute? Das ist doch &uuml;berhaupt nicht n&ouml;tig.

Wenn ich meine Seiten im localhost anzeigen lasse sind die Umlaute ansonsten nicht lesbar. Ist das später (online) gewöhnlich nicht der Fall?

Du rufst dann ja auch eine neue Seite auf. Die neue Seite weiß nichts darüber, was du auf der alten Seiten angeclickt (oder anderweitig angewählt!) hast.

Das hab ich mir schon gedacht.

Gibt es hierfür eine Lösung?

Ja. Den Menüpunkt der aktuellen Seite im Markup kenntlich machen und dann entsprechend stylen. Und am besten den Menüpunkt der aktuellen Seite nicht verlinken. (Punkt 10) Aber vielleicht doch bei Keyboard-Navigation von Screenreadern vorlesen lassen. (Conundrum)

Muss ich mir genauer ansehen

Auf mehreren Seiten wiederkehrende Dinge kann man auch auslagern; auch dann ist die Nicht-Verlinkung der aktuellen Seite machbar.

Okay das wird mir dann schon etwas zu komplex :) Ich befasse mich erst seit 2 Wochen mit html, css, php.

Danke für die ausführliche Antwort + Links, dann habe ich wieder etwas zu lesen ;)

Aber das mit den Umlauten wird mir dennoch nicht ganz klar. Man verwendet &..... um Sonderzeichen wie "<" ">" "&" um, diese Zeichen nicht mit mathematischen Zeichen zu verwechseln.

Die &..... -Zeichen der Umlaute benötigen mehr Platz und machen es unleserlich, ist mir auch bereits aufgefallen, hat mich auch gestört :) Aber was genau soll ich dann in diesem Fall machen? Umlaute einfach als Umlaut schreiben? Bei mir werden die dann lokal falsch angezeigt, s.o.

Gruß Matthias

Edit: Da ich die "meine Seite" heute aufgefrischt habe und nun eine dynamische Navigationsleiste besitzt hat sich das obige Problem geklärt. :)

[Der Martin]

Hallo,

Warum verst&uuml;mmelst du Umlaute? Das ist doch &uuml;berhaupt nicht n&ouml;tig.

Wenn ich meine Seiten im localhost anzeigen lasse sind die Umlaute ansonsten nicht lesbar.

dann hast du noch ein generelles Problem mit der Zeichencodierung, das du möglichst frühzeitig angehen solltest:

• Sendet dein XAMPP(?) auf localhost die richtige Zeichencodierung im Content-Type-Header? Falls nein, entweder in der Serverkonfiguration anpassen oder Content-Type-Header mit PHP senden. Letzteres ist universell und auch später beim Webhoster möglich, selbst wenn du nicht oder nicht ausreichend in die Serverkonfiguration eingreifen kannst.
• Steht im entsprechenden meta-Element des Dokuments die richtige Zeichencodierung? Falls nein, einfach korrigieren.

Ist das später (online) gewöhnlich nicht der Fall?

Wenn man es richtig[tm] macht, ist das weder online (beim Hoster) noch lokal (XAMPP/Apache) der Fall.

Aber das mit den Umlauten wird mir dennoch nicht ganz klar.
Man verwendet &..... um Sonderzeichen wie "<" ">" "&" um, diese Zeichen nicht mit mathematischen Zeichen zu verwechseln.

Genau, Sonderzeichen. Also Zeichen, die im Kontext HTML eine besondere Bedeutung haben. Umlaute und andere diakritische Zeichen, griechische, hebräische, kyrillische Buchstaben, mathematische Symbole und Ähnliches gehört nicht dazu und darf deshalb gern im Klartext geschrieben werden, sofern die verwendete Zeichencodierung dieses Zeichen abbilden kann. Daher ist UTF-8 eine gute Wahl, da ist so ziemlich alles drin, was das Herz begehrt.

Die &..... -Zeichen der Umlaute benötigen mehr Platz und machen es unleserlich, ist mir auch bereits aufgefallen, hat mich auch gestört :) Aber was genau soll ich dann in diesem Fall machen? Umlaute einfach als Umlaut schreiben?

Genau das.

Bei mir werden die dann lokal falsch angezeigt, s.o.

Siehe oben: Untersuche, ob an allen relevanten Stellen wirklich die Zeichencodierung angegeben wird, die du auch verwendest.

So long,
 Martin

[Maetzzen]

dann hast du noch ein generelles Problem mit der Zeichencodierung, das du möglichst frühzeitig angehen solltest:

• Sendet dein XAMPP(?) auf localhost die richtige Zeichencodierung im Content-Type-Header? Falls nein, entweder in der Serverkonfiguration anpassen oder Content-Type-Header mit PHP senden. Letzteres ist universell und auch später beim Webhoster möglich, selbst wenn du nicht oder nicht ausreichend in die Serverkonfiguration eingreifen kannst.
• Steht im entsprechenden meta-Element des Dokuments die richtige Zeichencodierung? Falls nein, einfach korrigieren.

Meta-Daten? Muss ich mal schauen was genau ich da beachten soll ^^ Gibt es hier ja eine gute Seite. So etwas habe ich noch nie benutzt. Bei mir gibts eben Doctype head body und den Rest so wie es mir grad in den Sinn kommt. Wird nachgeholt (._.)' .. Falls Fragen bestehen melde ich mich wieder :)

Wenn man es richtig[tm] macht, ist das weder online (beim Hoster) noch lokal (XAMPP/Apache) der Fall.

Siehe oben: Untersuche, ob an allen relevanten Stellen wirklich die Zeichencodierung angegeben wird, die du auch verwendest.

Ein Danke an Gunnar Bittersmann, dass er meine kleine Dummheit in Frage gestellt hat. Besser hol ich das jetzt alles nach, bevor ich mich an den Inhalt der Seite richte :)

[Der Martin]

Hi,

dann hast du noch ein generelles Problem mit der Zeichencodierung, das du möglichst frühzeitig angehen solltest:

• Sendet dein XAMPP(?) auf localhost die richtige Zeichencodierung im Content-Type-Header? Falls nein, entweder in der Serverkonfiguration anpassen oder Content-Type-Header mit PHP senden. Letzteres ist universell und auch später beim Webhoster möglich, selbst wenn du nicht oder nicht ausreichend in die Serverkonfiguration eingreifen kannst.
• Steht im entsprechenden meta-Element des Dokuments die richtige Zeichencodierung? Falls nein, einfach korrigieren.

Meta-Daten? Muss ich mal schauen was genau ich da beachten soll ^^ Gibt es hier ja eine gute Seite.

ja, genau. Und wenn du das jetzt ergänzt und dich dann wunderst, warum die Änderung nichts bewirkt, dann denk bitte daran: Die Angabe der Zeichencodierung per meta-Element ist nur dann relevant, wenn das Dokument nicht per HTTP übermittelt wird (sondern z.B. direkt aus dem lokalen Filesystem), oder wenn in den HTTP-Headern keine entsprechende Angabe auftaucht. Falls doch, hat die Vorrang, und eine Festlegung per meta-Element wird ignoriert.

Ein Danke an Gunnar Bittersmann, dass er meine kleine Dummheit in Frage gestellt hat. Besser hol ich das jetzt alles nach, bevor ich mich an den Inhalt der Seite richte :)

Schön, wenn du es so siehst, denn so ist es auch gemeint: Als zusätzlicher Nutzen. Viele fühlen sich stattdessen angegriffen, wenn man Fehler (oder schlechte Ansätze) kritisiert, nach denen sie nicht konkret gefragt haben.

So long,
 Martin

[Maetzzen]

Schön, wenn du es so siehst, denn so ist es auch gemeint: Als zusätzlicher Nutzen. Viele fühlen sich stattdessen angegriffen, wenn man Fehler (oder schlechte Ansätze) kritisiert, nach denen sie nicht konkret gefragt haben.

Wieso sollte ich auf jemanden böse sein, der mir helfen will. Da ich html css nicht ausführlich durch mehrere Anfängerseiten gelernt habe, sondern recht zügig, gibt es eben einige Sachen die mir nie über den Weg gelaufen sind, wie auch bei meiner Fragen über die Struktur der Homepage, wobei ich über den

<?php
 include('head.php');
?>

Befehl mehr als nur glücklich geworden bin.

Das Umlaut Problem ist gelöst, musste nur eine Zeile übernehmen :) Großes Dank an euch!

[Gunnar Bittersmann]

@@Der Martin

Die Angabe der Zeichencodierung per meta-Element ist nur dann relevant, wenn das Dokument nicht per HTTP übermittelt wird (sondern z.B. direkt aus dem lokalen Filesystem), oder wenn in den HTTP-Headern keine entsprechende Angabe auftaucht.

Und wenn kein BOM am Dateianfang die Zeichencodierung angibt.

Falls doch, hat die Vorrang, und eine Festlegung per meta-Element wird ignoriert.

Falls doch, hat das Vorrang, und die Angabe im HTTP-Header wird ignoriert.

Außer im IE. Wurde das in Edge eigentlich schon korrigiert?

LLAP 🖖

[Gunnar Bittersmann]

@@Der Martin

• Sendet dein XAMPP(?) auf localhost die richtige Zeichencodierung im Content-Type-Header? Falls nein, entweder in der Serverkonfiguration anpassen oder Content-Type-Header mit PHP senden.

Es gibt auch die Meinung, dass der Server gar keine Angabe zur Zeichencodierung machen sollte.

• Steht im entsprechenden meta-Element des Dokuments die richtige Zeichencodierung? Falls nein, einfach korrigieren.

„Richtige“ meint: diejenige Zeichencodierung, mit der das Dokument gespeichert wurde.

Falls das nicht UTF-8 sein sollte, einfach korrigieren.

Daher ist UTF-8 eine gute Wahl,

Es ist die einzig richtige Wahl.

da ist so ziemlich alles drin, was das Herz begehrt.

Sagen wir so: Da ist alles drin, was Unicode hergibt.

LLAP 🖖

[Der Martin]

Hallo,

• Sendet dein XAMPP(?) auf localhost die richtige Zeichencodierung im Content-Type-Header? Falls nein, entweder in der Serverkonfiguration anpassen oder Content-Type-Header mit PHP senden.

Es gibt auch die Meinung, dass der Server gar keine Angabe zur Zeichencodierung machen sollte.

hmm, und was anstatt? Nur BOM oder meta-Element? Würde ich zumindest nicht tun wollen. Wenn eine Angabe in den Meta-Daten des Protokolls (HTTP) schon vorgesehen ist, möchte ich die auch nutzen.

Schließlich gibt es neben HTML auch andere textbasierte Formate, die kein meta-Element im Dokument kennen, und eine BOM wird von der verarbeitenden Software oft nicht unterstützt (z.B. CSV, je nach Toolchain auch Plain Text).

Ciao,
 Martin

[Gunnar Bittersmann]

@@Der Martin

Es gibt auch die Meinung, dass der Server gar keine Angabe zur Zeichencodierung machen sollte.

hmm, und was anstatt? Nur BOM oder meta-Element?

Ja. Nichtausschließendes Oder.

Würde ich zumindest nicht tun wollen. Wenn eine Angabe in den Meta-Daten des Protokolls (HTTP) schon vorgesehen ist, möchte ich die auch nutzen.

Oder auch nicht. Zum Beispiel, wenn du Altlasten in ISO 8859-1 hast, neu hinzukommende bzw. bearbeitete Dokumente aber selbstverständlich in UTF-8 codierst. Dann soll der Server keine Angabe zu allen Dokumenten machen, sondern jedes Dokument seine Zeichencodierung selbst angeben.

Schließlich gibt es neben HTML auch andere textbasierte Formate, die kein meta-Element im Dokument kennen,

Ja. Wir reden hier aber schon über HTML-Dokumente.

und eine BOM wird von der verarbeitenden Software oft nicht unterstützt

Der Bug wäre in jener Software zu fixen.

LLAP 🖖

[Gunnar Bittersmann]

@@Maetzzen

Danke für die ausführliche Antwort + Links, dann habe ich wieder etwas zu lesen ;)

In dem verlinkten W3C-i18n-Artikel wird in den Literaturangaben auch das Tutorial genannt.

Aber das mit den Umlauten wird mir dennoch nicht ganz klar. Man verwendet &..... um Sonderzeichen wie "<" ">" "&" um, diese Zeichen nicht mit mathematischen Zeichen zu verwechseln.

Nein. Sondern um die Zeichen "<" ">" nicht mit den Begrenzungszeichen von Tags zuverwechseln. Und "&" nicht mit dem Startzeichen einer Zeichenreferenz. Da diese Zeichen in HTML eine Sonderbedeutung haben, also Sonderzeichen sind, müssen sie escapet werden.

ü, д, φ, א etc. haben in HTML keine Sonderbedeutung, sind also keine Sonderzeichen und müssen auch nicht escapet werden.

LLAP 🖖

[mark]

EDIT: Also Sobald eine neue Seite geladen wird, verschwindet der "style" wieder. Wenn ich auf der Seite bleibe und nur mit # nach oben scroll, funktioniert es..

Um das zu erreichen würde ich einfach mit php, in der aufgerufenen Seite eine Klasse, oder eine id im html-Tag setzen. Sollten die Seiten dynamisch, also in der selben php-Datei gerendert werden, kannst du zur Not auch mit GET oder POST übergeben.

Wenn du getrennte Seiten hast:

• in der calendar.php setzt du <html id="calendar">
• dein link braucht eine Klasse, oder id <a class="calendar-link" href="calendar.php">

und sprichst dann denn link folgendermaßen über css an:

#calendar .calendar-link{
    color: red;
}

Wenn du alles über eine php-Datei machst kannst du die einsprechenden Parameter auch per GET übergeben. Z.B. so:

<a class="calendar-link" href="index.php?v=calendar">

<html id="<?php echo htmlspecialchars($_GET["v"]); ?> ">

Eine dritte Möglichkeit wäre auch noch, dass du, wiederum per php den a-Tags eine Klasse "active" zuweist, wenn die entsprechende Seite geladen wird.

Ich hoffe das Prinzip hab' ich außreichend deutlich erklärt.

lg mark

[mark]

Nachtrag: und wenn das Ganze clientseitig ablaufen soll, kannst du dieses Verhalten mit Javascript realisieren, indem du einen EventListener auf onhashchange setzt und dem entsprechenden Element dann eine css-Klasse zuweist.

[Gunnar Bittersmann]

@@mark

Nachtrag: und wenn das Ganze clientseitig ablaufen soll, kannst du dieses Verhalten mit Javascript realisieren, indem du einen EventListener auf onhashchange setzt und dem entsprechenden Element dann eine css-Klasse zuweist.

Nachtrag zum Nachtrag: Das Event heißt hashchange und CSS-Klassen   gibt es nicht.

LLAP 🖖