Pseudoklassen in Navigation und aktuelle Seite

[michat]

Hi,

Mir ist nicht ganz klar, wo das hingehört, weil es genau das Zusammenspiel von xhtml und CSS betrifft. Vermutlich gibt es die gewünschte Möglichkeit in CSS nicht (?) und man gelangt wohl nur über einen Eingriff in den xhtml Code zum gewünschten Ergebnis. Dennoch poste ich mal im CSS-Bereich:

Ich fände es eigentlich wünschenswert, wenn in der Navigation der Listenpunkt der gerade aktuellen Seite *kein Link* ( <a>-Element ) mehr wäre bzw. nicht als solcher dargestellt würde, aber farblich hervorgehoben wäre.
Leider gibt es dafür keine Pseudoklasse, sondern ich bin darauf angewiesen manuell auf jeder einzelnen Seite das zugehörige  <a>-Element zu entfernen und statt dessen einen Klassenbezeichner mit den gewünschten Eigenschaften einzusetzen.

Geht das auch schlauer. Kann man pseudoklassen selber stricken und irgendwie mit content: none o.ä. erreichen dass, obwohl so ausgezeichnet, beim hovern der link der aktiven Seite nicht als solcher behandelt wird, dafür anders dargestellt wird? Wenn ja, geht das auch ohne JS? Pures xhtml+CSS?

bye

MH

[Matthias Apsel]

Om nah hoo pez nyeetz, michat!

Die gewünschte Möglichkeit gibt es in CSS nicht, da CSS nicht wissen kann, ob diese Seite gerade die aktuelle ist. Du musst also für jede Seite eine angepasste Navigation haben, wenn du die jeweils aktuelle Seite nicht verlinken möchtest. http://forum.de.selfhtml.org/archiv/2011/12/t208314/#m1416466 ff.

Matthias

[michat]

Hi

anke für die Beantwortung und den Link.

Wenn ich letzteren richtig verstehe bestehen die Unterschiede zwischen deinen Vorschlägen in deren jeweiliger Selektierbarkeit?
Ich hätte mich intuitiv natürlich sofort auf die Klasse gestürtzt, bei dir als schlechteste Möglichkeit bewertet. Und warum die span-Methode der ganz nackten Variante Eins vorzuziehen wäre erschießt sich mir vermutlich erst, wenn ich versuche Variante Eins zu kreieren.
Das fFolgeposting Von Gunnar B. bezieht sich wohl auf JS ("scripting")?

bye

MH

[Matthias Apsel]

Om nah hoo pez nyeetz, michat!

Wenn ich letzteren richtig verstehe bestehen die Unterschiede zwischen deinen Vorschlägen in deren jeweiliger Selektierbarkeit?

Nein, selektierbar sind alle Varianten gleich gut. Sie beziehen sich a) auf die Semantik, b) auf den Umfang des Quelltextes und c) auf die Herangehensweise beim Programmieren, falls denn die Navigation wirklich programmiert wird. Wenn du es händisch machst, ist's Wurscht.

Wenn du dich etwa für Gunnars Variante entscheidest, kannst du mit dem Selektor

foo a den "Link" zur aktuellen Seite stylen und mit
foo a[href] die "richtigen" Links (Attributselektoren)

foo steht dabei für einen Selektor, der deinem Dokument angepasst ist, weil du ja nur Links in der Navigation so gestalten möchtest.

Und warum die span-Methode der ganz nackten Variante Eins vorzuziehen wäre erschießt sich mir vermutlich erst, wenn ich versuche Variante Eins zu kreieren.

Das hatte ich damals schon beantwortet. Variante 2 ist beim Erstellen des Designs für mich "irgendwie logischer".

Das fFolgeposting Von Gunnar B. bezieht sich wohl auf JS ("scripting")?

Nein, das ist auch eine CSS-Lösung. siehe oben. Scripting meint den Programmieraufwand für eine serverseitige Umsetzung, aber das ist auch eher marginal.

Matthias

[michat]

...falls denn die Navigation wirklich programmiert wird. Wenn du es händisch machst, ist's Wurscht.

Das verstehe ich inhaltlich nicht. Mir ist gar nicht klar wie die Alternative zu händisch aussehen könnte. Ist aber vermutlich bei meinem derzeitigen Wissensstand auch unerheblich.

