Thomas: CSS link selected

Hallo Leute,

hab mal eine frage.
auf manchen seite ist ja, wenn mann zb auf einen link im menu klickt, dass dann der hintergrund vom gewählten link eine andere farbe hat.

seht zb auf http://www.dreisinne.at

geht das nur mit javascript, oder geht das auch einfacher?

danke, mfg tommy

  1. Hallo Thomas,

    Du meinst entweder :hover (so ist's zumindest auf der Beispielseite) oder aber :active (entspricht eigentlich mehr deiner Beschreibung).

    Das geht mit CSS:
    http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active

    Gruß,
    Dodwin

    --
    Dodwin
  2. Hallo!

    geht das nur mit javascript, oder geht das auch einfacher?

    http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active

    ciao, ww

    --
    sh:(  fo:|  ch:~  rl:(  br:>  n4:~  ie:%  mo:)  va:)  de:]  zu:)  fl:(  ss:|  ls:~  js:)
    1. Hallo, und vielen danke erstmal.

      Das mit dem active hätte ich schon gewusst:), hab aber vorhin vergessen zu schreiben, dass die seite in php ist, und die einzelnen bereiche der seite mittels include() geladen werden, also bleibt die url immer die selbe, nur die parameter ändern sich.

      mfg tom

      1. Hallo!

        Das mit dem active hätte ich schon gewusst:), hab aber vorhin vergessen zu schreiben, dass die seite in php ist, und die einzelnen bereiche der seite mittels include() geladen werden, also bleibt die url immer die selbe, nur die parameter ändern sich.

        Was dann zu tun ist, hat Daniel doch beschrieben.

        ciao, ww

        --
        sh:(  fo:|  ch:~  rl:(  br:>  n4:~  ie:%  mo:)  va:)  de:]  zu:)  fl:(  ss:|  ls:~  js:)
  3. Hallo,

    auf manchen seite ist ja, wenn mann zb auf einen link im menu klickt, dass dann der hintergrund vom gewählten link eine andere farbe hat.

    seht zb auf http://www.dreisinne.at

    geht das nur mit javascript

    Mit JS könnte man den Dateinamen auslesen und die entsprechende Klasse an die richtige Stelle setzen. Ist aber nicht optimal.

    oder geht das auch einfacher?

    Du musst den Link, der die aktuelle Seite repräsentiert irgendwie vom Rest abheben. Dafür bieten sich z.B. Klassen an.

    z.B.

      
    <ul>  
    <li>Seite 1</li>  
    <li>Seite 2</li>  
    <li class="aktuell">Seite 3</li>  
    <li>Seite 4</li>  
    <li>Seite 5</li>  
    </ul>
    

    und dann in der CSS-Datei u.a.:

    li.aktuell {background-color:Farbe;}

    Wenn du das Menü serverseitig einfügst, musst du dir eben entsprechende Algorithmen ausdenken, um das class-Attribut einzufügen. Ein einfacher include() ist da jedenfalls nicht mehr ausreichend…

    mfg. Daniel

  4. Hallo, und vielen danke erstmal.

    Das mit dem active hätte ich schon gewusst:), hab aber vorhin vergessen zu schreiben, dass die seite in php ist, und die einzelnen bereiche der seite mittels include() geladen werden, also bleibt die url immer die selbe, nur die parameter ändern sich.

    mfg tom

    1. Hallo Thomas,

      Das mit dem active hätte ich schon gewusst:), [...] also bleibt die url immer die selbe, nur die parameter ändern sich.

      du brauchst dich nicht zu wiederholen!

      Aber wenn du die Seiten sowieso mit PHP generierst, ist es doch fast kein Aufwand mehr, den Link zur aktuellen Seite im Menü anders zu formatieren - oder, wenn man das gut findet, an diese Stelle gar keinen Link mehr zu setzen.

      Die Pseudoklasse :active, die hier schon von zwei Leuten erwähnt wurde, hilft dir wohl überhaupt nicht weiter, denn :active gilt ja nur in den paar Sekundenbruchteilen, in denen der Link tatsächlich angeklickt wird.

      Ciao,
       Martin

      --
      Wichtig ist, was hinten rauskommt.
        (Helmut Kohl, 16 Jahre deutsche Bundesbirne)
    2. Hallo,

      Das mit dem active hätte ich schon gewusst:)

      Dass active aber nur sichtbar ist, solange man die Maustaste über dem Link gedrückt hält, ist dir bewusst?

      hab aber vorhin vergessen zu schreiben, dass die seite in php ist

      das ist schonmal eine gute Voraussetzung.

      und die einzelnen bereiche der seite mittels include() geladen werden, also bleibt die url immer die selbe, nur die parameter ändern sich.

      Dann müsstest du eben in der includeten Datei die navi zusammenbauen (nicht einfach statisch einfügen, sondern mit PHP ausgeben).

      GET, bzw. POST-Parameter machen's dir ebenfalls recht leicht. Lies diese einfach aus und reagiere entsprechend darauf.

      mfg. Daniel

  5. hab mal eine frage.
    auf manchen seite ist ja, wenn mann zb auf einen link im menu klickt, dass dann der hintergrund vom gewählten link eine andere farbe hat.

    Ich knüpfe jetzt mal an Daniels Beitrag an:

    Du musst den Link, der die aktuelle Seite repräsentiert irgendwie vom Rest abheben. Dafür bieten sich z.B. Klassen an.

    z.B.

    <ul>
    <li>Seite 1</li>
    <li>Seite 2</li>
    <li class="aktuell">Seite 3</li>
    <li>Seite 4</li>
    <li>Seite 5</li>
    </ul>

    
    > und dann in der CSS-Datei u.a.:  
    >   
    > `li.aktuell {background-color:Farbe;}`{:.language-css}  
    >   
    > Wenn du das Menü serverseitig einfügst, musst du dir eben entsprechende Algorithmen ausdenken, um das class-Attribut einzufügen. Ein einfacher include() ist da jedenfalls nicht mehr ausreichend…  
      
    Wenn man wenig Links hat, ist das Formatieren des aktuellen Links auch mit CSS möglich.  
    Ähhm, wenn man \_viele\_ Links hat, dann natürlich auch, aber dann wird es schnell chaotisch und unübersichtlich im Stylesheet. ;-)  
      
    Also: jedem Link eine eigene Klasse oder ID geben.  
      
    <ul>  
       <li><a href="home.html" class="eins"> Startseite </a></li>  
       <li><a href="mail-me.html" class="vier"> Kontakt </a></li>  
       <li><a href="impress.html" class="fuenf"> Impressum </a></li>  
    </ul>  
      
      
    Will man nun das CSS auch noch auslagern, so braucht man eine Möglichkeit, mit CSS zb die Seite 'home.html' mit dem ersten Link der <ul> zu verknüpfen, weil dieser ja auf der Seite 'home.html' der aktuelle Link ist, und anders formatiert werden soll.  
      
    Also, wie schon erwähnt, jeder Seite einen Namen geben.  
    Die Seite 'home.html' bekommt also  <body id="home">  
    die Seite 'impress.html' bekommt   <body id="impress">   usw  
      
    Nun im CSS den ID-Namen der Seite mit der Klasse des dazugehörigen Links verknüpfen:  
      
    body#home  li a.eins,  
    body#mail  li a.vier,  
    body#impress  li a.fuenf  
        { ... }   (Formatierung für den aktuellen Link)  
      
    li a:hover,  
    body#home li a.eins:hover,  
    body#mail  li a.vier:hover,  
    body#impress  li a.fuenf:hover   { ... }    (Formatierung für den aktuellen Hover-Link)  
      
      
    bsp-code:  
      
    <http://gaby77.ga.funpic.de/FAQ/aktueller_link/navi_auslagern_mit_bild/home.html>  
      
    Du kannst auch zum Seitenwechsel aufs Bild klicken.  
    Im Menü wird dann der aktuelle Link angezeigt.  
      
      
    Grüße  
    gaby