CSS-Menü funktioniert nicht

[nick]

Tach.

Versuche mich gerade an einem dynamischen CSS-Menü. Bisher bin ich im Besitz folgenden Quellcodes:

  
 <ul class="nav">  
  <li class="sup">Ueberschrift1</li>  
  <li class="sub">Unterschrift1.1</li>  
  <li class="sub">Unterschrift1.2</li>  
  <li class="sub">Unterschrift1.3</li>  
 </ul>  
 <ul class="nav">  
  <li class="sup">Ueberschrift2</li>  
  <li class="sub">Unterschrift2.1</li>  
  <li class="sub">Unterschrift2.2</li>  
  <li class="sub">Unterschrift2.3</li>  
  <li class="sub">Unterschrift2.4</li>  
 </ul>  

  
li{ list-style:none; }  
  
ul{  
 float:left;  
 margin-top:-1px;  
}  
  
  
.sup{  
 border:1px solid #000;  
 font-weight:bold;  
}  
.sub{  
 visibility: hidden;  
}  
  
.sup:hover .sub{  
 visibility: visible;  
}  

Eine Frage hätte ich jetzt: Warum funktioniert das nicht? Wenn ich "visibility" mit "display" ersetze, dann verändert sich nichts...

danke, euer nick

[Cheatah]

Hi,

<li class="sup">Ueberschrift1</li>
  <li class="sub">Unterschrift1.1</li>
  <li class="sub">Unterschrift1.2</li>
  <li class="sub">Unterschrift1.3</li>

wenn jedes Kindelement eines Vaters eine Klasse besitzt, ist vermutlich etwas falsch.

