Ergebnis 1 bis 4 von 4

Thema: Problem mit list-style-type in Navigation

  1. #1
    Youngster
    Registriert seit
    05.08.2009
    Beiträge
    12
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard 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
    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);}
    und hier der HTML-Ausschnitt:
    HTML-Code:
    <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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von markise (09.02.2010 um 14:34 Uhr)

  2. #2
    Meister(in) Avatar von lukasn
    Registriert seit
    23.02.2008
    Ort
    Schweiz
    Alter
    27
    Beiträge
    491
    Danke
    2
    Bekam 12 mal "Danke" in 11 Postings

    Standard AW: Problem mit list-style-type in Navigation

    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.
    Geändert von lukasn (09.02.2010 um 14:39 Uhr)

  3. #3
    Macrosdesign
    Gast

    Standard AW: Problem mit list-style-type in Navigation

    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-Code:
    <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
    Geändert von Macrosdesign (09.02.2010 um 18:52 Uhr)

  4. #4
    Youngster
    Themenstarter

    Registriert seit
    05.08.2009
    Beiträge
    12
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Problem mit list-style-type in Navigation

    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);}
    HTML:
    HTML-Code:
    <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

Ähnliche Themen

  1. <ul><list> Problem: Im IE andere Darstellung
    Von Unregistriert im Forum HTML & CSS Forum
    Antworten: 12
    Letzter Beitrag: 17.10.2008, 20:12
  2. List - Style Abstände
    Von Billbos im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 07.07.2008, 03:03
  3. Problem mit Formular Input Type File
    Von csigg im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 10.08.2007, 15:57
  4. list-style-image..?
    Von wurmax im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 03.06.2007, 16:10
  5. List-Style-Image wird im IE angezeigt, im firefox nicht
    Von liebhab-baer im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 13.10.2006, 22:13

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •