Link-Background

    Hi!
    Ich habe folgende Frage:
    Wie kann ich mit CSS Links im Navi mit nem Hintergrund versehen der sich ändert wenn ich zum Beispiel mit der Maus darüber gehe.Ich habe in CSS
    #navi a:hover { background-color:blue; }
    dann ist der background aber nur zum Ende des Links,nicht über die Breite des Navi-Bereiches.Darein ein width:100%; hat auch nichts gebracht.wie kann ich das definieren?
    Mfg,ubuntuuser

    Code
    #navibereich { background-color:black; }
#naviunterpunkt { background-image:url(http://bliblablub.jpg/) }


    setz die unterpunkte einfach in den navibereich rein

    Code
    <div id="navibereich">
<ol type="none">
<li><div id="naviunterpunkt">LINK</div></li>
</ol>
</div>


    du kannst mit css auch definieren, wie es aussehen soll, wenn du mit der maus rüberläufst. steht im html seminar. weiss aber leider nicht mehr wo. hoffe dass ich dir etwas helfen konnte.


    gruss
    nekogami

    Was du meinst, sind die Pseudoklassen.


    Wenn du deinem Navi-Bereich eine ID verpasst sieht das ganze so aus:


    HTML:

    Code
    <div id="navi">
<ul>
.
.
.
</ul>
</div>


    CSS:


    Code
    #navi a:link {background-color: blue;}
#navi a:hover {background-color: red;}


    LG
    Laura

    Kay,Laura hatte Recht mit dem was ich meine.Mein Problem ist aber nicht wie ich die Farbe als Hintergrund reinbringe,sondern wie ich die Farbhinterlegung dazu bringe die komplette Navibereich-Breite auszunutzen,sprich das nicht nur das Wort sondern die ganze Zeile hinterlegt ist.Sonst hat man ja im Navi wegen unterschiedlich langer Auflistungspunktenamen immer andere Balkenlängen.Das weiß ich nicht wie ich ddas definieren kann.
    Mfg,ubuntuuser

    Klar geht das.


    Du musst dann einfach den Link in der Größe die du haben willst angeben.
    Den TExt packst du ja durch ein <li> drauf, die Fläche die der Link einnimmt musst du dir sozusagen dahinter vorstellen. Du kannst auch probieren, nur <li> zu definieren.


    LG
    Laura

    Dann müsste doch aber ein:
    #navi a:link { color:white; text-decoration:none; background-color:blue; width:100%}
    dafür sorgen,dass die ganze spalte mit dem Hintergrund hinterlegt wird,oder?Also,sofern der Link noch nicht benutzt wurde.
    Mfg,ubuntuuser

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden