Mr2xtrem4u: Klappmenü

Hallo,
ich wollte mir ein klappmenü erstellen! Ich habe bereits eine CSS-Vorlage für ein normales Menü, das ich gerne behalten würde. Nur schaffe ich es nicht, die Unterlinks zu öffnen!
Ich nutze IE6 und wollte das Anzeige-Problem am besten ohne js umgehen. Laut dieser Anleitung sollte es gehen: http://www.drweb.de/leseproben/klappmenu.shtml

html-code dürfte klar sein:

<link rel="stylesheet" type="text/css"  media="screen,projection" href="menu-b.css">
              <div id="tabsB">
                <ul>
                  <li><a href="....htm" title="..."><span>...</span></a></li>
<ul>
            <li><a href="...">...</a></li>...
                </ul>
                  ...</ul>
            </div></th>

Die "head"-Anweisung laut der oben erwähnten Anleitung habe ich natürlich auch befolgt, nur wird mir selbst wenn ich das CSS-Beispiel von oben nutze das Menü nicht richtig angezeigt!! :S

Und mein normales CSS-Menü sieht wie folgt aus:

/* CSS Document */

/*- Menu Tabs B--------------------------- */

#tabsB {
      float:left;
      width:100%;
      background-image:url(/Bilder/hintergrund-css.jpg); ;
      font-size:93%;
      line-height:normal;
      }
    #tabsB ul {
 margin:0;
 padding:5px 5px 5px 10px;
 list-style:none;
      }
    #tabsB li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsB a {
      float:left;
      background:url("tableftB.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabsB a span {
      float:left;
      display:block;
      background:url("tabrightB.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#666;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsB a span {float:none;}
    /* End IE5-Mac hack */
    #tabsB a:hover span {
      color:#000;
      }
    #tabsB a:hover {
      background-position:0% -42px;
      }
    #tabsB a:hover span {
      background-position:100% -42px;
      }

  1. Hi,

    html-code dürfte klar sein:

    <ul>
                      <li><a href="....htm" title="..."><span>...</span></a></li>
    <ul>
                <li><a href="...">...</a></li>...
                    </ul>
                      ...</ul>

    ja, klar falsch. <ul> darf nur <li> enthalten, geschachtelte <ul> müssen in einem <li> liegen.

    Shepard

    1. ok, noch ein </li> eingefügt ;)
      geht aber trotzdem nicht!
      Schaff es einfach nicht in mein bestehendes CSS-Menü die Unterlinks zu intergrieren!!

      nur zur sicherheit nochmal:
        <link rel="stylesheet" type="text/css"  media="screen,projection" href="menu-b.css">
                    <div id="tabsB">
                      <ul>
                        <li><a href="#" title="#"><span>#</span></a></li>
                <ul>
                  <li><a href="#.htm">#</a></li>
                   <li><a href="#">#</a></li>
                   <li><a href="#">#</a></li>
                   <li><a href="#">#</a></li>
                <li><a href="#">#</a></li>
                 </ul>
              </li>
                        <li><a href="#" title="#"><span>#</span></a></li>
                        <li><a href="#" title="#"><span>#</span></a></li>
                      </ul>
                  </div></th>

      1. Hallo,

        ok, noch ein </li> eingefügt ;)
        geht aber trotzdem nicht!

        Nö, ist ja immer noch falsch, siehe Kommentare. Quellcodeformatierung hilft:

          
        <div id="tabsB">  
          <ul>  
            <li><a href="#" title="#"><span>#</span></a></li>  
            <ul>                      <!-- DARF NICHT -->  
              <li><a href="#.htm">#</a></li>  
              <li><a href="#">#</a></li>  
              <li><a href="#">#</a></li>  
              <li><a href="#">#</a></li>  
              <li><a href="#">#</a></li>  
            </ul>  
            </li>                      <!-- wo wird der aufgemacht? -->  
            <li><a href="#" title="#"><span>#</span></a></li>  
            <li><a href="#" title="#"><span>#</span></a></li>  
          </ul>  
        </div>  
        
        

        Am Besten erst mal Dein HTML validieren und sicherheitshalber auch Dein CSS.

        Shepard

        1. OK, danke! Heute seh ich einfach nichts...Herzlichen Dank für deine Hilfe, bin echt am verzweifeln!

          Validieren bringt mir folgenden Fehler:
           Line 68 column 96: document type does not allow element "LINK" here.
          ..."screen,projection" href="menu-b.css">
          The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

          One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).

          Kapier ich aber nicht!!!!
          <ul> und <li> dürften doch jetzt wirklich passen!!!!
          Es kann doch jetzt nur noch am CSS liegen??? oder????

          Hier nochmals der html-text

          <th style=";" scope="row">
                        <link rel="stylesheet" type="text/css" media="screen,projection" href="menu-b.css">
                        <div id="tabsB">
                          <ul>
                            <li><a href="#.htm" title="#"><span>#</span></a>
                    <ul>
                      <li><a href="#">#</a></li>
                       <li><a href="#">#</a></li>
                       <li><a href="#">#</a></li>
                       <li><a href="#">#</a></li>
                    <li><a href="#">#</a></li>
                     </ul>
                  </li>
                            <li><a href="#" title="#"><span>#</span></a></li>
                            <li><a href="#" title="#"><span>I#</span></a></li>
                          </ul>
                      </div></th>

          1. Hallo,

            Validieren bringt mir folgenden Fehler:
            Line 68 column 96: document type does not allow element "LINK" here.
            ..."screen,projection" href="menu-b.css">
            The element named above was found in a context where it is not allowed.
            Kapier ich aber nicht!!!!

            Na, genau das , was da steht,  <link> ist nur innerhalb von <head> erlaubt.

            (In dem verlinkten Kapitel von SELFHTML findest Du auch für alle anderen Elemente, in welchem Kontext sie erlaubt sind und wo nicht.)

            Ich weiß nicht, ob Dein Browser das "menu-b.css" überhaupt verwendet, er dürfte eigentlich nicht, was Dein Problem erklären könnte.

            <ul> und <li> dürften doch jetzt wirklich passen!!!!

            Ja, sieht besser aus.

            Shepard

            1. Ändert auch nichts, wenn es im head steht...

              menu-b.css geht ja bereits einwandfrei! nur kann ich keine "unter-listen" einbauen. und das hover-problem in CSS sollte ja laut meinem oben erwähnten link das verlinkte programm lösen?

              1. Schön, jetzt der Reihe nach, damit ich es auch verstehe:

                Was ist menu-b.css, ist das Dein eigenes Menü oder das aus dem Artikel? Ist #tabsB in dieser Datei definiert?

                Wo steht das CSS für #menu (aus dem Artikel), und vor allem: wo ist das HTML-Element mit ID="menu"?

                Du hast die conditional comments aus dem Artikel im <head>, gut.

                Dieses "csshover.htc" ist wirklich eingebunden und wird auch verwendet, d.h. Dein Browser kann darauf zugreifen?
                (Mich gruselt es ja, wenn ich diese "JScript"-Lösungen sehe.. egal)

                Am einfachsten wäre es, wenn Du Deine Versuche irgendwo ins Netz stellen könntest.

                Shepard

                1. habs jetzt mal unter http://andreas.detterbeck-huber.de/index-test.htm hochgeladen
                  Alle #menu einträge habe ich zu #tabsB umbenannt!
                  menu-b.css ist meine "normale" leiste ohne unterpunkte. hab jetzt allerdings menu-b.css und das neue css versucht zu verbinden. ist auch schon hochgeladen: http://andreas.detterbeck-huber.de/menu-b.css

                  csshover.htc liegt auf der hauptdomain, muss ich im quellcode behavior: url(csshover.htc) ändern?

                  tausend dank für deine hilfe!!

                  1. ich muss es übrigens nicht mit gewalt in css schreiben. mir würde es völlig reichen wenn ganz normale weiße untermenüs bei mouse-over aufgehen würden!

                    Mein menu-b würd ich halt gern behalten, muss aber nicht sein

                  2. Hallo again,

                    tausend dank für deine hilfe!!

                    Hätte ich gerne geleistet, aber hier muß ich passen. Das ist so ziemlich das Abenteuerlichste, was ich bisher gesehen habe, nur um ein Aufklappmenü auch für den IE zu realisieren.

                    Dein DrWeb-Artikel behauptet, alles wäre pure CSS ohne Skripte, und dann kommt so was wie csshover.htc (ja, liegt an der richtigen Stelle bei Dir).

                    Dein CSS ist auch ziemlich konfus, mir ist nicht einmal klar, ob Du das Hauptmenü horizontal oder vertikal haben möchtest. Da wird mehr als nötig nach links gefloated...

                    Den Browsern geht es auch nicht besser:
                    Opera und Firefox stellen das Menü horizontal dar (Untermenüs nach unten aufklappend), die Position der Untermenüs ist aber zu hoch, sie verdecken den Hauptmenüeintrag.
                    Firefox stellt die Untermenüeinträge nicht in separaten Zeilen, sondern aneinandergepappt dar.
                    Der IE ignoriert die schöne Formatierung der Hauptmenüeinträge und zeigt eine Art Button-Stil an... und und und.

                    Kurz und gut: Da ist nicht irgendwo ein kleiner Fehler, das ist Chaos (hey, ist nicht persönlich gemeint!).

                    Wenn Du nicht nur nach der schnellen, sondern nach einer sauberen und dauerhaften Lösung suchst, tu Dir selbst den Gefallen und vergiß diese wüste Mischung aus Hacks und Skripting.

                    Mein Alternativvorschlag:
                    Die CSS-Menüs von Ingo Turski. Das ist simpel, straightforward und liefert auf allen wichtigen Browsern barrierefreie Navigationen, die keine besonderen Voraussetzungen (wie JScript o.ä,) stellen.

                    Definiere genau, was Du haben willst, suche Dir bei Ingo ein passendes Beispiel und implementiere das zunächst ohne weiteren Schnickschnack, eingebettet in Deine Beispielsseite. Dann poste es hier und laß andere mal mit anderen Browsern einen Blick drauf werfen. Wenn Die Funktionalität dann browserübergreifend gegeben ist, kannst Du das Ganze noch nach Deinem Geschmack hübschen.

                    Solltest Du Dich zu einem neuen Versuch damit durchringen können, werde ich Dir gerne wieder behilflich sein, mit dem Ansatz hier: Nein.

                    Und bitte: von Anfang an valides HTML und CSS posten, das erspart den Helfern hier viel Arbeit:-)

                    Shepard.

                    1. OK, wie ich gerade sehe, verwendet Ingo ebenfalls ein wenig Skript, um dem IE auf die Sprünge zu helfen, aber da verstehe ich wenigstens, was passiert.

                      (Sollte dieses Posting doppelt erscheinen, sorry, der Tag war wohl zu hart heute, ich hatte es schon mal abgeschickt... dachte ich:-)

                      Gut' Nacht
                      Shepard

                      1. Ja klar, herzlichen Dank auf alle Fälle!! Mir gings ja nicht anders mit dem chaos. ist wahrscheinlich echt besser komplett neu zu starten! Aber DrWeb schien so "einfach" und "seriös"... naja egal. nochmals vielen dank für deine bemühungen!