Ro: Navigationsbutton hervorheben für alle Seiten unterhalb der Top Navigation

Hallo,

ich habe als html Neuling meine Baukastenseite auf html (ExpressionWeb4) umgestellt. Sie funktioniert so auch erträglich. Ich schaffe es aber nicht, den entsprechenden Linkbutton in der Top-Navigation für "ausgewählt" darstellen zu lassen (gleiches Design wie hover aber dauerhaft solange dieser Punkt und seine Unterseiten aktif sind. Ich habs schon stundenlang in .css und .dwt und direkt versucht - ohne Erfolg. Auch nicht mit visited... Bitte helfen... Vielen Dank Ro www.weitreiter.de

  1. Hallo

    … den entsprechenden Linkbutton in der Top-Navigation für "ausgewählt" darstellen zu lassen

    das geht auch nur, wenn du den Link zur aktuellen Seite entsprechend auszeichnest, z.B. von Hand (so mache ich es) oder mit einer serverseitigen Technik.

    Gruß
    Jürgen

    1. @@JürgenB

      … den entsprechenden Linkbutton in der Top-Navigation für "ausgewählt" darstellen zu lassen

      das geht auch nur, wenn du den Link zur aktuellen Seite entsprechend auszeichnest, z.B. von Hand (so mache ich es) oder mit einer serverseitigen Technik.

      Und die richtige Ausszeichnung dafür ist aria-current="page".

      LLAP 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    2. Jürgen, vielen Dank für die Antwort ! Ja, das habe ich schon versucht zu machen - stundenlang aber es passiert nichts. Bin blutiger Anfänger, und irgendwie krige ich die Voreinstellungen in der css und dwt nicht "Überschrieben". Kann ich hier irgendwo Teile der Seite hochladen / einstellen? Bestimmt ist das garnicht so kompliziert, aber ohne Kenntnisse dann halt doch fast unmöglich... Es geht um folgende Seite und darin um die Top-Navigation: www.weitreiter.de Vielen Dank Roland

      1. Liebe Helfende, dieses wäre die entsprechende Stelle in der .dwt.:

        <!-- Top Navigation begins here -->
        <div id="topNavigation">
        <ul>
        <li ><a href="../../index.html" title="RoSa Go East">RoSa´s Ritt durch Europa</a></li>
        <a href="../../Fernwanderritt%20Argentinien/Fernwanderritt%20Argentina.html" title="Argentinien zu Pferd"> !!! Neu - Argentinien zu Pferd !!!</a></li>
        <li><a href="../12_links.html" title="Links">Links</a></li>
        <li><a href="../13_kontakt.html" title="Kontaktformular">Kontakt</a></li>
        </ul>
        </div>
        <!-- Top Navigation ends here -->
        

        und das nder Eintrag in der .css :

        /*========================================
        Top Navigation
        =========================================*/
        #outerWrapper #topNavigation {
        background-color: #BBBB88; /* RB: Navibalken unter Banner, es war #bbbb88 */
        min-height: 2.3em;
        padding: 5px 10px 0px 10px; /* RB: obere Balkendicke, Anstand rechts?, untere Balkendicke, Abstand erster Button links, es war 5px 10px 1px 10px */
        border-bottom: solid 1px #663; /* RB_ Kajalstrich unter topMenue, es war #663 */
        }
        #outerWrapper #topNavigation ul {
        list-style-type: none;
        width: 100%;
        margin: 0px; /* RB: Rahmen um Button-Block, es war 0px */
        padding: 0px; /* RB: ebenfalls Rahmen um Button-Block, es war 0px */
        }
        #outerWrapper #topNavigation li {
        float: left;
        margin: 0px; /* RB eingefügt: Rahmen um einzelne Buttons */
        }
        #outerWrapper #topNavigation a {
        background-color: #BBBB88; /* RB eingefügt zun Sichtbarmachung Buttons, es war #CDBB99, aendern auf #AFAE7B */
        color: #FFFFFF; /* RB: Textfarbe Buttons, es war #FFFFFF weiss */
        text-decoration: none;
        margin: 0px 4px; /* RB: Abstand Buttons von Oberkante Balken bzw. von links, es war 0px 1px */
        padding: 5px; /* RB: Abstand Graufeld um Linkbuttons herum, es war 5px */ 
        border: 1px solid #CCCC99; /* RB eingefügt: Rahmen um einzelne Linkbuttons, es war DBCDB3, AFAE7B, #CCCC99 */
        border-radius: 6px; /* RB eingefügt: macht Rahmen Softline */
        display: block;
        }
        #outerWrapper #topNavigation a:hover {
        background-color: #DBCDB3; /* RB es war #CDBB99, aendern auf #AFAE7B */
        color: #000000; /* RB: Textfarbe Buttons mouseover, es war #000000 */
        border-radius: 6px;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        }
        #outerWrapper #topNavigation a:focus { /* RB eingefügt, focus = Aussehen link button bei Tabulatortaste */
        background-color: #DBCDB3; /* RB es war #CDBB99, aendern auf #AFAE7B */
        color: #000000; /* RB: Textfarbe Buttons, es war #000000 */
        border-radius: 6px;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        }
        

        Vielen Dank Roland

        1. oh, jetzt ist die ganze Formatierung weg - entschuldigung...

          1. @@Ro

            oh, jetzt ist die ganze Formatierung weg - entschuldigung...

            Ich hab das mal lesbar gemacht. Das nächste Mal bitte selber machen – der Button dazu ist über dem Eingabefeld (</>).

            LLAP 🖖

            --
            “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
            1. Vielen Dank für das Lesbarmachen. Leider habe ich immer noch keine Lösung um einen Menüpunkt dauerhaft farblich herauszuheben. Vielleicht kann doch jemand helfen. Vielen Dank Ro

              1. Hallo Ro,

                Vielen Dank für das Lesbarmachen. Leider habe ich immer noch keine Lösung um einen Menüpunkt dauerhaft farblich herauszuheben. Vielleicht kann doch jemand helfen.

                JürgenB hat bereits geholfen. Falls du da noch Fragen hast, …

                Bis demnächst
                Matthias

                --
                Rosen sind rot.