Ankündigung

Einklappen
Keine Ankündigung bisher.

Links hervorheben

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Links hervorheben

    Hallo

    Ich glaube, ich habe gerade einen Filmriss. Ich möchte eine Navigation erstellen, die folgendermassen aussehen sollte:

    Standardlinks (link): Schwarz und Schriftgrösse Standard
    Beim Drüberfahren (hover): Andere Farbe und Schriftgrösse Fett
    Wenn gedrückt (active?): Die gleiche Farbe wie beim Drüberfahren (Hover) und Fett

    Wenn der nächste Link angeklickt wird, sollte der vorige wieder die Standardformatierung (link) zurück erhalten und nicht auf Fett und andere Farbe bleiben, also nur der aktuell angewählte Link sollte hervorgehoben werden.

    Das sollte doch so aussehen?

    a:link {font-wight:normal; color: black;}
    a:hover {font-weight:bold; color: red;}
    a:active {font-weight:bold; color: red;}

    Die Links sind standardmässig wie bei a:link. Wenn ich mit der Maus drüber fahre, sind sie dann wie bei a:hover, aber wenn ich drauf klicke, sind sie wieder wie bei a:link.

    Irgendwie peinlich, aber es will einfach nicht klappen.

    Vielen Dank für Eure Hilfe und Gruss
    Day-Walker

  • #2
    Meinst du das so ungefähr
    https://codepen.io/basti1012/pen/oPKGvB
    Mein (Basti1012) Forum und Chat

    Kommentar


    • #3
      Hallo basti1012

      Ja genau, so sollte es aussehen, nur das die Navigation nicht horizontal ist, sondern vertikal. Aber ich denke, dass kann ich aus dem Beispiel ableiten.

      Vielen Dank und Gruss
      Day-Walker

      Kommentar


      • #4
        Hallo

        Ich brauche nochmals Eure Hilfe. Irgendwie klappt es bei mir noch nicht.

        Hier mal der Codeausschnitt.

        <style>
        .nav_haupt_a :hover, a:focus,a:active {
        font-weight: bold;
        color: red;
        }
        </style>

        <nav class="nav_haupt">
        <ul class="nav_haupt_ul">
        <li class="nav_haupt_li"><a class="nav_haupt_a" href="./index.php" title="Startseite" target="_parent">Startseite</a>
        </li>
        </nav>

        Das einzige was funktioniert, ist, wenn man draufklickt, wird der Text rot, aber er bleibt nicht rot.

        Wahrscheinlich mach ich da einen Überlegungsfehler.

        Nochmals vielen Dank für Eure Hilfe.

        Day-Walker
        Zuletzt geändert von Day-Walker; 29.09.2018, 14:13.

        Kommentar


        • #5
          Hi,
          müsste es nicht heissen:
          Code:
          .nav_haupt a:hover, .nav_haupt a:focus,.nav_haupt a:active
          oder wann soll es denn rot sein? nur beim hover oder auch beim active?

          Kommentar


          • #6
            Hallo ARS

            Es sollte beim Hover und beim Active rot sein.

            Gruss Day-Walker

            Kommentar


            • #7
              verstehe ich nicht so ganz , weil funktioniert doch soweit.
              Zeig doch mal den ganzen code
              https://codepen.io/basti1012/pen/ZqGYma

              In meinen Code von post2 funktioniert das auch?
              Mein (Basti1012) Forum und Chat

              Kommentar


              • #8
                Hallo basti1012

                Ich verstehe es auch nicht.

                Folgendes ist evtl. noch wichtig zu wissen:

                Die Navigation wird auf der jeweiligen Seite folgendermassen aufgerufen:

                <?php require( "./config/navigation.php" );?>

                Es gibt noch zwei externe CSS Files:

                <link href="css/flex.css" rel="stylesheet" type="text/css">
                <link href="css/basis.css" rel="stylesheet" type="text/css">


                Hier mal der ganze Code (der Navigation).

                <style>
                @media only screen and (min-width: 800px) {
                .nav_haupt {
                padding: 0.5rem;
                margin: 0.5rem 0rem 0rem 0rem;
                }
                .nav_haupt_ul {
                list-style-type: none;
                }
                .nav_haupt_a:hover, .nav_haupt_a:focus, .nav_haupt_a:active {
                font-weight: bold;
                color: #CA705A;
                }
                }

                @media only screen and (max-width: 800px) {
                .nav_haupt_li {
                font-size: 150%;
                }
                }
                </style>
                <nav class="nav_haupt">
                <ul class="nav_haupt_ul">
                <li class="nav_haupt_li"><a class="nav_haupt_a" href="./index.php" title="Startseite" target="_parent">Startseite</a>
                </li>
                <li class="nav_haupt_li"><a class="nav_haupt_a" href="./standorte.php" title="Unsere Standorte" target="_parent">Unsere Standorte</a>
                </li>
                <li class="nav_haupt_li"><a class="nav_haupt_a" href="./heute.php" title="Heutige Standorte" target="_parent">Heutige Standorte</a>
                </li>
                <li class="nav_haupt_li"><a class="nav_haupt_a" href="./aktuell.php" title="Aktuell" target="_parent">Aktuell</a>
                </li>
                <li class="nav_haupt_li"><a class="nav_haupt_a" href="./angebote.php" title="Unser Angebote" target="_parent">Angebote</a>
                </li>
                <li class="nav_haupt_li"><a class="nav_haupt_a" href="./grillmeister.php" title="Unsere Grillmeister" target="_parent">Grillmeister</a>
                </li>
                <li class="nav_haupt_li"><a class="nav_haupt_a" href="./party.php" title="Party &amp Fest Service" target="_parent">Party &amp; Feste </a>
                </li>
                <li class="nav_haupt_li"><a class="nav_haupt_a" href="./qualitaet.php" title="Qualit&auml;tsgarantie" target="_parent">Qualit&auml;tsgarantie</a>
                </li>
                <li class="nav_haupt_li"><a class="nav_haupt_a" href="./galerie.php" title="Galerien" target="_parent">Galerien</a>
                </li>
                <li class="nav_haupt_li"><a class="nav_haupt_a" href="./stelle.php" title="Stellenangebot" target="_parent">Stellenangebot</a>
                </li>
                <li class="nav_haupt_li"><a class="nav_haupt_a" href="./kontakt.php" title="Kontakt Zentrale" target="_parent">Kontakt Zentrale</a>
                </li>
                </ul>
                </nav>


                Wenn ich drüber fahre wird der Text und nimmt die andere Farbe an. Aber wenn ich drauf klicke, ist wieder der Standard sichtbar.
                Komischerweise im Dreamweaver (auf der Livesicht) funktioniert es.

                Gruss Day-Walker
                Zuletzt geändert von Day-Walker; 01.10.2018, 16:41.

                Kommentar

                homepage-forum.de - Hilfe für Webmaster! Statistiken

                Einklappen

                Themen: 56.435   Beiträge: 428.334   Mitglieder: 27.836   Aktive Mitglieder: 66
                Willkommen an unser neuestes Mitglied, Frank_fragt.

                Online-Benutzer

                Einklappen

                620 Benutzer sind jetzt online. Registrierte Benutzer: 1, Gäste: 619.

                Mit 1.625 Benutzern waren am 17.03.2018 um 18:52 die meisten Benutzer gleichzeitig online.

                Die neuesten Themen

                Einklappen

                SimpleSite

                Die neuesten Beiträge

                Einklappen

                Lädt...
                X