.sup:hover .sub{
Eine Frage hätte ich jetzt: Warum funktioniert das nicht?

Weil Du kein <foo class="sub"> hast, welches Kind(!) eines <bar class="sup"> ist. "Funktioniert nicht" ist übrigens keine Fehlerbeschreibung. Der Selektor, den Du suchst, lautet "~" und ist erst ab CSS/3.0 verfügbar.

Cheatah

[Ingo Turski]

Hi,

<li class="sup">Ueberschrift1</li>
  <li class="sub">Unterschrift1.1</li>

kommst Du bei dieser Namensgebung nicht durcheinander?
Wenn Du Dich mit Selektoren näher befaßt, wirst Du feststellen, daß viele Deiner Klassen überflüssig sind.

Außerdem solltest Du einmal nachlesen, wie Mehrere Navigationsebenen sinnvoller auszuzeichnen sind; nebenbei kann das mit dem Einblenden dann auch funktionieren - jedenfalls in modernen Browsern.

freundliche Grüße
Ingo

[nick]

Danke euch erstmal...

Also, jetzt hätte ich folgendes (funktionierendes):

  
 <ul class="nav">  
  <li class="sup">Ueberschrift1<br>  
  <ul class="nav2">  
   <li class="sub"><a href="index.php">Unterschrift1.1</a></li>  
   <li class="sub"><a href="index.php">Unterschrift1.2</a></li>  
   <li class="sub"><a href="index.php">Unterschrift1.3</a></li>  
   <li class="sub"><a href="index.php">Unterschrift1.4 </a></li>  
   <li class="sub"><a href="index.php">Unterschrift1.5</a></li>  
   <li class="sub"><a href="index.php">Unterschrift1.6</a></li>  
   <li class="sub"><a href="index.php">Unterschrift1.7</a></li>  
   <li class="sub"><a href="index.php">Unterschrift1.8</a></li>  
   <li class="sub"><a href="index.php">Unterschrift1.9</a></li>  
   <li class="sub"><a href="index.php">Unterschrift1.10</a></li>  
   <li class="sub"><a href="index.php">Unterschrift1.11</a></li>  
  </ul>  
  </li>  
 </ul>  
 <ul class="nav">  
  <li class="sup">Ueberschrift2<br>  
  <ul class="nav2">  
   <li class="sub"><a href="index.php">Unterschrift2.1</a></li>  
   <li class="sub"><a href="index.php">Unterschrift2.2</a></li>  
   <li class="sub"><a href="index.php">Unterschrift2.3</a></li>  
   <li class="sub"><a href="index.php">Unterschrift2.4</a></li>  
  </ul>  
  </li>  
 </ul>  
  

  
li{  
 list-style:none;  
}  
  
/* float:left = Punkte nebeneinenader anordbar */  
ul.nav{  
 float:left;  
 margin-top:-1px;  
 display:inline;  
}  
  
.sub{  
  
}  
.sup{  
 border:1px solid #000;  
 font-weight:bold;  
}  
  
/* Absolutes Positionieren = Stört die anderen Elemente auf der Seite nicht, sondern legt sich über sie */  
.nav2{  
 position:absolute;  
}  
  
/* Das verhindert, dass sich das Submenü beim hovern der nicht sichtbaren Punkte öffnet */  
.nav2:hover{  
 display:block;  
}  
  
/* Das lässt die Punkte Standardmäßig geschlossen */  
.nav2 li.sub{  
 display:none;  
}  
  
/* Öffnen der Unterpunkte beim hovern des Sup-Points */  
.sup:hover li.sub{  
 display:inline;  
}  

Im Opera 8 sieht es so aus wie ich es eigentlich gerne haben würde - doch im Mozilla liegen die Punkte nebeneinenader. Dabei sehe ich dazu keinen Grund...

[Cheatah]

Hi,

<ul class="nav">

ich bin sicher, dieses Element befindet sich in einem <div id="navigation"> o.ä. Wozu also die Klasse?

<li class="sup">Ueberschrift1<br>

Wozu diese Klasse, und wozu das <br>? Ein Zeilenumbruch ist nicht Teil des _Inhalts_, sondern der Darstellung, also Sache von CSS, nicht von HTML.

<ul class="nav2">

Wozu diese Klasse? Auch ohne sie ist dieses Element eindeutig selektierbar.

<li class="sub"><a href="index.php">Unterschrift1.1</a></li>

Gleiches gilt für diese Klasse. Dein gesamter Code kommt ohne eine einzige Klasse aus - denn Du klassifizierst nichts! "Alles hat die gleiche Bedeutung" ist ein klares Zeichen dafür, _kein_ class-Attribut zu setzen.

/* Öffnen der Unterpunkte beim hovern des Sup-Points */
.sup:hover li.sub{
display:inline;
}
Im Opera 8 sieht es so aus wie ich es eigentlich gerne haben würde - doch im Mozilla liegen die Punkte nebeneinenader. Dabei sehe ich dazu keinen Grund...

Ehrlich nicht? Ich sehe ihn recht deutlich.

Cheatah

[Ingo Turski]

Hi,

oops, da warst Du schneller...

<ul class="nav">

ich bin sicher, dieses Element befindet sich in einem <div id="navigation"> o.ä. Wozu also die Klasse?

Hast Du wirklich kein bisschen Hoffnung, daß die HTML-Auszeichnung jetzt doch sinnvoller sein könnte? ;-)
Nick hätte sich ja durchaus - trotz der Klassen und br - an dem Selfhtml-Beispiel oientieren können.

freundliche Grüße
Ingo

[Ingo Turski]

Hi,

<ul class="nav">
  <li class="sup">Ueberschrift1<br>

die Klasse ist nicht nötig und das br erst recht nicht. Du kannst:
ul.nav li { display:block; } definieren.

<ul class="nav2">
   <li class="sub"><a href="index.php">Unterschrift1.1</a></li>

Beide Klassen sind überflüssig:
ul.nav li ul {}
ul.nav li li {}

