Antworten zum Thema „[CSS] Navigation mit last-child“

[LovelyNearly]

Liebe Bastler,

ich habe ein kleines Problem mit meiner Navigation. Ich möchte die Ansicht meiner Website für kleinere Ansichten optimieren und will dafür ein zweites Stylesheet anlegen. Die Navigation ist soweit eigentlich geglückt, allerdings machen mir die unterpunkte zu schaffen und ich sehe vor lauter ul li und a's den Code nicht mehr.
Ich habe also Navigationslinks mit Unterpunkten, die ich in der Desktopversion nur beim Hovern anzeigen lasse, aber in der Iphone-Version, der usability zuliebe, gleich anzeigen möchte. Jetzt wo die Links alle untereinander stehen, verdecken die Unterpunkte natürlich den letzten Punkt. Ich habe versucht das mit dem last-child zu lösen, allerdings wählt dieser eben nicht nur das last child an, sondern witzigerweise auch die ersten 3 (nicht 4) anderen Links. Ich dachte, dass es vielleicht an der vererbung liegt und habe versucht entgegen zu wirken, aber auch das hat nichts gebracht.

Momentan sieht es so aus:

Und hier ist der Code dafür. Kann mir vielleicht jemand sagen was ich da falsch gemacht habe bzw wo mein Denkfehler liegt?

nav {
    position: relative;
    width: 100%;
    z-index: 1;
    margin: 0 auto;
    color: #000000;
    }

    nav ul {
        padding: 0px;
        margin: 0px;
        }

    nav ul,nav ul li{
        background-color: #FFF; /* bg all ohne Hover */
        }

            nav ul li {
            list-style: none;
            float:left;
            }

                nav ul li:hover > ul {
                    visibility: visible;
                    }

            nav ul li ul{
                position: absolute;
                display:block;
                width: 450px;
                visibility: visible;
                padding:0px;
                margin: 0px;
                }


            nav ul li a {
                display:block;
                width: 450px;
                text-decoration: none;
                color: #000000;
                padding: 10px 0px 10px 5px;
                }          
              
            nav ul li a:last-child {
                margin-top:60px;
                }          
                          
                nav ul li:hover > a {
                display:block;
                width: 450px;
                background: #607C99;
                color: #FFFFFF;
                }
              
          
                nav ul li ul li a {
                display:block;
                width: 450px;
                color: #607C99;
                padding-left: 20px;
                border: 0px;
                }
              
                nav ul li ul li a:last-child {
                margin-top:0px;
                }
              
                nav ul li ul li:last-child {
                margin-top:0px;
                }  
                              
                nav ul li ul li a:hover{
                    color: #FFF;
                    background-color: #81B1C6;
                    }

Liebe Grüße

 

[Myhar]

CSS ohne den zugehörigen HTML-Code ist so sinnvoll, wie wenn du zum Mechaniker gehst und ihm sagst: "Mein Auto ist kaputt, warum geht es nicht? Achja, es ist übrigens rot."

 

[LovelyNearly]

Naja, da es eine ganz normale Listennavigation ist (darum das ul und li) Dachte ich es sei klar, was was ist. Hat sich mittlerweile aber erldigt. Ich hab einfach dem Link Karriere eine Klasse gegeben und ein margin-top eingefügt.
Trotzdem danke für die Antowrt, beim nächsten Mal werde ich den HTML Code dazu posten.

Liebe Grüße

 

[Myhar]

Wenn es wirklich ein Standardaufbau einer Navigation ist, ddann ist idese Anweisung recht sinnlos,denn damit sprichst du dann nämlich alle Links in der Navigation an (solltest du auch sehen, wenn du die Seite mit Firebug analysierst):

nav ul li a:last-child {

 

[LovelyNearly]

Dann habe ich die Funktion wohl nicht richtig verstanden. Sollte sie nicht nur die letzte ansprechen (Ich dachte darum wäre es last-child) Warum genau spricht es denn alle an?

 

[Myhar]

Dann habe ich die Funktion wohl nicht richtig verstanden

Das weiß ich nicht, da ich deinen HTML-Aufbau immer noch nicht kenne, aber ich, wie von dir gewünscht, von diesem Aufbau ausgehe:

<ul>
<li><a /> </li>
<li><a /> <ul> <li> <a /> </li> </ul></li>
</ul>

Das CSS nimmt das letzte A-Element (last-child) eines Listenelements. Und nachdem jedes Listenelement genau 1 A-Element hat, ist dieses natürlich das letzte Element.
Du suchst eventuell nur das A-Element des letzten Listenelements? Dann musst du das letzte Listenelement auswählen: li:last-child a

 

[LovelyNearly]

Ahh, da war also der Denkfehler! Vielen lieben Dank fürs auklären. Hatte nicht daran gedacht, dass man ja nach last-child auch noch etwas setzen kann. Vielen Dank!