Wie weise ich in der Navigation jeder Überschrift eine andere "hover" Farbe zu?

    Hallo,

    ich möchte in der Navigationsspalte jedem Unterpunkt eine andere Farbe zuweisen wenn ich mit dem Mousezeiger drüberfahre.

    Bisher habe ich es geschafft das alle in der Farbe Gold aufleuchten.

    Ich möchte aber gerne jedes Wort eine andere Farbe zuweisen.

    Z.B.

    Home --) Gold

    Religion --) Rot

    Philosophy --) Blau

    Sport --) Gelb

    usw, usw...

    Leider finde ich im Internet keine Anleitung.

    Könnt ihr mir helfen?

    Hier ist mein bisheriger Quelltext:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <HEAD>
    <Title></title>
    <style type="text/css">
    <!--
    A:link { text-decoration: none; color: red;}
    A:visited { text-decoration: none; color: silver;}
    A:active { text-decoration: none; color: gold;}
    A:hover { text-decoration: none; color: gold;}
    -->

    body
    {
    background: "white"
    }


    h1
    {
    font-size: 7.2 pt;
    font-family: Arial ;
    color: red;
    margin-top: 2em;
    font-weight:800
    }
    h1
    {
    font-size: 7.2 pt;
    font-family: Arial ;
    color: red;
    margin-top: 2em;
    font-weight:800
    }
    p { letter-spacing: 0.04em; }

    </style>
    </HEAD>
    <body>
    <br>
    <br>
    <br>


    <p style="line-height:1.8em; font-size:0.6em; font-family: Arial; margin-left:0%; margin-right:0%">

    <font color="silver">

    <a href="Kopie von unter men.html" target="12"><b>Home</b></a>
    <br><br><br>
    <a href="Kopie von unter men.html" target="12"><b>Uhren</b></a>
    <br>
    <a href="Kopie von unter men.html" target="12">&nbsp;&nbsp;<b> Men </b></a>
    <br>


    <a href="Kopie von unter men.html" target="12">&nbsp;&nbsp;<b>Philosophie </b></a><br><br><br>
    <a href="Kopie von unter men.html" target="12"><b>Religion</b></a>
    <br>
    <a href="Kopie von unter men.html" target="12"><b>Biologie</b></a>
    <br>
    <a href="Kopie von unter men.html" target="12"><b>Wirtschaft</b></a>
    <br>
    <a href="Kopie von unter men.html" target="12"><b>Personal</b></a>
    <br>


    </font>
    </body>
    </html>

    du gibst dem link einfach ne class, schon kannst darüber dann alles steuern.

    im css

    Code
    .menu1:active { color:#00f; font-weight:bold[I];[/I] }
.menu1:hover { color:#f00; font-weight:bold; }

    im html

    Code
    <a class="menu1" href="Kopie_von_unter_men.html" target="12">Personal</a>

    btw.
    - verwende in dateinamen keine leerzeichen, lieber _
    - dein <b></b> hab ich entfernt, nimm lieber im css font-weight:bold;
    -     den anderen menüpunkten gibst dann z.b. menu2, menu3 und menu4
    - für jede class kannst active, visited, hover und link definieren
    - dir fehlt im css bei body ein ;

    schmeiss das font-tag weg und beschäftige dich mehr mit css...
    du brauchst nur dem objekt ne id oder ne class zuweisen..
    beispiel für die class religion:

    Code
    .religion{
color:#FF0000;
}

    im entsprechenden link und der überschrift und allem was du sonst noch rot haben willst schreibste: class="religion" ins tag.

    bei ner id is das nur für ein einzelnes objekt gedacht (bzw alle objekte mit der gleichen id (obwohl man IDs nur 1 mal in nem template vergeben sollte)
    beispiel für die id religionslink:

    Code
    #religionslink{
color:#FF0000;
}
    Code
    <a href="religion.html" id="religionslink">religion</a>


    natürlich kannste da auch mit pseudoklassen rumprobieren, ich denke http://www.css4you.de ist da eine lehrreiche seite.

    und nimm abstand von deinen frames, arbeite stattdessen mit DIV und INCLUDES (evtl hin und wieder mal nen iframe, wobei der auch keine vorteile birgt)

    Den Links verschiedene Klassen zuweisen und entsprechend im CSS formatieren: Farbe musst du natürlich für die entsprechenden Farben anpassen.

    HTML
    <a href="Kopie von unter men.html" target="12" class="farbe">

    Im CSS gibt es dann:

    HTML
    .farbe a:link { text-decoration: none; color: red;}
.farbe a:visited { text-decoration: none; color: silver;}
.farbe a:active { text-decoration: none; color: gold;}
.farbe a:hover { text-decoration: none; color: gold;}

    Hallo Liebe Forumsmitglieder,

    ich habe so ein ähnliches Problem und vielleicht kann mir jemand weiterhelfen.

    Ich habe verschiedene Klassen in meiner CSS und würde gerne im Navibereich die Links weiß und im Haupftfenster die Links schwarz haben. Momentan sind alle weiß :(

    Vielleicht findet ihr ja den Fehler auf den ersten Blick, wäre euch dankbar.

    Schöne Grüße
    Aleks

    is ja auch klar....

    der bereich .text fängt bei { an und hört bei } auf
    der bereich .navi fängt weiter unten bei { an und hört bei } auf

    die links werden also im prinzip doppelt definiert. und deshalb überschreiben
    die unteren die oberen in den definitionen.

    wenn dann musst schon .navi a:hover {....} machen