/* float:left = Punkte nebeneinenader anordbar */
ul.nav{
float:left;
margin-top:-1px;
display:inline;

wozu inline? Braucht der IE diese unsinnige Angabe wirklich?

/* Absolutes Positionieren = Stört die anderen Elemente auf der Seite nicht, sondern legt sich über sie */
.nav2{
position:absolute;
}

Ohne weitere Angaben ist das völlig untauglich. Ich glaube, besonders der Opera steigt dabei aus. Und mit Positionsangaben fehlt der geeignete Bezugspunkt, nämlich ul.nav.

/* Das verhindert, dass sich das Submenü beim hovern der nicht sichtbaren Punkte öffnet */
.nav2:hover{
display:block;
}

Das will mir nun gar nicht einleuchten.

Im Opera 8 sieht es so aus wie ich es eigentlich gerne haben würde - doch im Mozilla liegen die Punkte nebeneinenader. Dabei sehe ich dazu keinen Grund...

das hast Du doch mit display:inline; selbst definiert.

Im übrigen: hast Du einen vollständigen Doctype für den standardkompatiblen Modus angegeben? Wenn nicht, könnte der Opera die Seite fehlerhaft (wenn auch in Deinem Sinne) darstellen.

freundliche Grüße
Ingo

[nick]

<ul class="nav">
  <li class="sup">Ueberschrift1<br>
die Klasse ist nicht nötig und das br erst recht nicht. Du kannst:
ul.nav li { display:block; } definieren.

Und was passiert dann mit den Unterpunkten? Das sind auch <li> in ul.nav

<ul class="nav2">
   <li class="sub"><a href="index.php">Unterschrift1.1</a></li>
Beide Klassen sind überflüssig:
ul.nav li ul {}
ul.nav li li {}

Gut, das kann ich nachvollziehen

/* float:left = Punkte nebeneinenader anordbar */
ul.nav{
float:left;
margin-top:-1px;
display:inline;
wozu inline? Braucht der IE diese unsinnige Angabe wirklich?

Nein, der IE zersetzt sowieso meine Seite, da ist das dann auch egal.

/* Absolutes Positionieren = Stört die anderen Elemente auf der Seite nicht, sondern legt sich über sie */
.nav2{
position:absolute;
}
Ohne weitere Angaben ist das völlig untauglich. Ich glaube, besonders der Opera steigt dabei aus. Und mit Positionsangaben fehlt der geeignete Bezugspunkt, nämlich ul.nav.

Nö, der Opera zeigt kein Unterschied zu Mozilla. Aber ohne position:absolute werden die Elemente verschoben, mit bekomme ich genau den gewünschten Effekt.

/* Das verhindert, dass sich das Submenü beim hovern der nicht sichtbaren Punkte öffnet */
.nav2:hover{
display:block;
}
Das will mir nun gar nicht einleuchten.

Ja, stimmt, jetzt brauche ich es nicht mehr.

Im Opera 8 sieht es so aus wie ich es eigentlich gerne haben würde - doch im Mozilla liegen die Punkte nebeneinenader. Dabei sehe ich dazu keinen Grund...
das hast Du doch mit display:inline; selbst definiert.

Das sehe ich jetzt auch.

Im übrigen: hast Du einen vollständigen Doctype für den standardkompatiblen Modus angegeben? Wenn nicht, könnte der Opera die Seite fehlerhaft (wenn auch in Deinem Sinne) darstellen.

Ja, ein Doctype ist vorhanden

[Ingo Turski]

Hi,

Und was passiert dann mit den Unterpunkten? Das sind auch <li> in ul.nav

<ul class="nav2">
   <li class="sub"><a href="index.php">Unterschrift1.1</a></li>
Beide Klassen sind überflüssig:
ul.nav li ul {}
ul.nav li li {}

Gut, das kann ich nachvollziehen

Dann solltest Du Dir die obere Frage auch beantworten können.
Wenn nicht, schau Dir den CSS-Code aus den Navigationsleisten-Beispielen in Selfhtml an.

Nö, der Opera zeigt kein Unterschied zu Mozilla. Aber ohne position:absolute werden die Elemente verschoben, mit bekomme ich genau den gewünschten Effekt.

gut - aber woran orientiert sich das denn? Stimmen die Positionien noch bei geänderter Fenstergröße oder gar Schriftgröße?

freundliche Grüße
Ingo

[nick]

Hi Ingo.

Naja, allen Tipps zum Trotz habe ich jetzt wieder einen neuen Weg eingeschlagen. Ich bin dir sehr dankbar, dass du auf deiner Homepage unter Tipps und Tricks das Thema ansprichst.
Ich habe deinen Quelltext ein wenig verändert, so dass nun folgendes herauskam:

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">  
<head>  
<title>Dynamische Navigationsleiste</title>  
  
<style type="text/css">
~~~~~~css
  
  div#Tmenu {  
    width: 94%;  
  }  
  * html div#Tmenu {  
    width: 41.4em;  
    w\idth: 39.8em;  /* IE 6 in standards-compliant mode */  
  }  
  div#Tmenu div {  
    clear: left;  
  }  
  ul#Navigation {  
    margin: 0; padding: 0;  
    text-align: center;  
  }  
  
  ul#Navigation li {  
    list-style: none;  
    float: left;  
    position: relative;  
    margin: 0.4em; padding: 0;  
  }  
  * html ul#Navigation li {  
    margin-bottom: -0.4em;  
  }  
  
  ul#Navigation li ul {  
    margin: 0; padding: 0;  
    position: absolute;  
    top: 1.65em; left: -0.4em;  
  }  
  * html ul#Navigation li ul {  
    left: -1.5em;  
    lef\t: -0.4em;  
  }  
  ul#Navigation li ul li {  
    float: none;  
    display: block;  
    margin-top: 0.0em; margin-bottom: 0.2em;  
 background-color:#eee;  
  }  
  
  ul#Navigation a, ul#Navigation span {  
    display: block;  
    width: 7em;  
    font-family:Arial, Helvetica, sans-serif;  
    text-decoration: none; font-weight: bold;  
    padding: 0.23em 0.97em 0.17em 1.03em;  
    border: 1px solid #000;  
  }  
  * html ul#Navigation a, * html ul#Navigation span {  
    width: 9.2em;  
    w\idth: 7em;  /* IE 6 in standards-compliant mode */  
  }  
  ul#Navigation a:hover, ul#Navigation span, li a#aktuell:hover {  
    padding: 0.17em 1.03em 0.23em 0.97em;  
    border-color: #000;  
 background-color:#f90;  
  }  
  ul#Navigation li ul a:hover {  
    border-color: #000;  
  }  
  li a#aktuell {  
  
  }  
  ul#Navigation li ul span {  
  
  }  
  
/* dynamisches Ein-/Ausblenden */  
  ul#Navigation li ul {  
    display: none;  
  }  
  ul#Navigation li:hover ul {  
    display: block;  
  }
~~~~~~html
  
</style>  
  
<!--[if IE]><script type="text/javascript">  
[code lang=javascript]  function hoverIE() {  
    var LI = document.getElementById("Navigation").firstChild;  
    do {  
      if(LI.firstChild) { // A (SPAN)  
        if(LI.firstChild.nextSibling) { // #text  
          if(LI.firstChild.nextSibling.nextSibling) { // UL ?  
            LI.onmouseover=einblenden; LI.onmouseout=ausblenden;  
          }  
        }  
      }  
      LI = LI.nextSibling;  
    }  
    while(LI);  
  }  
  function einblenden() {  
    this.firstChild.nextSibling.nextSibling.style.display = "block";  
    this.firstChild.nextSibling.nextSibling.style.backgroundColor = "#eee";  
  }  
  function ausblenden() {  
    this.firstChild.nextSibling.nextSibling.style.display = "none";  
  }
~~~~~~html
  
</script><![endif]-->  
  
</head>  
<body onload="hoverIE()">  
  
<div id="Tmenu">  
  <ul id="Navigation">  
    <li><a id="aktuell" href="#Beispiel">Der Verein</a>  
      <ul>  
        <li><a href="#Beispiel">Vergangenheit</a></li>  
        <li><a href="#Beispiel">Gegenwart</a></li>  
        <li><a href="#Beispiel">Zukunft</a></li>  
        <li><a href="#Beispiel">Mitglieder</a></li>  
        <li><a href="#Beispiel">Saison</a></li>  
        <li><a href="#Beispiel">Tops / Flops</a></li>  
        <li><a href="#Beispiel">Bilder</a></li>  
        <li><a href="#Beispiel">Termine</a></li>  
      </ul>  
    </li>  
    <li><a href="#Beispiel">Interaktiv</a>  
      <ul>  
        <li><a href="#Beispiel">Kontakt</a></li>  
        <li><a href="#Beispiel">Links</a></li>  
        <li><a href="#Beispiel">G&auml;stebuch</a></li>  
        <li><a href="#Beispiel">Board</a></li>  
      </ul>  
  </li>  
    <li><a href="#Beispiel">Homepage</a>  
      <ul>  
        <li><a href="#Beispiel">BugTracker</a></li>  
        <li><a href="#Beispiel">Admin-Tools</a></li>  
        <li><a href="#Beispiel">Impressum</a></li>  
      </ul>  
    </li>  
    <li><a href="#Beispiel">Home</a></li>  
  </ul>  
  <div></div>  
