Navigation /Menuepunkte : unterschiedliche Farbe beim "Hovern"

[E.R.]

Hallo,

ich moechte gerne die horizontale Navigationsleiste
http://de.selfhtml.org/css/layouts/anzeige/nav_inline.htm
fuer meine Website verwenden.

In diesem Zusammenhang, wie muss ich das CSS
-----------
ul#Navigation {
    margin: 0; padding: 0.8em;
    text-align: center;
    border: 1px solid black;
    background-color: silver;
  }
  ul#Navigation li {
    list-style: none;
    display: inline;
    margin: 0.4em; padding: 0;
  }

ul#Navigation a, ul#Navigation span {
    padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: maroon; background-color: #ccc;
  }
  * html ul#Navigation a, * html ul#Navigation span {
    width: 1em;    /* nur fuer IE 5.0x erforderlich */
    w/idth: auto;  /* sicherheitshalber fuer spaetere Versionen korrigiert */
  }
  ul#Navigation a:hover, ul#Navigation span {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white; background-color: gray;
  }
-------

anpassen, dass in der Ausgabe auf der Webseite:

<ul id="Navigation">
    <li><a href="#Beispiel">Seite&nbsp;1</a></li>

<li><a href="#Beispiel">Seite&nbsp;2</a></li>
    <li><a href="#Beispiel">Seite&nbsp;3</a></li>
    <li><span>aktuelle&nbsp;Seite</span></li>
    <li><a href="#Beispiel">Seite&nbsp;5</a></li>
    <li><a href="#Beispiel">Seite&nbsp;6</a></li>

</ul>

die einzelnen Menuepunkte beim "Hovern" unterschiedliche Hintergrundfarben (1braun/2rot/3gelb/4gruen/5blau/6weiss) annehmen und dass die angezeigte Seite in der Navigation  "<li><span>aktuelle&nbsp;Seite</span></li>"
auch die entspr. Hintegrundfarbe (z.bgruen) anzeigt.

Hoffe, ich konnte m. Probleme halbwegs deutlich formulieren ;-)

Vielen Dank im voraus

Gruesse

E.R

[Gernot Back]

Hallo E.R.,

anpassen, dass in der Ausgabe auf der Webseite:
die einzelnen Menuepunkte beim "Hovern" unterschiedliche Hintergrundfarben (1braun/2rot/3gelb/4gruen/5blau/6weiss) annehmen und dass die angezeigte Seite in der Navigation  "<li><span>aktuelle&nbsp;Seite</span></li>"
auch die entspr. Hintegrundfarbe (z.bgruen) anzeigt.

Indem du den einzelnen Listitems auch IDs verpasst (z.B. id="gruen") und mit CSS-ID-Selektoren "#" und Nachfahrensselektoren " " ein entsprechendes Aussehen definierst:

z.B.:

  
li#gruen a { background-color:#000000; }  
li#gruen a:hover, li#gruen span {background-color:#008800; }

Gruß Gernot

[E.R.]

Hallo E.R.,
Indem du den einzelnen Listitems auch IDs verpasst (z.B. id="gruen")

...

Hallo Gernot,
vielen Dank! das hilft mir weiter!!
Viele Gruesse
E. R.

[Ingo Turski]

Hi,

Hoffe, ich konnte m. Probleme halbwegs deutlich formulieren ;-)

ja. Allerdings hätte es wirklich nicht so ausführlich sein müssen, zumal Du das Beispiel ja angegeben hattest.
Beschäftige Dich mit Individualformate definieren oder Formate für Klassen definieren.

freundliche Grüße
Ingo