tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
10
ZUGRIFFE
497
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. #1
    julchen julchen ist offline Mitglied Platin
    Registriert seit
    Mar 2004
    Beiträge
    576
    Hallo,
    ich möchte für folgende Verschachtelung eine CSS Klasse vergeben.

    <div id="menu_top">
    <ul id="navigation">
    <li>wert
    <ul>
    <li><a class="navigation_sub" href="#url">Link1</li>
    </ul>
    </li>
    </ul>
    </div>

    Das "a href ..." soll bei normalem Link eine andere Formatierung bekommen, als bei hover. Wie erstelle ich dazu die verschachtelte CSS Klasse?

    Für das normale "a href ..." würde ich das machen:

    #navigation li ul li a.navigation_sub {Werte}

    Wie sieht die Klasse bei hover aus?

    Gruss
    Julchen
     

  2. #2
    CPoly CPoly ist offline Mitglied Weizenbier
    tutorials.de Premium-User
    Registriert seit
    Sep 2009
    Beiträge
    2.445
    Falls ich dich richtig verstanden habe, dann so

    Code css:
    1
    2
    3
    
    #navigation a.navigation_sub {}
     
    #navigation a.navigation_sub:hover {}

    Ich habe den Selektor* noch etwas verkürzt.

    *Ich denke mit "Klasse" meinst du "Selektor".
     

  3. #3
    julchen julchen ist offline Mitglied Platin
    Registriert seit
    Mar 2004
    Beiträge
    576
    Hallo,
    wie würde das ganze dann ungekürzt aussehen.

    Die Klasse mit

    #navigation li ul li a.navigation_sub {Werte}

    funktioniert ja. Allerdings fehlt mir wie gesagt, dazu die Formatierung für das hover. Also wenn möglich bitte ungekürzt in der Form von ... li ul li ... mit hover sonst hab ich etwas Probleme mit dem Verständnis.

    Gruss
    Julchen
     

  4. #4
    Avatar von Lime
    Lime Lime ist offline frisch fruchtig
    Registriert seit
    Jul 2011
    Beiträge
    369
    Idealerweise formatieren wir erst mal deinen Code:

    PHP-Code:
    <div id="menu_top">
       <
    ul id="navigation">
          <
    li>wert
              
    <ul>
                 <
    li><class="navigation_sub" href="#url">Link1</a></li>
             </
    ul>
          </
    li>
        </
    ul>
    </
    div
    Der Code für einen Hover des Links müsste dann sein:
    Code :
    1
    
    #navigation li ul li a:hover { }
    Du musst ja eigentlich nur der Struktur folgen, bis du zu deinem Zielobjekt kommst. Mal abgesehen davon, dass du hier das </a> Tag vergessen hattest...
    Theoretisch brauchst du die Klasse navigation_sub gar nicht, kannst sie aber noch einbauen...
     

  5. #5
    julchen julchen ist offline Mitglied Platin
    Registriert seit
    Mar 2004
    Beiträge
    576
    Hallo,
    danke schon mal. Aber leider funktioniert das so nicht mit dem Code. Beim hover erreiche ich nicht den gewünschten Effekt. Er übernimmt die Eigenschaften, welche für das a Tag defniert sind.
     

  6. #6
    Avatar von Lime
    Lime Lime ist offline frisch fruchtig
    Registriert seit
    Jul 2011
    Beiträge
    369
    Logischerweise musst du zuvor die Eigenschaften vom a Tag ändern.... hiermit
    Code :
    1
    
    #navigation li ul li a { }

    Oder wo genau liegt das Problem?
     

  7. #7
    julchen julchen ist offline Mitglied Platin
    Registriert seit
    Mar 2004
    Beiträge
    576
    Hallo,
    was heisst, ich muss die Eigenschaft vom a Tag ändern?

    Ich möchte folgendes erreichen:

    Das im normalen a Tag eine andere color ist als bei hover.

    Mein Code sieht so aus:

    #navigation li ul li a.navigation_sub {color:#fff; padding:15px 20px 0 10px; background-image:none}

    für hover hätte ich dann lt. deinem Tipp:
    #navigation li ul li a:hover {color:#a4ca400; padding:15px 20px 0 10px; background-image:none; text-decoration:underline; }

    So gehts aber leider nicht. Die Farbe bei hover ist immer noch weiss und nicht der neue Farbcode.
     

  8. #8
    CPoly CPoly ist offline Mitglied Weizenbier
    tutorials.de Premium-User
    Registriert seit
    Sep 2009
    Beiträge
    2.445
    Das hier ist kein gültiger Farbcode! #a4ca400
     

  9. #9
    julchen julchen ist offline Mitglied Platin
    Registriert seit
    Mar 2004
    Beiträge
    576
    Oh Mann! Sorry, du hast natürlich Recht. Ich habs nicht bemerkt und hab mich die ganze Zeit gewundert, warum mein Code nicht funktioniert.

    Danke Dir!

    Jetzt hab ich aber noch ein anderes Problem, was aber ähnlich ist. Ich bekomme beim hover auf der obersten Ebene der Navigation das Background-Image nicht gelöscht, bei den Links welche nicht den kleine Pfeil nach unten haben zum Untermenü. Bei denen wo kein Untermenü hinterlegt ist, soll bei hover kein Background-image in Form eine kleinen Pfeils erscheinen. Wo liegt da jetzt der Fehler.

    Sorry, aber ich hatte mir den Code bei cssplay heruntergeladen und etwas umgestrickt, so das sich diesen jetzt nicht mehr hinbekomme. Ich habe auch alle Klassenbezeichnungen geändert. Da wo navigation stand ist jetzt dropline und wo navigation_sub steht ist jetzt down_sub.

    Hier ist die Beispielseite:

    http://www.plastisches.de/becker/index.html

    Kannst du mir nochmal helfen?

    Dank Dir!!

    Gruss
    Julchen
    Geändert von julchen (31.01.12 um 23:57 Uhr)
     

  10. #10
    CPoly CPoly ist offline Mitglied Weizenbier
    tutorials.de Premium-User
    Registriert seit
    Sep 2009
    Beiträge
    2.445
    Das kommt von dieser Regel

    Code css:
    1
    
    #dropline li:hover > a {color:#a4c400; background:url(../images/down_over.gif) no-repeat right center;}


    Die sollte sich natürlich nur auf Links beschränken, die auch Untermenüs haben.

    Code css:
    1
    2
    3
    
    #dropline li:hover > a {color:#a4c400;}
     
    #dropline li:hover > a.down {background:url(../images/down_over.gif) no-repeat right center;}
     

  11. #11
    julchen julchen ist offline Mitglied Platin
    Registriert seit
    Mar 2004
    Beiträge
    576
    Jepp, du hast Recht! Danke Dir!
     

Ähnliche Themen

  1. verschachtelter JOIN
    Von Jacy im Forum Relationale Datenbanksysteme
    Antworten: 5
    Letzter Beitrag: 13.07.11, 00:27
  2. Update mit verschachtelter Where Bedingung
    Von deostift im Forum Relationale Datenbanksysteme
    Antworten: 1
    Letzter Beitrag: 15.12.06, 22:46
  3. Pfad-Angabe-Frage
    Von maazus im Forum PHP
    Antworten: 1
    Letzter Beitrag: 30.04.05, 12:34
  4. verschachtelter reload
    Von Metapher im Forum Javascript & Ajax
    Antworten: 2
    Letzter Beitrag: 24.04.05, 17:03
  5. Frage zu URL-Angabe in CSS
    Von Ossi im Forum HTML & XHTML
    Antworten: 4
    Letzter Beitrag: 07.01.03, 17:48