Ein anderers Problem, zu welchem ich *hier* eine Frage poste, damit ich nicht wieder Haue wg. Doppelposting bekomme, denn es betrifft auch Pseudoklassen, indirekt, hat mit obigem Problem aber nichts zu tun:

Ich bin am überlegen statt der derzeitigen Navigation eventuell eine Navigation über Graphiken zu erstellen (es sind nur vier Unterseiten). Falls ich das mache hätte ich es gerne, dass die an sich farbigen Graphiken je nach Aktion tatsächlich farbig oder nur in ihren Grauwerten dargestellt werden. Geht das (nur xhtml+css)? Wo muß ich in der selfhtml-Dokumentation nachsehen? Ich habe schon gegoogelt, bin aber nicht fündig geworden.

bye

MH

[michat]

Sorry, habe vergessen bei obigem posting
http://forum.de.selfhtml.org/?t=211920&m=1446753
einen passenden Betreff anzugeben.

bye

MH

[Matthias Apsel]

Om nah hoo pez nyeetz, michat!

Sorry, habe vergessen bei obigem posting
http://forum.de.selfhtml.org/?t=211920&m=1446753
einen passenden Betreff anzugeben.

Das ist eigentlich kein Problem.

Zu deiner Frage: CSS allein kann auch dieses nicht leisten. Es gibt aber einen gut erläuterten Lösungsweg.

Matthias

[michat]

Hi

Zu deiner Frage: CSS allein kann auch dieses nicht leisten. Es gibt aber einen gut erläuterten Lösungsweg.

Danke für den Link.
Ich habe das jetzt erstmal überflogen. Dein angebotener Lösungsweg beschreibt wohl einen Lösungsansatz allein mit CSS3 bei dem ich *zwei Bilder* benötige, ein farbiges und eines in s/w, richtig?

BTW, da du Opera (meinen Standardbrowser) in Zusammenhang mit CSS3 Umsetzung erwähnst: Für den history-steeling-hack ist wohl selbst die aktuellste Version 12.02 noch anfällig.

bye

MH

[Matthias Apsel]

Om nah hoo pez nyeetz, michat!

Ich habe das jetzt erstmal überflogen. Dein angebotener Lösungsweg beschreibt wohl einen Lösungsansatz allein mit CSS3 bei dem ich *zwei Bilder* benötige, ein farbiges und eines in s/w, richtig?

Du benötigst in jedem Fall die verschiedenen Bilder. Allerdings solltest du sie in *ein* Bild stecken. Es geht auch mit CSS2, da du ja nur die Pseudoklassen :hover und :active berücksichtigen willst.

BTW, da du Opera (meinen Standardbrowser) in Zusammenhang mit CSS3 Umsetzung erwähnst: Für den history-steeling-hack ist wohl selbst die aktuellste Version 12.02 noch anfällig.

12.11

Opera ist da imho einen etwas anderen Weg gegangen.

Matthias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

bei dem ich *zwei Bilder* benötige, ein farbiges und eines in s/w, richtig?

Du benötigst in jedem Fall die verschiedenen Bilder.

Nö.

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

Nö.

Cool. Aber der Browsersupport läßt noch zu wünschen übrig. Was kann man über die Geschwindigkeit sagen?

Matthias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

Cool. Aber der Browsersupport läßt noch zu wünschen übrig.

?? Laut caniuse.com können doch fast alle Browser zumindest SVG-Filter. Bis auf IE ≤ 9, bis zum 9er gehen doch aber die MS-Filter.

Qapla'

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

Was kann man über die Geschwindigkeit sagen?

Wie im bereits verlinkten Artikel gesagt, sollte die Umwandlung in schwarz/weiß recht schnell gehen.

Qapla'

[michat]

hi

Du benötigst in jedem Fall die verschiedenen Bilder. Allerdings solltest du sie in *ein* Bild stecken.

Ok, an diese Möglichkeit hatte ic gar nicht gedacht. Das läuft dann wohl auf ein .gif hinaus.

Es geht auch mit CSS2, das ist zwecks alter Browser Unterstützung schön zu hören.

da du ja nur die Pseudoklassen :hover und :active berücksichtigen willst.

Und schwupps ist das eine Problem doch mit dem anderen verknüpft: Gegenwärtig gehe ich davon aus, dass ich auf der *aktuellen* Seite die farbige Graphik zeige (weil es zugleich das Icon für den betreffenden Kurs ist) und die anderen Graphiken eben s/w anzeige. Hovern würde ich da vielleicht nur mit Rahmen, muß ich mal testen wie das funktioniert mit dem ganzen Bild von s/w zu Farbe.

12.11

klar 12.11 ist auch bei mir installiert. War da gedanklich nicht up-to-date.

bye

MH

[Matthias Apsel]

Om nah hoo pez nyeetz, michat!

Das läuft dann wohl auf ein .gif hinaus.

Die Wahl des Dateiformats hat nichts damit zu tun, dass du mehrere Teilbilder zu einem zusammenfügen möchtest. Im Prinzip stehen zur Wahl: gif, jpg, png - jedes für seinen Zweck. Als Ausgangspunkt für weitere Informationen ist die deutsche Wikipedia nicht ungeeignet.

Matthias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

Im Prinzip stehen zur Wahl: gif, jpg, png - jedes für seinen Zweck. Als Ausgangspunkt für weitere Informationen ist die deutsche Wikipedia nicht ungeeignet.

SELFHTML auch nicht. Webkrauts auch nicht.

Qapla'

[michat]

Die Wahl des Dateiformats hat nichts damit zu tun, dass du mehrere Teilbilder zu einem zusammenfügen möchtest.

Du redest also von CSS-Sprites?

bye

MH

[Gunnar Bittersmann]

@@michat:

nuqneH

Falls ich das mache hätte ich es gerne, dass die an sich farbigen Graphiken je nach Aktion tatsächlich farbig oder nur in ihren Grauwerten dargestellt werden. Geht das (nur xhtml+css)?

Ja. In Webkits mit CSS-Filtern, in alten IEs mit deren proprietären Filtern, ansonsten mit SVG-Filtern.

http://www.html5rocks.com/en/tutorials/filters/understanding-css/
http://caniuse.com/#search=filter

Wo muß ich in der selfhtml-Dokumentation nachsehen?

Nirgens. Es steht nicht drin (außer die alten IE-Filter).

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Falls ich das mache hätte ich es gerne, dass die an sich farbigen Graphiken je nach Aktion tatsächlich farbig oder nur in ihren Grauwerten dargestellt werden. Geht das (nur xhtml+css)?

Ja. In Webkits mit CSS-Filtern, in alten IEs mit deren proprietären Filtern, ansonsten mit SVG-Filtern.

Wobei man dazusagen muss, dass die Filter die Farben irgendwie in Grauwerte umsetzen, aber nicht unbedingt optimal.

Photoshop hat nicht umsonst etliche verschiedene Voreinstellungen und bietet die Möglichkeit, Rot-, Grün- und Blauwert je nach Motiv unterschiedlich abzumischen.

Wenn die Bildqualität wichtig ist, führt kaum was an eigens erstellten Schwarz-weiß-Bildern vorbei.

Qapla'

[misterunknown]

Moin,

Leider gibt es dafür keine Pseudoklasse, sondern ich bin darauf angewiesen manuell auf jeder einzelnen Seite das zugehörige  <a>-Element zu entfernen und statt dessen einen Klassenbezeichner mit den gewünschten Eigenschaften einzusetzen.

Meine Idee:
Mit Notepad++ (beipspielsweise) kann man für alle Dateien in einem Verzeichnis Suchen und Ersetzen, auch mit regulären Ausdrücken. Da ich mal davon ausgehe, dass die entsprechende Stelle im Code immer mehr oder weniger gleich aussieht, könntest du das auch so machen.

Grüße Marco

[michat]

Meine Idee:
Mit Notepad++ (beipspielsweise) kann man für alle Dateien in einem Verzeichnis Suchen und Ersetzen, auch mit regulären Ausdrücken. ...

Danke für die Mitteilung. Aber es ging mir nicht darum zu erfahren wie ich möglichst unaufwendig die entsprechenden Stellen ändere sondern darum ob es einen Weg gibt, diese anders zu lösen. Offenbar eben nicht.

bye

MH

[Gunnar Bittersmann]

@@michat:

nuqneH

Danke für die Mitteilung. Aber es ging mir nicht darum zu erfahren wie ich möglichst unaufwendig die entsprechenden Stellen ändere sondern darum ob es einen Weg gibt, diese anders zu lösen. Offenbar eben nicht.

Serverseitig (PHP, SSI, …): Wenn Linkziel gleich URI der aktuellen Seite, dann Menüpunkt nicht verlinken.

Qapla'