Ralf: Die <li>'s einer <ul> verschiedenene Klassen zuordnen

SELF-Forum

Die <li>'s einer <ul> verschiedenene Klassen zuordnen

Ralf
– Informationen zu den Bewertungsregeln

Hi,

wie kann ich einen Eintrag einer Liste einer anderen Klasse zuordnen als die restlichen Einträge?

  
  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">  
<html>  
<head>  
<title>Das style-Element</title>  
<style type="text/css">  
<!--  
#hNav li {  
	background-color: #dbf497;  
	border-width: 1px;  
	border-style: solid;  
	border-color: #d6d6d6;  
}  
  
.activeHNav {  
	background-color: blue;  
}  
  
  
-->  
</style>  
</head>  
<body>  
<ul id="hNav">  
	<li class="activeHNav"><a href="?bqGroup=101">Gruppe 101</a></a></li>  
	<li><a href="?bqGroup=102">Gruppe 102</a></a></li>  
	<li><a href="?bqGroup=103">Gruppe 103</a></a></li>  
	<li><a href="?bqGroup=999">Gruppe 999</a></a></li>  
</ul>  
</body>  
</html>

Der erste <li> soll der class "activeHNav" zugeordnet werden und entsperchend blauen Hintergrund haben. Hat er aber nicht. Was mache ich falsch?

Gruß
Ralf

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Die <li>'s einer <ul> verschiedenene Klassen zuordnen

    Matthias Apsel Homepage des Autors
    +1 Informationen zu den Bewertungsregeln

    Om nah hoo pez nyeetz, Ralf!

    <!--
    #hNav li {

    ...

    .activeHNav {
    -->

    zum einen sind die Kommentare überflüssig, zum anderen missachtest du die Spezifität, zur Veranschaulichung als Nahrungskette

    Matthias

    --
    1/z ist kein Blatt Papier.

    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln

    1. Die <li>'s einer <ul> verschiedenene Klassen zuordnen

      Jeena Paradies Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Hallo,

      zur Veranschaulichung als Nahrungskette

      Oder Star Wars.

      Jeena

      --
      Jlog | Gourmetica Mentiri
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. Die <li>s einer <ul> verschiedenene Klassen zuordnen

    Laus
    – Informationen zu den Bewertungsregeln

    #hNav li {

    .activeHNav {

    <ul id="hNav">
    <li class="activeHNav"><a href="?bqGroup=101">Gruppe 101</a></a></li>
    <li><a href="?bqGroup=102">Gruppe 102</a></a></li>

    Der erste <li> soll der class "activeHNav" zugeordnet werden und entsperchend blauen Hintergrund haben. Hat er aber nicht. Was mache ich falsch?

    Auf das erste <li>-Element treffen beide Selektoren zu, sowohl "#hNav li" als auch ".activeHNav". Die Eigenschaften des einen überschreiben daher die des anderen, und zwar nach jenen Regeln, die in Abschnitt 6.4.3 der CSS-Spezifikation zu finden sind.
    Einem id-Selektor ist zwar auf den ersten Blick nur schwer beizukommen, aber es ist möglich. Versuch macht kluch.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  3. Die <li>'s einer <ul> verschiedenene Klassen zuordnen

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@Ralf:

    nuqneH

    <ul id="hNav">
    <li class="activeHNav"><a href="?bqGroup=101">Gruppe 101</a></a></li>
    <li><a href="?bqGroup=102">Gruppe 102</a></a></li>
    <li><a href="?bqGroup=103">Gruppe 103</a></a></li>
    <li><a href="?bqGroup=999">Gruppe 999</a></a></li>
    </ul>

    Was mache ich falsch?

    Du schließt 'a'-Elemente, die gar nicht offen sind. Das hätte dir der Validator auch gesagt.

    Du öffnest 'a'-Elemente, wo du gar nicht verlinken solltest: „Verlinke niemals auf die aktuelle Seite.“ (Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen])

    Dein Code sollte eher so aussehen:

    <ul id="hNav">  
        <li>Gruppe 101</li>  
        <li><a href="?bqGroup=102">Gruppe 102</a></li>  
        <li><a href="?bqGroup=103">Gruppe 103</a></li>  
        <li><a href="?bqGroup=999">Gruppe 999</a></li>  
</ul>

    Eine Klasse zu Kennzeichnung des gewählten Menüpunkts brauchst du nicht.

    Oder in HTML5:

    <nav id="hNav">  
    <ul>  
        <li><a>Gruppe 101</a></li>  
        <li><a href="?bqGroup=102">Gruppe 102</a></li>  
        <li><a href="?bqGroup=103">Gruppe 103</a></li>  
        <li><a href="?bqGroup=999">Gruppe 999</a></li>  
    </ul>  
</nav>

    Dann hast du sowohl 'li'- als auch 'a'-Element zum Stylen zur Verfügung. Unterscheidung aktuller vs. andere Menüpunkte per '#hNav a' bzw. '#hNav a[href]'.

    Qapla'

    --
    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
    (Mark Twain)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln