Problem mit list-style-type in Navigation

    Hallo,

    ich hoffe, mir kann jemand helfen. Habe ein kleines Problem in meiner Navi.
    Ich habe eine vertikale Navigation. Der gerade aktive Link soll durch ein kleines rotes Quadrat gekennzeichnet werden. Genauso wie beim hover und focus.
    Beim Hover funktioniert das auch. Beim active allerdings nicht. Hoffe, mir kann da jemand helfen.

    Hier der entsprechende CSS-Ausschnitt

    und hier der HTML-Ausschnitt:

    HTML
    <ul>          
                <li><a href="index.html">Home</a></li>
                <li><a href="news.html">News</a></li>
                <li  class="active" ><a href="unternehmen.html"><nobr>Unternehmen</nobr></a></li>                        
                <li><a href="gewerke.html">Gewerke</a></li>
                <li><a href="projekte.html">Projekte</a></li>            
                <li><a href="links.html">Links</a></li>            
                <li><a href="kontakt.html">Kontakt</a></li>            
            </ul>

    Weiß jemand, was ich hier falsch mache?

    Gruß,

    Markise

    Einmal editiert, zuletzt von markise (9. Februar 2010 um 13:34)

    Code
    list-style-image:url([../img/navi/nav_active.jpg])

    Versuchs mal ohne die eckigen Klammern...
    Ausserdem solltest du die zweite Definition von a:active Enfernen, denn wenn beide Definitionen gleich viele "Punkte" haben (ist hier der Fall) wird die, die als letztes im Stylesheet steht beachtet.

    -Lukas

    EDIT: Sorry, hab grad gesehen dass die erste Definition ja eine Klasse ist, zum testen nehm ich an?
    Noch ein EDIT: Hat wohl nix mit dem Problem zu tun, aber wofür du den <nobr>-tag da drin hast versteh ich auch nicht ganz, ist ja nur ein Wort.

    2 Mal editiert, zuletzt von lukasn (9. Februar 2010 um 13:39)

    Also du willst das der Link der Seite auf der man gerade ist aktiv ist oder?

    wenn ja dann einfach den Link durch einen <span> ersetzen auf der aktiven Seite:

    HTML
    <ul>          
    <li><a href="index.html">Home</a></li>
    <li><a href="news.html">News</a></li>
    <li><span>Unternehmen</span></li>                        
    <li><a href="gewerke.html">Gewerke</a></li>
    <li><a href="projekte.html">Projekte</a></li>            
    <li><a href="links.html">Links</a></li>            
    <li><a href="kontakt.html">Kontakt</a></li>            
</ul>

    und dem <span> per CSS bestimmte Eigenschaften zuweisen:

    Code
    ul li span {
 font-size:15px;
 font-weight:bold;
}


    Warum keine Klasse wie zb. ".active" verwenden ?

    Ganz einfach da in einem (X)HTML Document ein Link nicht auf sich selber verweisen sollte.


    PS. Als Linknamen nach Möglichkeit nur in DEUTSCH oder nur in ENGLISCH benennen und nicht gemischt.
    Dh. zb. Home wird zu Startseite

    Dann wäre natürlich das Thema Barrierefreie Navigation interressant aber ist erstmal egal sonst hier mal lesen:
    http://www.einfach-fuer-alle.de/artikel/menues/
    oder
    http://testen.bitv-test.de/index.php?a=dl

    3 Mal editiert, zuletzt von Macrosdesign (9. Februar 2010 um 17:52)

    Hallo,

    danke für die schnellen Antworten! Auch gut der Tipp gegen den Link auf sich selber.
    Die Sache mit dem <span> funktionierte irgendwie nicht richtig. Vllt. hab ich da auch was verkehrt gemacht.

    Ich habe die Reihenfolge der Pseudoklassen geändert und den Link bei der aktiven Seite entfernt. Meine Lösung ist folgende:

    CSS:

    HTML:

    HTML
    <ul>          
                <li><a href="index.html">Home</a></li>
                <li><a href="news.html">News</a></li>
                <li class="active"><nobr>Unternehmen</nobr></li>                        
                <li><a href="gewerke.html">Gewerke</a></li>
                <li><a href="projekte.html">Projekte</a></li>            
                <li><a href="links.html">Links</a></li>            
                <li><a href="kontakt.html">Kontakt</a></li>            
            </ul>

    Es funktioniert. Also schönen Dank für eure Hilfe.

    Gruß,

    Markise