Bei hover soll sich auch Unterelement ändern. Wie funktionierts?

[Jordaniel]

Hallo, um mein Problem darzustellen, erstmal der Link der betroffenen Seite:

http://www.kaffeehaus-zeltinger.de/test2/html/fruehstueck.html

Dort soll sich bei einem mouseover über den Link "Ein Stück Vielfalt –
Kuchen & Torten" nicht nur die Farbe von "Ein Stück Vielfalt" ändern, sondern auch die Farbe von "Kuchen & Torten". Bis jetzt ändert sich bei einem mouseover nur die Farbe von "Ein Stück Vielfalt" von rot zu hellgrau. Ebenso soll sich bei einem Mouseover die Farbe von "Kuchen & Torten" in hellgrau ändern. Leider bekomme ich es nicht hin.

Die jeweils grauen Texte (wie z.B. "Kuchen & Torten") habe ich "n" genannt und per css definiert. Ich weiß nicht, wie man dieses von mir definierte Element in der Fachsprache nennt; ich nenne es hier mal "Unterelement".

Ich habe versucht, "n" schlicht und einfach einen hover zuzuweisen. Das wird vom Browser aber ignoriert.

Getestet habe ich auf FF 3.5.2.

Der Quelltext zu dieser Linkliste sieht so aus:

<ul id="speisenavi">
     <li><a href="fruehstueck.html">Traditionelles <br />und Originelles<br /><n>Frühstück von 9 bis 18 Uhr</n></a></li>
    <li>Ein Stück Vielfalt<br /><n>Kuchen &amp; Torten</n></li>
                <li>Gaumenfreu(n)de <br /><n>Kleine &amp; große Speisen</n></li>    
                <li>Fruchtiges <br />in Kugelform <br /><n>Unsere Eiskarte</n></li>
                <li>Mit Leib und Kehle<br /><n>Kaffee, Tee und andere Getränke</n></li>
        </ul>

Das CSS für die Links sieht so aus:

ul#speisenavi {
font-family: Georgia, serif;
font-size: 14px;
font-weight:bold;
text-align:center;
text-transform:uppercase;
text-decoration: none;
letter-spacing: 2px;
color:#CC0000;
padding-left:20px;
}

ul#speisenavi li {
   display: block;
text-decoration: none;
padding-bottom:20px;
  }

ul#speisenavi a {
   text-decoration: none;
    padding: 0em;
color:#CC0000;
  }

ul#speisenavi a:link, ul#speisenavi a:visited {
color: #CC0000;
}

ul#speisenavi a:focus, ul#speisenavi a:hover, ul#speisenavi a:active
  {
color: #666666;
  }

ul#speisenavi li n {
font-size: 11px;
text-transform:none;
letter-spacing: 0px;
font-style:italic;
text-decoration: none;
padding: 0em;
color: #333333;
  }

ul#speisenavi n a {
   text-decoration: underline;
    padding: 0em;
color:#333333;
  }

ul#speisenavi n a:link, ul#speisenavi n a:visited {
color: #666666;
}

ul#speisenavi n a:focus, ul#speisenavi n a:hover, ul#speisenavi n a:active
  {
color: #666666;
  }

Hoffentlich wisst ihr Rat, ich komme an dieser Stelle nicht weiter. Vielen Dank schon mal im Voraus!

[Beat]

Hallo, um mein Problem darzustellen, erstmal der Link der betroffenen Seite:

http://www.kaffeehaus-zeltinger.de/test2/html/fruehstueck.html

Hoffentlich wisst ihr Rat, ich komme an dieser Stelle nicht weiter. Vielen Dank schon mal im Voraus!

Bereinige deine Fehler im HTML
vor allem ersetze das nicht definierte Element <n> durch ein geeignetes inline Element, das sich dann auch formatieren lässt.
Vor allem aber gib dem "hier bin ich" Eintrag in der Liste eine markante Darstellung. Dazu bedarfst du entweder einer Sonderklasse in li oder ein Ersatzelement an Stelle des <a> für Links.

mfg Beat

[Jordaniel]

Bereinige deine Fehler im HTML

werde ich.

vor allem ersetze das nicht definierte Element <n> durch ein geeignetes inline Element, das sich dann auch formatieren lässt.

also zum beispiel <span> oder <small>?

Vor allem aber gib dem "hier bin ich" Eintrag in der Liste eine markante Darstellung.

Was meinst du mit "hier bin ich" Eintrag? Und was meinst du mir markanter Darstellung?

Dazu bedarfst du entweder einer Sonderklasse in li oder ein Ersatzelement an Stelle des <a> für Links.

Was meinst du mit "Ersatzelement" an Stelle des <a>?

mfg Beat

Vielen Dank erstmal für deine Hilfe, wäre ganz super wenn du noch kurz auf meine fragen antworten könntest.

[Beat]

vor allem ersetze das nicht definierte Element <n> durch ein geeignetes inline Element, das sich dann auch formatieren lässt.
also zum beispiel <span> oder <small>?

Vor allem aber gib dem "hier bin ich" Eintrag in der Liste eine markante Darstellung.

Was meinst du mit "hier bin ich" Eintrag? Und was meinst du mir markanter Darstellung?

Offenbar hast du dort eine unfertige Linkliste. In einer solchen Liste ist logischerweie ein Eintrag immer deaktiviert.

mfg Beat

[Jordaniel]

Danke für eure Vorschläge! Habe ich gleich eingearbeitet. <n> habe ich durch <small> ersetzt und den "hier bin ich" link habe ich entsprechend markiert.

Leider habe ich mein ursprüngliches Problem noch nicht lösen können; dem Text in <small> (z.B. "Kuchen & Torten") kann ich kein link, hover, active etc. zuweisen. Wisst ihr woran es liegt?

Hier noch mal der Link zur Seite:
http://www.kaffeehaus-zeltinger.de/test2/html/fruehstueck.html

Und das entsprechende html und css:

HTML
---------------------------------

<ul id="speisenavi">
     <li>Traditionelles <br />und Originelles<br /><small>Frühstück von 9 bis 18 Uhr</small></li>
     <li><a href="kuchen.html" title="Link zu Kuchen und Torten">Ein Stück Vielfalt<br /><small>Kuchen &amp; Torten</small></a></li>
   <li><a href="speisen.html">Gaumenfreu(n)de <br /><small>Kleine &amp; große Speisen</small></a></li>
           <li><a href="eis.html">Fruchtiges <br />in Kugelform <br /><small>Unsere Eiskarte</small></a></li>
           <li><a href="getraenke.html">Mit Leib und Kehle<br /><small>Kaffee, Tee und andere Getränke</small></a></li>
       </ul>

CSS
------------------------------------
ul#speisenavi small {
font-size: 11px;
text-transform:none;
letter-spacing: 0px;
font-style:italic;
text-decoration: none;
padding: 0em;
color: #999999;
  }

ul#speisenavi small a {
   padding: 0em;
color:#666666;
  }

ul#speisenavi small a:link, ul#speisenavi small a:visited {
color: #666666;
}

ul#speisenavi small a:focus, ul#speisenavi small a:hover, ul#speisenavi small a:active
  {
color: #999999;
  }

[Beat (no reg)]

http://www.kaffeehaus-zeltinger.de/test2/html/fruehstueck.html

<ul id="speisenavi">
     <li>Traditionelles <br />und Originelles<br /><small>Frühstück von 9 bis 18 Uhr</small></li>
     <li><a href="kuchen.html" title="Link zu Kuchen und Torten">Ein Stück Vielfalt<br /><small>Kuchen &amp; Torten</small></a></li>
   <li><a href="speisen.html">Gaumenfreu(n)de <br /><small>Kleine &amp; große Speisen</small></a></li>
           <li><a href="eis.html">Fruchtiges <br />in Kugelform <br /><small>Unsere Eiskarte</small></a></li>
           <li><a href="getraenke.html">Mit Leib und Kehle<br /><small>Kaffee, Tee und andere Getränke</small></a></li>
       </ul>

verkehrte Reihenfolge in den Selektoren.

ul#speisenavi small a {
   padding: 0em;
color:#666666;
  }

verkehrte Reihenfolge in den Selektoren.

ul#speisenavi small a:link, ul#speisenavi small a:visited {
color: #666666;
}

verkehrte Reihenfolge in den Selektoren.

ul#speisenavi small a:focus, ul#speisenavi small a:hover, ul#speisenavi small a:active
  {
color: #999999;
  }

[Jordaniel]

verkehrte Reihenfolge in den Selektoren.

Ok, jetzt funktioniert es! Vielen Danke für die Hilfe!

[Detlef G.]

Hallo Jordaniel

Was meinst du mit "hier bin ich" Eintrag? Und was meinst du mir markanter Darstellung?

Er meint damit, dass du in deiner Linkliste durch eine andere Formatierung hervorhebst, auf welcher Seite sich dein Besucher gerade befindet. Auch sollte die gerade aktuelle Seite nicht verlinkt sein.

Auf der Seite „http://www.kaffeehaus-zeltinger.de/test2/html/kuchen.html” z.B. sollte „Ein Stück Vielfalt Kuchen & Torten” auch anders aussehen, als die Links zu den anderen Seiten.

Auf Wiederlesen
Detlef

[Jordaniel]

Danke für eure Vorschläge! Habe ich gleich eingearbeitet. <n> habe ich durch <small> ersetzt und den "hier bin ich" link habe ich entsprechend markiert.

Leider habe ich mein ursprüngliches Problem noch nicht lösen können; dem Text in <small> (z.B. "Kuchen & Torten") kann ich kein link, hover, active etc. zuweisen. Wisst ihr woran es liegt?

Nochmal das entsprechende html und css:

HTML
---------------------------------

<ul id="speisenavi">
     <li>Traditionelles <br />und Originelles<br /><small>Frühstück von 9 bis 18 Uhr</small></li>
     <li><a href="kuchen.html" title="Link zu Kuchen und Torten">Ein Stück Vielfalt<br /><small>Kuchen &amp; Torten</small></a></li>
   <li><a href="speisen.html">Gaumenfreu(n)de <br /><small>Kleine &amp; große Speisen</small></a></li>    
           <li><a href="eis.html">Fruchtiges <br />in Kugelform <br /><small>Unsere Eiskarte</small></a></li>
           <li><a href="getraenke.html">Mit Leib und Kehle<br /><small>Kaffee, Tee und andere Getränke</small></a></li>
       </ul>

CSS
------------------------------------
ul#speisenavi small {
font-size: 11px;
text-transform:none;
letter-spacing: 0px;
font-style:italic;
text-decoration: none;
padding: 0em;
color: #999999;
  }

ul#speisenavi small a {
   padding: 0em;
color:#666666;
  }

ul#speisenavi small a:link, ul#speisenavi small a:visited {
color: #666666;
}

ul#speisenavi small a:focus, ul#speisenavi small a:hover, ul#speisenavi small a:active
  {
color: #999999;
  }

[EKKi]

Mahlzeit Jordaniel,

Leider habe ich mein ursprüngliches Problem noch nicht lösen können; dem Text in <small> (z.B. "Kuchen & Torten") kann ich kein link, hover, active etc. zuweisen. Wisst ihr woran es liegt?

Kannst Du schon - Du machst es nur falsch:

<ul id="speisenavi">

[...]

<li><a href="kuchen.html" title="Link zu Kuchen und Torten">Ein Stück Vielfalt<br /><small>Kuchen &amp; Torten</small></a></li>

[...]

</ul>

ul#speisenavi small a {
   padding: 0em;
color:#666666;
  }

Ich sehe in Deinem Code kein <ul>, das ein <small> enthält, in dem wiederum ein <a> vorkommt.

Ich sehe in Deinem <ul> allerdings mehrere <a>, in denen sich ein <small> befindet.

Du darfst jetzt genau *einmal* raten, was an Deinen CSS-Regeln falsch ist ... :-)

MfG,
EKKi