Problem mit list-style-type in Navigation

markise

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

Code

.mynav1_3{  
            width: 120px;            
            float: left;              
            margin-left:-20px;
            margin-top:20px;            
            font: 95% Verdana;
        }
.mynav1_3 ul li{line-height: 1.23em;}
.mynav1_3 ul li.active{line-height: 1.23em;list-style-image:url(../img/navi/nav_active.jpg);}
.mynav1_3 ul li:focus{line-height: 1.23em;list-style-image:url(../img/navi/nav_active.jpg);}
.mynav1_3 ul li:hover{line-height: 1.23em;list-style-image:url(../img/navi/nav_active.jpg);}
.mynav1_3 ul li:active{line-height: 1.23em;list-style-image:url(../img/navi/nav_active.jpg);}
.mynav1_3 ul li:visited{line-height: 1.23em;list-style-image:url(../img/navi/nav_active.jpg);}

Alles anzeigen

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

lukasn

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.

Macrosdesign

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

markise

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:

Code

.mynav1_3{  
            width: 120px;            
            float: left;              
            margin-left:-20px;
            margin-top:20px;            
            font: 95% Verdana;
            line-height:1.23 em;
        }
.mynav1_3 ul li{line-height: 1.23em;}
.mynav1_3 ul li.active{line-height: 1.23em;list-style-image:url(../img/navi/nav_active.jpg);}
.mynav1_3 ul li:link{line-height: 1.23em;list-style-image:url(../img/navi/nav_active.jpg);}
.mynav1_3 ul li:visited{line-height: 1.23em;list-style-image:url(../img/navi/nav_active.jpg);}
.mynav1_3 ul li:focus{line-height: 1.23em;list-style-image:url(../img/navi/nav_active.jpg);}
.mynav1_3 ul li:hover{line-height: 1.23em;list-style-image:url(../img/navi/nav_active.jpg);}
.mynav1_3 ul li:active{line-height: 1.23em;list-style-image:url(../img/navi/nav_active.jpg);}

Alles anzeigen

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

Tags