Listenpunkte hovern

[demonhawk]

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

[Auge]

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

[demonhawk]

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)?

[Hopsel]

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

[demonhawk]

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?

[Hopsel]

Hi demonhawk!

So?

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

MfG H☼psel

[Cheatah]

Hi,

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

wieso?

Cheatah

[Ashura]

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

[Blaubart]

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.

[Ashura]

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

[Cheatah]

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

[willie.de]

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

[Axel Richter]

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

[Blaubart]

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.

[willie.de]

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

[Ashura]

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

[Cheatah]

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

[demonhawk]

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;
}

[Auge]

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

[demonhawk]

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

[Auge]

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

[Jens Müller]

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