</div>  
  
</body>  
</html>

Jaa, soweit klappt das ja, und ich hätte nur ein einziges Anliegen. Ich versuche nämlich gerade verzweifelt, das Menü in die Mitte des #Tmenu zu bekommen. Weder im html mit align="center" noch im CSS mit text-align:center; bekommen ich das hin. Haste ne Idee?
Ach ja - was suchen die ganzen \ in deinem CSS? Bspw "w\idth"?

[Ingo Turski]

Hi,

Jaa, soweit klappt das ja, und ich hätte nur ein einziges Anliegen. Ich versuche nämlich gerade verzweifelt, das Menü in die Mitte des #Tmenu zu bekommen.

Das ist bei einer prozentualen Breite der UL und den floatenden LI mit einer über em definierten Breite nicht möglich. Du solltest bei UL die Breite auch in em angeben, dann kannst Du sie über margin:auto zentrieren.

Ach ja - was suchen die ganzen \ in deinem CSS? Bspw "w\idth"?

Das sind zulässige Maskierungen, die ältere IEs nicht verstehen -> eine CSS-Browserweiche, genau wie * html; die erste Angabe gilt für IE<6 und die zweite für IE6. Bedenke, daß diese Angaben die vorherigen überschreiben.

freundliche Grüße
Ingo

[nick]

Vielen Dank. Jetzt hab ichs. Sogar für den IE hab ich es optimieren können. Bis auf die Tatsache, dass dort nichts aufklappt. Ich habe nur

* html div#Tmenu {
    width: 41.4em;
    w\idth: 40.5em;  /* IE 6 in standards-compliant mode */
  }

geändert. Gibts dafür ne Lösung?

[nick]

Ich habe nur

* html div#Tmenu {
    width: 41.4em;
    w\idth: 40.5em;  /* IE 6 in standards-compliant mode */
  }

geändert.

Und natürlich auch das was du mir empfohlen hast, also width in em und margin:auto

[Ingo Turski]

Hi,

Sogar für den IE hab ich es optimieren können. Bis auf die Tatsache, dass dort nichts aufklappt.

Der IE braucht halt das Javascript, weil er CSS hierfür noch nicht ausreichend unterstützt. Und Du solltest dabei natürlich auch an eine Alternative für die IE-User ohne Javascript denken.

freundliche Grüße
Ingo