Navigationsleiste mit sich ändernder Hintergrundfarbe

  • Ich habe in einer HP von mir (noch nich online) eine Navigationsleiste.
    In der CSS - Auslagerungsdatei steht folgendes (u.a.)


    a:link {text-decoration:none;color:#000000;}
    a:visited {text-decoration:none;color:#000000;}
    a:hover {text-decoration:underline;font-weight:bold;color:#000000;}
    a:active {text-decoration:none;color:#0000FF;}


    geht der Zeiger über die Links, wird der link natürlich "underlined" und "bold"
    Meine Frage: wie bekomme ich das hin, dass der Hintergrund bei mousover farbig wird?
    (nicht die Schrift farbig unterlegt, sondern der Ganze kasten Farbig)



    für die, die meine Sprache nicht verstehen als Bild^^:


    <!-- m --><a class="postlink" href="http://www.osnanet.de/jf-riesenbeck/beispiel">http://www.osnanet.de/jf-riesenbeck/beispiel</a><!-- m -->

  • Achso, na dann musst du die Eigenschaft natürlich für den ganzen Kasten selbst festlegen.
    Also zum Beispiel:
    #kasten:hover { background: #999; }
    Wenn dein Kasten um den Link herum die ID=kasten hat.

  • Also das was in den CSS-Bereich kommt genauso wie oben; und im HTML-Teil einfach folgendes:
    <div id="kasten"><a href="xyz">Linkname</a></div>
    Das id="kasten" gibt dem Div-Element den Namen "kasten", der dann über CSS mit einem # also #kasten{ } im CSS-Teil angesteuert werden kann.

  • Hm... irgend etwas hab ich da noch nicht verstanden!
    das klappt noch nicht...



    steht in der html- Datei!
    muss ich das denn da einfügen oder woanders? (das für den html-bereicht)


    das in der css- datei hab ich so:

    Zitat

    #kasten:hover { background: #999999; }
    a:link {text-decoration:none;color:#000000;}
    a:visited {text-decoration:none;color:#000000;}
    a:hover {text-decoration:underline;font-weight:bold;color:#000000}
    a:active {text-decoration:none;color:#0000FF;}

  • Das im CSS-Bereich ist schon ganz richtig, nur fehlt dir im HTML-Bereich noch das entsprechende Div- oder Span-Element, mit der id="kasten" (ich würde bei solchen Sachen von Listen, also den Aufzählungen via <li> und </li> abraten).

  • Zitat

    #kasten:hover { background: #999999; }
    a:link {text-decoration:none;color:#000000;}
    a:visited {text-decoration:none;color:#000000;}
    a:hover {text-decoration:underline;font-weight:bold;color:#000000}
    a:active {text-decoration:none;color:#0000FF;}


    Wie könnte ich dort statt der Farben einen Button (.PNG) einbauen?
    mit "background:url(..........)"??? bzw. irgendwie mit "img"???
    Und muss ich für jedes "a" einen neuen Kasten definieren?


    LG Brian

  • @ Foster:
    Ich glaub du hast nich verstanden, was ich meine nicht verstanden zu haben!
    Wo soll ich das entsprechende Div- Element, mit der id="kasten" hinschreiben?
    ich hab das in der Obersten Zeile vom body eingefügt. Da es aber nicht geklappt hatt, geh ich davon aus, dass es falsch ist.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!