Probleme mit "li :activate" in horizontaler navigation

[wotan100]

Hallo, an alle!
Vorab möchte ich mich schon entschuldigen, da dieses Thema (in ähnlicher Form) hier schon bearbeitet wurde, jedoch habe ich es noch nicht verstanden.
Ich hoffe jemand ist so nett und versucht mir mein Problem nochmals zu erklären.

Ich hätte gerne das bei der horiz. Nav. beim Click auf einen Link die Hintergrundfarbe ändert. Ich verzweifle schon dabei...

<style type="text/css">

#navi{
    width:960px;
    height:40px;
    margin:0 auto;
}
#navi ul{
    list-style-type:none;
    margin:0px;
    padding:0px 0px 0px 20px;
}
#navi li {
    width:60px;
    padding:0 0 0 0;
    text-align:center;
    margin:auto;
    float:left;
    background:#3FF;

}
#navi a{
    background:#666;
}

#navi :hover{
    background:#0F0;
}
#li :activate{
    background::#CF6;
}
</style>

<div id="navi"> 

            <ul>

                <li><a href="Friends.html"><span>Friends</span></a></li>
                <li><a href="galerie_anzeigen.php"><span>Pics</span></a></li>
                <li><a href="vids.php"><videos>Videos</span></a></li>
                <li><a href="#"><span>Startseite</span></a></li>


            </ul>
    
            </div>

Vielen Dank schon im Voraus!
Lg

 

[msblacky]

AW: Probleme mit "li :activate" in horizontaler navigation

Hallo,

schreib mal a:hover und nicht nur :hover.

msblacky

 

[Solla]

AW: Probleme mit "li :activate" in horizontaler navigation

Ja, da hat msblacky vollkommen recht, Du willst ja nur einen einzelnen Link mit hover besetzen und nicht die ganze Navi oder? So wie Du es bisher hast kanns nicht gehen.

B.G.
Solla

 

[simonpicos]

AW: Probleme mit "li :activate" in horizontaler navigation

Es heißt:

li:active

und nicht

li:activate

 

[fakerer]

AW: Probleme mit "li :activate" in horizontaler navigation

wenn dann ist es li a:active,
zumindest kenn ich es nur so

li.activate könntest du nehmen wenn du zb mit javascript oder so die classe beim anklicken hinzufügst, was du ja vielleicht machst sieht man ja nicht

 

[Solla]

AW: Probleme mit "li :activate" in horizontaler navigation

Oh ja sorry, des hab ich auch überlesen :active muss es heißen!

Meiner Ansicht nach müsst des schon li a:active heißen, aber de das Hängt davon ab, ob Du nur den Link, also den Text des Links, oder aber den Ganzen Tab mit dem Link beim Drüberfahren umfärben willst.

B.G.
Solla

 

[wotan100]

AW: Probleme mit "li :activate" in horizontaler navigation

Danke für eure schnellen Antworten!

Ja ich hab schon so viel herumprobiert, dieser Code war einfach das letzte Stadium!
Habs aber jetzt umgeschrieben und es klappt trotzdem nicht...

Der hover- Effekt funktioniert, jedoch bleibt die Farbe nach dem Click nicht geändert...

#navi a{
 background:#666;
}
#navi a:hover{
 background:#0F0;
}
#li a:active{
 background::#CF6;
}

ALSO, eigentlich solls im Prinzip so (ähnlich) funktionieren wie die Nav. hier bei psd-tutorials.de
Des wär voll der Hammer...
Aber ich schaffs einfach nicht.... :-(

 

[Dissolution]

AW: Probleme mit "li :activate" in horizontaler navigation

#navi a{
 background:#666;
}
#navi a:hover{
 background:#0F0;
}
#li a:active{
 background::#CF6;
}

Erstens heißt es:

li a:active {
background: #CF6;
}

(Achtung, nur einmal ":", nicht zweimal. Mein Tipp: Genau arbeiten!)

