michat: Pseudoklassen in Navigation und aktuelle Seite

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

--
war unregistriert "michaa"
  1. 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

    --
    1/z ist kein Blatt Papier.

    1. 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

      --
      war unregistriert "michaa"
      1. 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

        --
        1/z ist kein Blatt Papier.

        1. ...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

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

            bye

            MH

            --
            war unregistriert "michaa"
            1. 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

              --
              1/z ist kein Blatt Papier.

              1. 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

                --
                war unregistriert "michaa"
                1. 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

                  --
                  1/z ist kein Blatt Papier.

                  1. @@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'

                    --
                    „Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry)
                    1. 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

                      --
                      1/z ist kein Blatt Papier.

                      1. @@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'

                        --
                        „Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry)
                      2. @@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'

                        --
                        „Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry)
                  2. 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

                    --
                    war unregistriert "michaa"
                    1. 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

                      --
                      1/z ist kein Blatt Papier.

                      1. @@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'

                        --
                        „Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry)
                      2. 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

                        --
                        war unregistriert "michaa"
          2. @@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'

            --
            „Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry)
            1. @@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'

              --
              „Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry)
  2. 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

    1. 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

      --
      war unregistriert "michaa"
      1. @@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'

        --
        „Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry)