[HTML] Navigation gestalten

Dieses Thema im Forum "Webentwicklung" wurde erstellt von weBx2, 26. April 2008 .

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 26. April 2008
    Navigation gestalten

    Huhu,
    ich arbeite derzeit (nach längerer Zeit) mal wieder an einer kleinen Homepage... Besser gesagt an einem Blog. Die möchte ich jedoch anders gestalten.
    Hier erstmal die Navigation in Bild:
    {bild-down: http://img126.imageshack.us/img126/4928/navipd1.jpg}

    und hier in Code:
    Code:
    <table width="280">
     <tr>
     <td class="naviaktive">Home</td>
     </tr>
     <tr>
     <td>About us...</td>
     </tr>
     <tr>
     <td>Gallery</td>
     </tr>
     <tr>
     <td>Impressum</td>
     </tr>
     </table>
    So mein Wunsch ist es, die navigation zu verschönern und zwar insofern, dass die komplette Zeile als Link gilt und wenn man mit der Maus rüberfährt, dass sie die Eigenschaften der css "naviaktive" bekommt, also Blau ist und weiße Schrift. Dies sollte natürlich rückgängig gehen, wenn man den Link mit der Maus verlässt.

    Da kommen meine 2 Fragen:
    1. Ist sowas möglich?
    2. Kann mir jemand sagen wie das geht bzw einen Link von einem Tutorial posten?
    Ich habe so schnell nix auf de.selfhtml.org oder auf css4you.de gefunden.


    Ich danke schonmal im voraus.
    Bw's für jede hilfreiche Antwort sind selbstverständlich ;-)
     
  2. 26. April 2008
    AW: Navigation gestalten

    Du musst den Links eine Klasse geben, hier zum Beispiel "navi":
    HTML:
    <a class="navi" href="DEIN_LINK">DEIN_LINK_NAME</a>
    <a class="navi" href="DEIN_LINK">DEIN_LINK_NAME</a>
    <a class="navi" href="DEIN_LINK">DEIN_LINK_NAME</a>
    .......
    
    Und dann im CSS folgendes machen:
    Code:
    a.navi, a.navi:link, a.navi:hover, a.navi:visited, a.navi:active, a.navi:focus {
     display: block;
     color: grey;
     background-color: white;
    }
    a.navi:hover {
     color: white;
     background-color: blue;
    }
    
     
  3. 26. April 2008
    AW: Navigation gestalten

    Ich danke dir. Bw ist raus
    Ist ja doch einfacher als gedacht. ^^
     
  4. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.