Zerberus: div container

Hi,

ich habe eine Baumstruktur aufgebaut, aber bei der Ansicht
sollen die Unterordner nun ähnlich wie beim Explorer
unter Windows aufgeklappt werden können. Auch das habe
ich schon fast hinbekommen. Nur weiß ich nicht wie ich es
schaffe daß der Platz für die div-container nicht schon
vorher reserviert wird ohne "postition:absolut" benutzen
zu müssen. Die divs sind nämlich in einer Tabelle am unteren
Rand und wenn ich sie absolut setze, werden sie über den
Tabellenrand hinaus angezeigt. Aber eigentlich soll sich die
Tabellengröße anpassen...

Die divs werden übrigens mit "display:none;" ausgeblendet,
wobei ja auch eigentlich kein Platz reserviert wird, aber
das Problem ist dann, daß der zweite Unterordner nicht direkt
unter dem übergeordneten auftaucht, sondern eine Zeile zu
tief. Also wird für dem ersten Unterordner nämlich doch der
Platz reserviert irgendwie...

Ich hoffe jemand versteht diese Erklärung. :\

Mfg
Zerberus

  1. Hallo,

    vorher reserviert wird ohne "postition:absolut" benutzen

    Du benutzt doch sicherlich "position:absolute" ?

    Mit freundlichen Grüßen

    André

    --
    ss:{ zu:) ls:& fo:) de:] va:) ch:{ sh:) n4:# rl:° br:& js:| ie:% fl:| mo:}
    http://forum.de.selfhtml.org/archiv/2003/10/60651/#m341175
    1. Ja, sorry. Finger waren zu fix... :)

  2. Hallo,

    ich habe eine Baumstruktur aufgebaut, aber bei der Ansicht
    sollen die Unterordner nun ähnlich wie beim Explorer
    unter Windows aufgeklappt werden können.

    Ein wenig Quelltext wäre nicht übel.

    Aber ich bin heute in Geberlaune:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Baumstruktur</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <style type="text/css">
    <!--
    ul {margin:0; padding-left:1em; list-style-type:none;}
    li {margin:0; padding:0;}
    ul#uo01 {display:none; margin-left:1em;}
    ul#uo02 {display:none; margin-left:1em;}
    ul#uo03 {display:none; margin-left:1em;}
    -->
    </style>
    <script type="text/javascript">
    <!--
    function zeigeUnterordner(id) {
      document.getElementById("b"+id).firstChild.nodeValue = "-";
      document.getElementById("b"+id).onclick = function () {versteckeUnterordner(id)};
      document.getElementById("uo"+id).style.display="block";
    }
    function versteckeUnterordner(id) {
      document.getElementById("b"+id).firstChild.nodeValue="+";
      document.getElementById("b"+id).onclick = function () {zeigeUnterordner(id)};
      document.getElementById("uo"+id).style.display="none";
    }
    //-->
    </script>
    </head>
    <body>
    <ul>
     <li><button id="b01" onclick="zeigeUnterordner('01')">+</button>Hauptordner<ul id="uo01">
        <li>Unterordner</li>
        <li>Unterordner</li>
        <li>Unterordner</li>
      </ul>
     </li>
     <li><button id="b02" onclick="zeigeUnterordner('02')">+</button>Hauptordner<ul id="uo02">
        <li>Unterordner</li>
        <li>Unterordner</li>
        <li>Unterordner</li>
        <li>Unterordner</li>
      </ul>
     </li>
     <li><button id="b03" onclick="zeigeUnterordner('03')">+</button>Hauptordner<ul id="uo03">
        <li>Unterordner</li>
        <li>Unterordner</li>
      </ul>
     </li>
    </ul>
    </body>
    </html>

    viele Grüße

    Axel

    1. Danke für die Antwort und für die Mühe. Das bringt mich schon mal
      ein Stück weiter auch wenn es noch nicht ganz das ist was ich
      gesucht habe. Es darf nämlich immer nur ein Unterpunkt auftauchen
      und das dann ja auch noch verschachtelt.

      Der Code ist folgender:

      <table>
      <tr>
         <td>
           <div id="id_1" style="display:none;">
            Hauptkategorie...
              <div id="id_1_1" style="display:none;">
                 Unterkategorie1...
              </div>
              <div id="id_1_2" style="display:none;">
                 Unterkategorie2...
              </div>
           </div>
           <div id="id_2" style="display:none;">
            Hauptkategorie...
              <div id="id_2_1" style="display:none;">
                 Unterkategorie1...
              </div>
              <div id="id_2_2" style="display:none;">
                 Unterkategorie2...
              </div>
           </div>
         </td>
      </tr>
      </table>

      Jetzt kann in den Hauptkategorien etwas ausgewählt werden und
      je nachdem was augewählt wird, soll eine Unterkategorie angezeigt
      werden. Die Tabelle muß Ihre Größe dabei immer anpassen und es
      darf kein Freiraum entstehen wenn man die zweite Unterkategorie
      angezeigt bekommt.

      Eigentlich ist das ganze nochmal in einem Div-Container und es gibt
      auch noch eine weitere Unterkategorie unter der Unterkategorie, aber
      ich hoffe dieser Teil reicht um das Problem zu erklären...

      Mfg
      Zerberus

      1. Hi,

        Die Tabelle muß Ihre Größe dabei immer anpassen und es
        darf kein Freiraum entstehen wenn man die zweite Unterkategorie
        angezeigt bekommt.

        warum verwendest Du überhaupt eine Tabelle? Wie schon vorgeschlagen wäre eine Liste doch wesentlich besser geeignet, oder versuchst Du nicht etwas in dieser Art: http://www.1ngo.de/sitemap.html umzusetzen?

        freundliche Grüße
        Ingo