abgesehen davon... heißt der Div etwa "li" oder geht es um die Liste? Dann kommt das "#" nämlich weg bzw. "Navi" hin!

 

[Solla]

AW: Probleme mit "li :activate" in horizontaler navigation

Offensichtlich hast Du noch nicht so ganz verstanden, was die enzelnen Codeelemente in CSS bedeuten. schau mal au der Seite css4you, da wird alles schön erklärt!

Und am Besten verwendest Du einen Editor, der Dir so (Tipp-)Fehler anzeigt, werd mal schaun, ob ich da nen Freewaretipp für Dich find!

B.G. Solla

 

[Eliteplayer]

AW: Probleme mit "li :activate" in horizontaler navigation

Und am Besten verwendest Du einen Editor, der Dir so (Tipp-)Fehler anzeigt, werd mal schaun, ob ich da nen Freewaretipp für Dich find!

ich will auch

 

[fakerer]

AW: Probleme mit "li :activate" in horizontaler navigation

da kann ich nur netbeans empfehlen

 

[Solla]

AW: Probleme mit "li :activate" in horizontaler navigation

TopStyle Lite is auch ned schlecht!

B.G. Solla

 

[wotan100]

AW: Probleme mit "li :activate" in horizontaler navigation

Mann.. ich bin heute schon soo verwirrt! Hab den falschen Code reingestellt!*g
Tut mir leid!
aslo ich zeig euch wie weit ich "eigentlich bin.

#navi{
 
 width:960px;
 height:35px;
 margin:114px auto;
 /*background:url(../navtest.png);*/
 background:#666;
 color:#0F6;
}
#navi ul{
 margin:0px;
 padding:0px 0px 0px 20px;
 list-style-type:none;
}
#navi li{
 width:80px;
 float:left;
 margin:0;
 padding:0;
 text-align:center;
 /*border-right:1px solid #ccc;*/
}
#navi a,
 
#navi a:link,
#navi a:visited
{
 height:22px;
 display:block;
 text-decoration:none;
 color:#fff;
 padding:8px 0 0 0;
 vertical-align:middle;
 
}
#navi a:hover
{
 height:35px;
 /*background:url(../new.png) no-repeat;*/
 background:#0F9;
 color:#39f;
 font-size:14px;
}
#navi li.active
{
 height:22px;
 margin:0;
 padding:22px 0px 0px 0px;
 background:#0f9;
 
}

Könnte mir bitte jemand den so Code verbessern, dass beim Click auf den Link der bg:#0f9??
lg

 

[Solla]

AW: Probleme mit "li :activate" in horizontaler navigation

Mach mal an Doppelpunkt statt

#navi li.active { height:22px; margin:0; padding:22px 0px 0px 0px; background:#0f9; ..........

a.active durch a:active ersetzen

B.G.
Solla

 

[wotan100]

AW: Probleme mit "li :activate" in horizontaler navigation

Danke, Fakerer und Solla, jedoch würde mir in diesem Fall eine Hilfestellung in Form eines Tuts oder einer Verbesserung mehr helfen. Ich würde mich sehr freuen wenn jemand etwas für mich hätte!

 

[molly_68]

AW: Probleme mit "li :activate" in horizontaler navigation

Die Hilfestellung in Form von Verbesserungen hast du doch bekommen, oder?

Ansonsten :http://www.ohne-css.gehts-gar.net/0016.php

 

[wotan100]

AW: Probleme mit "li :activate" in horizontaler navigation

Hey molly!
Ja aus dem Codeausschnitt bin ich nicht gerade schlau geworden.....
Aber ich hab mir deinen Link jetzt durchgesehen und das sieht echt gut aus mit dem

<li id="aktuell"><a href="#">Seite 1</a></li>

Ich glaub das ist genau dass was ich gesucht habe! Vielen dank, auch an alle anderen!