demonhawk: Listenpunkte hovern

Hallo Leute,

ich habe folgendes Problem: ich möchte eine navigation so umsetzen, dass die listenpunkte im normalzustand ausgeschaltet sind, bei hover und beim momentan aktuell aktiven navigationspunkt soll der listenpunkt erscheinen.

hier mal mein versuch:

#nav {
 line-height: 16px;
 font-family: Georgia, "Times New Roman", Times, serif;
 font-size: 12px;
 line-height: 15px;
}

.nav a:link {
 color: #666666;
 list-style-type: none;
 }
li a:visited {
 color: #666666;
 list-style-type: none;
 }
li a:hover {
 color: #000000;
 list-style-type: circle;
 }

aber irgendwie bekomme ich es nicht hin....entweder sind die punkte immer weg oder immer da.

Tom

  1. Hallo

    ich habe folgendes Problem: ich möchte eine navigation so umsetzen, dass die listenpunkte im normalzustand ausgeschaltet sind, bei hover und beim momentan aktuell aktiven navigationspunkt soll der listenpunkt erscheinen.

    #nav {
    line-height: 16px;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 12px;
    line-height: 15px;
    }

    Welches Element ist #nav und warum zwei unterschiedliche Angaben zu line-height?

    .nav a:link {
    color: #666666;
    list-style-type: none;
    }
    li a:visited {
    color: #666666;
    list-style-type: none;
    }
    li a:hover {
    color: #000000;
    list-style-type: circle;
    }

    Du wendest list-style-type auf den Link (<a>) und nicht auf den Listenpunkt (<li>) an. Mit li:hover { list-style-type:circle; } wärst du erfolgreich, allerdings nicht im MSIE, da der :hover nur auf Links (<a>) anwenden kann.

    Tschö, Auge

    --
    Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
    (Victor Hugo)
    Veranstaltungsdatenbank Vdb 0.1
    1. Du wendest list-style-type auf den Link (<a>) und nicht auf den Listenpunkt (<li>) an. Mit li:hover { list-style-type:circle; } wärst du erfolgreich, allerdings nicht im MSIE, da der :hover nur auf Links (<a>) anwenden kann.

      danke für die rasche antwort...
      also wenn der IE das sowieso nicht beherrscht, kann ich mir den ganzen aufwand ja schenken, oder gibt es da eine andere lösung (von grafischen mouseovers mal abgesehen)?

      1. Hi demonhawk!

        gibt es da eine andere lösung?

        Du könntest den Links ein passendes Hintergrundbild mitgeben, dass die Grafik eines Listenpunktes enthält. Per padding-left macht die Schrift dem Punkt platz.

        MfG H☼psel

        --
        "It's amazing I won. I was running against peace, prosperity, and incumbency."
        George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
        Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)
        1. Hi demonhawk!

          gibt es da eine andere lösung?

          Du könntest den Links ein passendes Hintergrundbild mitgeben, dass die Grafik eines Listenpunktes enthält. Per padding-left macht die Schrift dem Punkt platz.

          MfG H☼psel

          aahhh, stimmt, gute idee. :)
          d.h. ich hovere nicht den bildpunkt sondern die hintergrundgrafik.

          li a:hover {
           color: #000000;
           background-image (url.gif);
           }

          So?

          1. Hi demonhawk!

            So?

            Im Grunde schon.
            Nur selber kochen macht Spaß. :-)

            MfG H☼psel

            --
            "It's amazing I won. I was running against peace, prosperity, and incumbency."
            George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
            Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)
      2. Hi,

        also wenn der IE das sowieso nicht beherrscht, kann ich mir den ganzen aufwand ja schenken,

        wieso?

        Cheatah

        --
        X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
        X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
        X-Will-Answer-Email: No
        X-Please-Search-Archive-First: Absolutely Yes
  2. Hallo demonhawk.

    .nav a:link {
    color: #666666;
    list-style-type: none;
    }
    li a:visited {
    color: #666666;
    list-style-type: none;
    }
    li a:hover {
    color: #000000;
    list-style-type: circle;
    }

    Die list-style-*-Eigenschaften wirken nur auf Elemente, deren display-Eigenschaft auf den entsprechenden Wert (list-item) gesetzt wurde.

    Und da a-Elemente standardmäßig keine Listenpunkte haben, solltest du das list-style-type:none besser für die li-Elemente setzen, da das ganze sonst keine Wirkung zeigt.

    Im Opera gibt es aber ein Problem: er platziert den eingeblendeten Listenpunkt innerhalb des Links …

    Einen schönen Donnerstag noch.

    Gruß, Ashura

    --
    sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
    „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
    [HTML Design Constraints: Logical Markup]
    1. Hi Ashura.

      Und da a-Elemente standardmäßig keine Listenpunkte haben, solltest du das list-style-type:none besser für die li-Elemente setzen, da das ganze sonst keine Wirkung zeigt.

      Warum wenden eigentlich so viele Leute (auch hier) den list-style-type auf die _Items_ an und nicht auf die _Liste_? Wenn ich die Spezifikationen des W3Cs dazu richtig interpretiere, soll doch die Liste damit erreicht werden.

      1. Hallo Blaubart.

        Warum wenden eigentlich so viele Leute (auch hier) den list-style-type auf die _Items_ an und nicht auf die _Liste_?

        Das hat — zumindest bei mir — keinen bestimmten Grund.

        Wenn ich die Spezifikationen des W3Cs dazu richtig interpretiere, soll doch die Liste damit erreicht werden.

        Ja. Viele Wege führen nach Rom.

        Einen schönen Donnerstag noch.

        Gruß, Ashura

        --
        sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
        „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
        [HTML Design Constraints: Logical Markup]
      2. Hi,

        Warum wenden eigentlich so viele Leute (auch hier) den list-style-type auf die _Items_ an und nicht auf die _Liste_?

        weil die Items genau die Elemente sind, auf die die Eigenschaft wirkt und wirken soll?

        Wenn ich die Spezifikationen des W3Cs dazu richtig interpretiere, soll doch die Liste damit erreicht werden.

        Dann wende sie doch einfach auf das <body>-Element an. Sofern Du nicht zwischen drin die Kaskade unterbrichst, liefert das ebenfalls das gewünschte Ergebnis. Und die Beispiele, die das W3C warnend nennt, lassen keinesfalls den Schluss zu, es sei pauschal besser, list-style-Eigenschaften auf Listen anstatt auf ihre Items anzuwenden.

        Cheatah

        --
        X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
        X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
        X-Will-Answer-Email: No
        X-Please-Search-Archive-First: Absolutely Yes
      3. Hallö, Blaubart,

        Warum wenden eigentlich so viele Leute (auch hier) den list-style-type auf die _Items_ an und nicht auf die _Liste_? Wenn ich die Spezifikationen des W3Cs dazu richtig interpretiere, soll doch die Liste damit erreicht werden.

        Korrekt. Ich vermute, dass die Antwort Auge im aktuellen Thread gibt:

        Mit li:hover { list-style-type:circle; } wärst du erfolgreich, allerdings nicht im MSIE, da der :hover nur auf Links (<a>) anwenden kann.

        Grüße aus Leipzig
        willie

        --
        sh:( fo:| ch:? rl:( br:> n4:( ie:% mo:} va:} de:> zu:} fl:( ss:| ls:# js:|
        Selfcode Decoder
      4. Hallo,

        Warum wenden eigentlich so viele Leute (auch hier) den list-style-type auf die _Items_ an und nicht auf die _Liste_?

        Du meinst so?

        ul { list-style-type:disk; }

        oder

        ol { list-style-type:decimal-leading-zero; }

        Das würde diese Eigenschaft nur an die LIs vererben. Die ULs bzw, OLs können damit nichts anfangen.

        Wenn ich die Spezifikationen des W3Cs dazu richtig interpretiere, soll doch die Liste damit erreicht werden.

        Ja? http://www.w3.org/TR/CSS21/generate.html#lists:
        ...
        Applies to:   elements with 'display: list-item'
        ...

        UL und OL haben als Standardeinstellung meist display:block. Ein display:list-item als default für UL und OL ist mir noch nicht untergekommen.

        viele Grüße

        Axel

        1. Hi Axel.

          Applies to:   elements with 'display: list-item'

          UL und OL haben als Standardeinstellung meist display:block. Ein display:list-item als default für UL und OL ist mir noch nicht untergekommen.

          Jetzt wo du's sagst... Das heißt dann wohl, daß ich die Spezifikation _nicht_ richtig interpretiert habe. ;) Danke für die Klärung.

          1. Hallö nochmal,

            da hab ich dich wohl (ebenfalls fehlinterpretierender Weise) falsch verstanden. Ich dachte, dass sich deine Frage darauf bezog, wieso Eigenschaften wie list-style-type so oft auf die Kindelemente der Liste angewendet werden bzw. wieso alles, was mit :hover gemacht werden kann, häufig (nur) auf Verweise angewendet wird.

            Grüße aus Leipzig
            willie

            --
            sh:( fo:| ch:? rl:( br:> n4:( ie:% mo:} va:} de:> zu:} fl:( ss:| ls:# js:|
            Selfcode Decoder
    2. Hallo Gunnar™.

      Im Opera gibt es aber ein Problem: er platziert den eingeblendeten Listenpunkt innerhalb des Links …

      … was sich aber durch die explizite Angabe von „list-style-position:outside“ beheben lässt.

      Bleibt ein anderes Problemkind: Konqueror. Beim Einblenden der Listenpunkte verschiebt dieser die Links nach rechts …

      Einen schönen Donnerstag noch.

      Gruß, Ashura

      --
      sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
      „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
      [HTML Design Constraints: Logical Markup]
      1. Hi,

        Bleibt ein anderes Problemkind: Konqueror. Beim Einblenden der Listenpunkte verschiebt dieser die Links nach rechts …

        das ist doch immerhin besser, als würde er Dich mit Recht linken.

        Cheatah, SCNR

        --
        X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
        X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
        X-Will-Answer-Email: No
        X-Please-Search-Archive-First: Absolutely Yes
  3. Juhuu, hat funktioniert! thx Hopsel für den Tipp...

    hier mein Listing:

    ul#nav {
     line-height: 16px;
     font-family: Georgia, "Times New Roman", Times, serif;
     font-size: 12px;
     list-style-type: none;
     margin-left: 10px;
    }

    #nav a: {
     color: #666666;
     display:block;
     text-decoration:none;
     padding-left: 10px;
     background: #666666;
     }
    #nav a:visited {
     color: #666666;
     text-decoration:none;
     padding-left: 10px;
     }
    #nav a:active {
     color: #666666;
     text-decoration:none;
     padding-left: 10px;
     }
    #nav a:hover {
     color: #000000;
     background: url(pix/bullet.gif) no-repeat top left;
     padding-left: 10px;
     }

    #nav a#hier:link, #nav a#hier:visited, #nav a#hier:hover, #nav a#hier:active {
    background: url(pix/bullet.gif) no-repeat top left;
    color:#000000;
    }

    1. Hallo

      Juhuu, hat funktioniert! thx Hopsel für den Tipp...

      Na bitte.

      Zur Optimierung: padding-left:10px; bleibt ja in jedem zustand des links erhalten, damit der nicht "herumhüpft". Somit brauchst du es nur einmal, nämlich bei #nav a (ohne Doppelpunkt!) zu notieren.

      Der Link #nav a#hier ist eigentlich keiner, du bist ja als Besucher schon da (auf derjenigen Seite). Den braucht's nicht (als Link).

      Und die Reihenfolge der Pseudoklassen solltest du auch nocheinmal überprüfen.

      #nav a: {
      color: #666666;
      display:block;
      text-decoration:none;
      padding-left: 10px;
      background: #666666;
      }
      #nav a:visited {
      color: #666666;
      text-decoration:none;
      }
      #nav a:active {
      color: #666666;
      text-decoration:none;
      }
      #nav a:hover {
      color: #000000;
      background: url(pix/bullet.gif) no-repeat top left;
      }

      #nav a#hier:link, #nav a#hier:visited, #nav a#hier:hover, #nav a#hier:active {
      background: url(pix/bullet.gif) no-repeat top left;
      color:#000000;
      }

      Tschö, Auge

      --
      Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
      (Victor Hugo)
      Veranstaltungsdatenbank Vdb 0.1
      1. Der Link #nav a#hier ist eigentlich keiner, du bist ja als Besucher schon da (auf derjenigen Seite). Den braucht's nicht (als Link).

        Der soll den momentan aktuellen Navigationspunkt kennzeichnen. Funktioniert auch soweit

        1. Hallo

          Der Link #nav a#hier ist eigentlich keiner, du bist ja als Besucher schon da (auf derjenigen Seite). Den braucht's nicht (als Link).

          Der soll den momentan aktuellen Navigationspunkt kennzeichnen. Funktioniert auch soweit

          Ich meine, dass das kein _Link_ sein muss.

          Tschö, Auge

          --
          Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
          (Victor Hugo)
          Veranstaltungsdatenbank Vdb 0.1
  4. Hi,

    danke fuer deine Frage Sie hat mich an etwas erinnert, was ich
    schon laenger einmal versuchen wollte. Ein hover auf die Elemente
    <acronym> und <abbr> zu legen.

    acronym, abbr {
    font-weight : bold;
    font-variant : normal;
    cursor : help;
    }

    acronym:hover, abbr:hover {
    font-weight : bold;
    font-variant : normal;
    cursor : help;
    content : "Abk\00FC rzung bedeutet: " attr(title) ";
    }

    gruesse aus'm ruhrpott
      jens mueller

    --
    As long as a single mind remembers, as long as a single heart
    beats with passion, how can a dream die?
    \//_ Live long and prosper
    sh:( fo:) ch:| rl:° br:^ n4:| ie:% mo:| va:} de:> zu:) fl:( ss:) ls:> js:|