CSS-Navi soll zeigen: Hier bin ich

    Liebes Forum,

    ich bin leider noch der totale Anfänger im Webdesign und hätte gerne euren werten Rat.

    Ich habe eine reine CSS-Navi und möchte dem Besucher durch den gehighlighteten Button zeigen, auf welcher Seite er ist. Was muss ich in das CSS-Stylesheet noch einfügen oder wo ist der Fehler, dass es bei mir nicht funktioniert. Irgendwo habe ich da noch einen Wurm drin ...
    Für einen Tipp, den auch ein Anfänger versteht, wäre ich sehr dankbar.

    Hier der CSS-Code:

    #navi ul {
    list-style-type: none;
    margin: 0px;
    padding-left: 8px;
    }
    #navi ul li {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 1px;
    margin-left: 0px;
    }
    #navi ul li a:link, #navi li a:visited {
    color: #FC9;
    background-color: #9f5d9d;
    text-decoration: none;
    text-align: right;
    display: block;
    border-left-color: #C09;
    width: 92px;
    border-left-width: 10px;
    border-left-style: solid;
    font-size: 0.75em;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 2.4em;
    padding-right: 7px;
    text-transform: uppercase;
    }
    #navi ul li a:hover, #navi ul li a:active, #navi ul li a:focus a:visited {
    color: #FF9;
    background-color: #F69;
    border-left-width: 12px;
    border-left-style: solid;
    border-left-color: #F66;
    }

    ja geht halt auch mit ner wechselnden id...
    aber ich mir sträuben sich die nackenhaare wenn eine ID nicht nur einem objekt zugewiesen wird.
    eine ID soll ja nur 1 mal pro dokument vergeben werden- klar ist das hier auch der fall, jedoch wird die id ja zu einem anderen objekt "weitergereicht".
    ich bin da für strenge reglements und vergebe bei sowas lieber ne klass, statt ne wechselnde id, is ja grundlegend die gleiche technik ;)

    des hängt ja vom design ab. wenn du ein eindimensionales menü hast dann kann
    schlecht ne seite mehr als 1x aufgerufen sein. anders ises bei menüs mit untermenüs,
    vorallem wenn sie dann des gleiche hilightning haben....

    Ich habe es jetzt mal mit ner klasse gemacht. Passiert aber leider noch nicht, das der Button anzeigt, wo ich bin, wenn die Maus wieder weg ist. Muss noch ein Fehler drin sein!

    <div id="navi">
    <ul>
    <li><a class="aktiv" href="index.html">Home </a></li>
    <li><a href="osteopathie.html">Osteopathie</a></li>
    <li><a href="indikationen.html">Indikationen</a></li>
    <li><a href="ueber_mich.html">über mich</a></li>
    <li><a href="kontakt.html">Kontakt</a></li>
    <li><a href="links.html">Links</a></li>
    <li><a href="impressum.html">Impressum</a></li>
    </ul>
    </div>

    div#navi > a:active {
    background-color: #6C9;
    }

    und wo is die definition von "aktiv" ?

    du musst die class "aktiv" schon einzeln definieren.
    unabhängig von den ganzen a:active, hover usw...

    Meine Nerven sind nicht mehr die Besten. Ich sehe den Fehler nicht. Ich mache genau, was ihr mir ratet. Übersehe ich noch was?
    Hier der aktuelle Code:

    HTML_______________

    <div id="navi">
    <ul>
    <li><a class="aktiv" href="index.html">Home </a></li>
    <li><a href="osteopathie.html">Osteopathie</a></li>
    <li><a href="indikationen.html">Indikationen</a></li>
    <li><a href="ueber_mich.html">über mich</a></li>
    <li><a href="kontakt.html">Kontakt</a></li>
    <li><a href="links.html">Links</a></li>
    <li><a href="impressum.html">Impressum</a></li>
    </ul>
    </div>

    CSS______________

    #navi ul {
    list-style-type: none;
    margin: 0px;
    padding-left: 8px;
    }
    #navi ul li {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 1px;
    margin-left: 0px;
    }
    #navi ul li a:link, #navi li a:visited {
    color: #FC9;
    background-color: #9f5d9d;
    text-decoration: none;
    text-align: right;
    display: block;
    border-left-color: #C09;
    width: 92px;
    border-left-width: 10px;
    border-left-style: solid;
    font-size: 0.75em;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 2.4em;
    padding-right: 7px;
    text-transform: uppercase;
    }
    #navi ul li a:hover, #navi ul li a:active, #navi ul li a:focus a:visited {
    color: #FF9;
    background-color: #F69;
    border-left-width: 12px;
    border-left-style: solid;
    border-left-color: #F66;
    }

    div#navi a:active {
    background-color: #6C9;
    }

    .active { background-color:#6F9;
    }

    Dein HTML:

    Code
    <li><a class="aktiv" href="index.html">Home </a></li>

    Dein CSS:

    Code
    div#navi a:active {
background-color: #6C9;
}


.active { background-color:#6F9;
}


    Das siehst du alleine ;)

    //Edit: Das müssen Sekunden gewesen sein.


    Zitat von sejuma

    Link der geöffneten Seite hervorheben

    Dieser Link hats dann gebracht. Alles andere war Frickelei und ohne Ergebnisse. Warum es mit Klasse nicht funktioniert hat sondern mit #id, weiß ich leider nicht.

    So sieht es jetzt im HTML aus:
    <li id="active"><a href="impressum.html">Impressum</a></li>

    und im CSS dann so:
    #navi #active a { background-color:#F69;

    Jetzt funktioniert es so jedenfalls!

    Danke an alle, die mir so freundliche Hilfe gegeben haben.
    Das ist meine erste Homepage. Gar nicht einfach zu lernen.

    Premker

    wenn du die class "aktiv" nennst, aber in der css "active" schreibst
    kanns nunmal nicht funktionieren. und wennst des net siehst biste
    wohl blind :|

    Zitat von synaptic

    es klappt mit class genauso...
    man muss es halt nur konsequent richtig machen :)

    synaptic hat vollkommen recht, wobei ich auch eher eine Klasse nehmen würde

    Optimal finde ich die verlinkte Anleitung schon deshalb nicht, weil man dort immer den Deppenlink hat (Link der auf sich selber zeigt), wenn ich das richtig gesehen habe.
    Das ließe sich leicht vermeiden, wenn man bei der aktuellen Seite a gegen strong austauscht und dem strong die Klasse gibt.

    Noch besser wäre es, wenn man die navi ohne Deppenlink includen könnte. Das spart erheblich Schreibarbeit. ;)