[selfHTML] CSS-Navigation - Lösung für IE

[the snake II]

Hallo zusammen,

Ich versuchte vor kurzem eine Navigationsleiste mit CSS zu Stande zu bringen. Dabei kam mir die Idee mit einer Liste, die "inline" dargestellt wird (also horizontal).
Die Menüpunkte sollten im "Button-style" dargestellt werden, sprich: Rechtecke mit Background. Diese Buttons sollten einen Hover-Effekt bekommen. "li:hover" klappt im Firefox und Netscape einwandfrei, allerdings im IE nicht. Da müsste man das mit "a:hover" lösen. Das bewirkt allerdings nur, dass der Text im Button einen anderen Background bekommt.
Ich schaute auf selfHTML nach einer Lösung und stieß im Bereich "CSS-basierende Layouts --> CSS-basierende Navigationsleisten" auf folgenden Code:

  body, p a {
    font: normal 100.01% Helvetica, Arial, sans-serif;
    color: black; background-color: white;
  }

  ul#Navigation {
    width: 10em;
    margin: 0; padding: 0.8em;
    border: 1px solid black;
    background-color: silver;
  }
  * html ul#Navigation {  /* Korrekturen fuer IE 5.x */
    width: 11.6em;
    w\idth: 10em;
    padding-left: 0;
    padd\ing-left: 0.8em;
  }
  ul#Navigation li {
    list-style: none;
    margin: 0.4em; padding: 0;
  }

  ul#Navigation a {
    display:block;
    padding: 0.2em;
    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 {  /* Breitenangaben nur fuer IE */
    width: 100%;
    w\idth: 8.8em;
  }
  ul#Navigation a:hover {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white; background-color: gray;
  }

Dies habe ich dann auf meine Bedürfnisse angepasst und es funktioniert auch im IE.
Mir ist aufgefallen, dass da häufig "Korrekturen für IE" oder "Breitenangaben nur für IE" steht. Diese sind besonders dargestellt. Z.B. " * html ul#Navigation a" was macht da das Sternchen und bei " w\idth: 10em;" dieser Backslash nach dem w?
Ich frage nach, da ich es gerne verstehen würde. Es kann ja nicht sein, dass ich jedes mal den Code von selfHTML benutze, oder?

Vielen Dank schonmal

 

[Dr Dau]

Hallo!

Das ganze nennt sich "CSS-Hacks", dieses hier alles zu erklären würde das Forum sprengen.
Darum solltest Du hier auf SelfHTML mal nachlesen.
Im übrigen währst Du zu der Seite auch von den Navigationsbeispielen gekommen.... denn die Seite für die CSS-Hacks ist die Folgeseite.... zu erreichen über den Link am Ende der Seite.

Gruss Dr Dau