Anzeige

[CSS] Navigation mit last-child

[CSS] Navigation mit last-child | PSD-Tutorials.de

Erstellt von LovelyNearly, 22.02.2014.

  1. LovelyNearly

    LovelyNearly Nicht mehr ganz neu hier

    Dabei seit:
    02.09.2006
    Beiträge:
    51
    Geschlecht:
    weiblich
    Software:
    Photoshop CS3
    [CSS] Navigation mit last-child
    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:
    [​IMG]

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

    Code (Text):
    1. nav {
    2.     position: relative;
    3.     width: 100%;
    4.     z-index: 1;
    5.     margin: 0 auto;
    6.     color: #000000;
    7.     }
    8.  
    9.     nav ul {
    10.         padding: 0px;
    11.         margin: 0px;
    12.         }
    13.  
    14.     nav ul,nav ul li{
    15.         background-color: #FFF; /* bg all ohne Hover */
    16.         }
    17.  
    18.             nav ul li {
    19.             list-style: none;
    20.             float:left;
    21.             }
    22.  
    23.                 nav ul li:hover > ul {
    24.                     visibility: visible;
    25.                     }
    26.  
    27.             nav ul li ul{
    28.                 position: absolute;
    29.                 display:block;
    30.                 width: 450px;
    31.                 visibility: visible;
    32.                 padding:0px;
    33.                 margin: 0px;
    34.                 }
    35.  
    36.  
    37.             nav ul li a {
    38.                 display:block;
    39.                 width: 450px;
    40.                 text-decoration: none;
    41.                 color: #000000;
    42.                 padding: 10px 0px 10px 5px;
    43.                 }          
    44.              
    45.             nav ul li a:last-child {
    46.                 margin-top:60px;
    47.                 }          
    48.                          
    49.                 nav ul li:hover > a {
    50.                 display:block;
    51.                 width: 450px;
    52.                 background: #607C99;
    53.                 color: #FFFFFF;
    54.                 }
    55.              
    56.          
    57.                 nav ul li ul li a {
    58.                 display:block;
    59.                 width: 450px;
    60.                 color: #607C99;
    61.                 padding-left: 20px;
    62.                 border: 0px;
    63.                 }
    64.              
    65.                 nav ul li ul li a:last-child {
    66.                 margin-top:0px;
    67.                 }
    68.              
    69.                 nav ul li ul li:last-child {
    70.                 margin-top:0px;
    71.                 }  
    72.                              
    73.                 nav ul li ul li a:hover{
    74.                     color: #FFF;
    75.                     background-color: #81B1C6;
    76.                     }
    Liebe Grüße
     
    Zuletzt bearbeitet: 22.02.2014
    #1      
  2. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.048
    Geschlecht:
    männlich
    Ort:
    Ö
    [CSS] Navigation mit last-child
    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."
     
    #2      
  3. LovelyNearly

    LovelyNearly Nicht mehr ganz neu hier

    Dabei seit:
    02.09.2006
    Beiträge:
    51
    Geschlecht:
    weiblich
    Software:
    Photoshop CS3
    [CSS] Navigation mit last-child
    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
     
    #3      
  4. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.048
    Geschlecht:
    männlich
    Ort:
    Ö
    [CSS] Navigation mit last-child
    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):

     
    #4      
  5. LovelyNearly

    LovelyNearly Nicht mehr ganz neu hier

    Dabei seit:
    02.09.2006
    Beiträge:
    51
    Geschlecht:
    weiblich
    Software:
    Photoshop CS3
    [CSS] Navigation mit last-child
    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?
     
    #5      
  6. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.048
    Geschlecht:
    männlich
    Ort:
    Ö
    [CSS] Navigation mit last-child
    Das weiß ich nicht, da ich deinen HTML-Aufbau immer noch nicht kenne, aber ich, wie von dir gewünscht, von diesem Aufbau ausgehe:
    HTML:
    1.  
    2. <ul>
    3. <li><a /> </li>
    4. <li><a /> <ul> <li> <a /> </li> </ul></li>
    5. </ul>
    6.  
    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
     
    #6      
    LovelyNearly gefällt das.
  7. LovelyNearly

    LovelyNearly Nicht mehr ganz neu hier

    Dabei seit:
    02.09.2006
    Beiträge:
    51
    Geschlecht:
    weiblich
    Software:
    Photoshop CS3
    [CSS] Navigation mit last-child
    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!
     
    #7      
x
×
×