Ordnerstruktur mit Listen abbilden?

[Johnes]

Hi Leutz!

Ich frag mich, wie man eine Ordnerstruktur wie bei einem Betriebssystem im Browser in HTML abbilden kann.
Mit ner Liste geht das nicht, weil man da einem Ordner sozusagen keinen Namen geben kann. Guckt mal hier:

<ul id="ordner1">
   <li>
      <ul id="ordner2">
         <li>Datei 1</li>
         <li>Datei 2</li>
         <li>Datei ...</li>
         <li>
            <ul id="ordner3">
               <li>Datei 1</li>
               <li>Datei 2</li>
               <li>Datei ...</li>
            </ul>
         </li>
      </ul>
   </li>
   <li>Datei 1</li>
</ul>

Ich will jetzt, dass der Besucher sieht, dass die erste Liste für den Ordner1 steht. Aber das würde ja so aussehen:

+ Datei1
         + Datei2
         + Datei..
                   + Datei1
                   + Datei2
                   + Datei..

• Datei1

Ich will es aber so haben:

• Ordner1
            + Ordner2 + Datei1
                      + Datei2
                      + Datei..
                      + Ordner1 + Datei1
                                + Datei2
                                + Datei..
            + Datei1

Also ich will, dass der Besucher auch für die Ordner den Namen sieht. Aber wie mach ich das am besten? Eigentlich will ich ja nicht sowas schreiben:

<ul id="ordner1">
   <li>Ordner1</li>
...

Weil "Ordner1" sieht jetzt aus wie eine Datei, obwohl es nur der Name für den Ordner sein soll. was mach ich jetzt?
Bitte helft mir!

[Beat]

Der langen Rede kurzer Sinn:
Verwende Definitionslisten.

mfg Beat

[Johnes]

Der langen Rede kurzer Sinn:
Verwende Definitionslisten.

Sind Definitionslisten wirklich das richtige Mittel, um eine Ordnerstruktur abzubilden???
Außerdem kann ich die dann mit CSS nicht mehr formatieren, weil ja die Elemente nicht mehr verschachtelt werden. Ich müsste dann jedem Element eine Klasse zuweisen, was ich auch ungerne möchte. Gibt es vielleicht noch andere Listen, die dafür besser geeignet sind oder sind alle Listen, die es gibt, hier bei SELFHTML aufgeführt?

[Beat]

Verwende Definitionslisten.
Sind Definitionslisten wirklich das richtige Mittel, um eine Ordnerstruktur abzubilden???
Außerdem kann ich die dann mit CSS nicht mehr formatieren, weil ja die Elemente nicht mehr verschachtelt werden.

Warum können dl Listen nicht verschachtelt werden?

<dl>
 <dt>Ordner</dt>
 <dd>
   <dl>
     <dt>Unterordner</dt>
     <dd>Datei</dd>
   </dl>
 </dd>
 <dd>Datei</dd>
</dl>

mfg Beat

[EisFuX]

(Hallo|Hi(ho)|Tag) Johnes,

Der langen Rede kurzer Sinn:
Verwende Definitionslisten.

Sind Definitionslisten wirklich das richtige Mittel, um eine Ordnerstruktur abzubilden???

Hmmm, der Firefox-Browser speichert (genauso wie sein Amtsvorgänger von Netscape) schon seit Ewigkeiten seine Lesezeichensammlung (bookmark.html) in einer verschachtelten Definitionsliste. Und wenn du dir im Firefox mal die Lesezeichen-Verwaltung anschaust, wirst du feststellen, dass dies einer Ordnerstruktur sehr nahe kommt.

Außerdem kann ich die dann mit CSS nicht mehr formatieren, weil ja die Elemente nicht mehr verschachtelt werden.

Warum nicht?

Ich müsste dann jedem Element eine Klasse zuweisen, was ich auch ungerne möchte.

Häh, warum? Dein Ausgangspost legt nahe, dass du vor allem Verzeichnisse von Dateien unterscheiden willst. Das ist kein Problem in einer Definitionsliste, wenn du für die Ordner <dt>...</dt> und für die Dateien <dd>...</dd> benutzt. Mit CSS kannst du die dann ganz nach Wunsch dekorieren.

MffG
EisFuX

[Gunnar Bittersmann]

@@Johnes:

Ich will es aber so haben:

• Ordner1
            + Ordner2 + Datei1
                      + Datei2
                      + Datei..
                      + Ordner1 + Datei1
                                + Datei2
                                + Datei..
            + Datei1

In XHTML 2 problemlos [XHTML2 §11]:

<nl>  
  <label>Ordner1</label>  
  <li>  
    <nl>  
      <label>Ordner2</label>  
      <li>Datei1</li>  
      <li>Datei2</li>  
      <li>Datei..</li>  
      <li>  
        <nl>  
          <label>Ordner1</label>  
          <li>Datei1</li>  
          <li>Datei2</li>  
          <li>Datei..</li>  
        </nl>  
      </li>  
    </nl>  
  </li>  
  <li>Datei1</li>  
</nl>

Die Macher von HTML 5 sehen solch vernünftige Auszeichnung nicht vor; und dummerweise verzögert sich durch die Parallelentwicklung von HTML 5 die Entwicklung von XHTML 2.

Bleibt also nur Flickschusterei: Die Ornertitel dürfen nicht innerhalb der Liste stehen, sondern außerhalb:

<span>Ordner1</span>  
<ul>  
  <li>  
    <span>Ordner2</span>  
    <ul>  
      <li>Datei1</li>  
      <li>Datei2</li>  
      <li>Datei..</li>  
      <li>  
        <span>Ordner1</span>  
        <ul>  
          <li>Datei1</li>  
          <li>Datei2</li>  
          <li>Datei..</li>  
        </ul>  
      </li>  
    </ul>  
  </li>  
  <li>Datei1</li>  
</ul>

Statt 'span' auch gern ein anderes Element: 'h#' bspw.

Live long and prosper,
Gunnar

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

Statt 'span' auch gern ein anderes Element: 'h#' bspw.

Auch die bereits vorgeschlagenen Definitionslisten ließen sich einsetzen, wobei das aber wegen der Verschachtelungstiefe recht unübersichtlich wird:

<dl>  
  <dt>Ordner1</dt>  
  <dd>  
    <ul>  
      <li>  
        <dl>  
          <dt>Ordner2</dt>  
          <dd>  
            <ul>  
              <li>Datei1</li>  
              <li>Datei2</li>  
              <li>Datei..</li>  
              <li>  
                <dl>  
                  <dt>Ordner1</dt>  
                  <dd>  
                    <ul>  
                      <li>Datei1</li>  
                      <li>Datei2</li>  
                      <li>Datei..</li>  
                    </ul>  
                  </dd>  
                </dl>  
              </li>  
            </ul>  
          </dd>  
        </dl>  
      </li>  
      <li>Datei1</li>  
    </ul>  
  </dd>  
</dl>

An XHTML 2 führt kein Weg vorbei. Bleibt zu hoffen, dass der Hype um HTML 5 bald ein Ende hat.

Live long and prosper,
Gunnar

[Beat]

An XHTML 2 führt kein Weg vorbei. Bleibt zu hoffen, dass der Hype um HTML 5 bald ein Ende hat.

Hallo Gunnar.

Ich sehe da persönlich keine Hype.
Und ich sehe auch nicht, dass es demnächst eingeführt wird.

Du bringst eine unnötige Komplexität in Definitionslisten hinein.
In HTML 4.01 gilt.
Auf ein dt Element dürfen beliebig viele (oder keine) dd Elemente folgen.
Da ist kein Grund ul/ol in dl hinein zu mischen.

  
<dl>  
 <dt>A</dt>  
 <dd>  
   <dl>  
    <dt>B</dt>  
    <dd>b1</dd>  
    <dd>b2</dd>  
   </dl>  
 </dd>  
 <dd>a1</dd>  
 <dd>a2</dd>  
 <dt>C</dt>  
 <dt>D</dt>  
</dl>  

mfg Beat

[Gunnar Bittersmann]

@@Beat:

Da ist kein Grund ul/ol in dl hinein zu mischen.

Na gut, da geb ich mich geschlagen. Das sagt zwar nicht ganz dasselbe aus, ist aber in diesem Fall durchaus angebracht.

Es hat ja auch exakt dieselbe Struktur wie mein XHTML-2-Code:

nl    ↔ dl
label ↔ dt
li    ↔ dd

Live long and prosper,
Gunnar

[suit]

Da ist kein Grund ul/ol in dl hinein zu mischen.

doch, wenngleich aber sehr unübersichtlich

in falle von defintionslisten stellst du einen ordner und eine datei auf der selben ebene in bezug zueinander - der ist aber nicht vorhanden, eine normale verschachtelte liste ist imo die beste lösung und am einfachsten verständlich - um einen ordner von einer datei zu unterscheiden könnte man nun sagen "alle liste die ein <ul />-element als kind haben sind ordner" aber die wären mit css nicht selektierbar (oder liege ich da jetzt falsch) darum muss eine klasse herhalten - die gewichtung eines ordners ist dadurch zwar nicht höher, aber der baum bleibt logisch

  
<ul>  
  <li class="folder">Ordner 1  
  <ul>  
    <li class="folder">Ordner 1.1  
    <ul>  
      <li>Datei</li>  
     <li>Datei</li>  
     <li>Datei</li>  
    </ul>  
   </li>  
    <li class="folder">Ordner 1.2  
    <ul>  
     <li>Datei</li>  
     <li>Datei</li>  
    </ul>  
   </li>  
    <li>Datei</li>  
    <li>Datei</li>  
   <li>Datei</li>  
   <li>Datei</li>  
   <li>Datei</li>  
  </ul>  
 </li>  
</ul>  

[Ingo Turski]

Hi,

um einen ordner von einer datei zu unterscheiden könnte man nun sagen "alle liste die ein <ul />-element als kind haben sind ordner" aber die wären mit css nicht selektierbar (oder liege ich da jetzt falsch) darum muss eine klasse herhalten

nö.

<h1>Verzeichnislisting</h1>

<ul>
  <li><h2>Ordner 1</h2>
[...]

  
Oder auch vielleicht:  
~~~html
  
<ul>  
  <li><dfn>Verzeichnis:</dfn> <strong>Ordner 1</strong>  
[...]  

freundliche Grüße
Ingo

[at]

Hallo.

in falle von defintionslisten stellst du einen ordner und eine datei auf der selben ebene in bezug zueinander - der ist aber nicht vorhanden, eine normale verschachtelte liste ist imo die beste lösung und am einfachsten verständlich

Letzteres vielleicht, aber die beste Lösung ist es wahrscheinlich nicht.
Die Denkweise, die dir diese Verständnisschwierigkeiten einbringt, ist aus informatischer Sicht sicher nachvollziehbar. Aber der Inhalt einer Definitionsliste funktioniert semantisch ähnlich linear wie eine Kombination von Überschriften und Absätzen: Die Überschrift oder der Definitionsterm ist das übergeordnete Element, die Absätze oder Definitionstexte die untergeordneten. Diese semantische Logik ersetzt die Notwendigkeit, syntaktische Ebenen zu schaffen.
MfG, at

[molily]

Hallo,

Die Macher von HTML 5 sehen solch vernünftige Auszeichnung nicht vor

In HTML 5 gibt es das menu-Element mit dem label-Attribut?!

Mathias

[Gunnar Bittersmann]

@@molily:

Die Macher von HTML 5 sehen solch vernünftige Auszeichnung nicht vor

In HTML 5 gibt es das menu-Element mit dem label-Attribut?!

Du meinst ernsthaft, _Inhalt_ in einem Attribut zu verstecken statt in einem Kindelement unterzubringen sei vernünftig?

Live long and prosper,
Gunnar

[molily]

Hallo,

Du meinst ernsthaft, _Inhalt_ in einem Attribut zu verstecken statt in einem Kindelement unterzubringen sei vernünftig?

Weiß nicht, ob das vernünftig ist, ich wollte nur anmerken, dass es so eine Datenstruktur durchaus in HTML 5 gibt. Ist mir ehrlich gesagt nicht der Rede wert, ob das nun ein Element oder Attribut ist.

Mathias

[at]

Hallo.

Du meinst ernsthaft, _Inhalt_ in einem Attribut zu verstecken statt in einem Kindelement unterzubringen sei vernünftig?

Wird <img src="foo" alt="Text" /> dann auch durch <img src="foo">Text</img> ersetzt?
Und was soll "verstecken" in diesem Zusammenhang bedeuten?
MfG, at

[Gunnar Bittersmann]

@@at:

Wird <img src="foo" alt="Text" /> dann auch durch <img src="foo">Text</img> ersetzt?

Selbstverständlich.

Warum sollte auch bei 'img' eine andere Syntax für dieselbe Funktionalität gelten als bei 'object' (und 'iframe')?

Und was soll "verstecken" in diesem Zusammenhang bedeuten?

Was zeigt ein HTML-Tagsoup-Parser an, wenn irgendwas in einem ihm unbekannten Element steht? Was zeigt er an, wenn das in einem ihm unbekannten Attribut steht?

Live long and prosper,
Gunnar

[at]

Hallo.

@@at:

Wir wissen doch alle, wem du antwortest. Das hier ist doch kein Board.

Selbstverständlich.

Das trifft sich gut. Ich mag keine leeren Elemente, und <img> ist das einzige, das ich innerhalb von <body> verwende.

Warum sollte auch bei 'img' eine andere Syntax für dieselbe Funktionalität gelten als bei 'object' (und 'iframe')?

Das frage ich mich schon lange. Allerdings frage ich mich auch, wozu man überhaupt ein <img> benötigt, wenn es doch <object> gibt.

Was zeigt ein HTML-Tagsoup-Parser an, wenn irgendwas in einem ihm unbekannten Element steht?

Von welchem ihm nicht durch die DTD bekannten Element sprichst du?

Was zeigt er an, wenn das in einem ihm unbekannten Attribut steht?

Von welchem ihm nicht durch die DTD bekannten Attribut sprichst du?
MfG, at

[Gunnar Bittersmann]

@@at:

@@at:
Wir wissen doch alle, wem du antwortest.

Die Forumssuche aber nicht.

Das frage ich mich schon lange. Allerdings frage ich mich auch, wozu man überhaupt ein <img> benötigt, wenn es doch <object> gibt.

Gute Frage.

Von welchem ihm nicht durch die DTD bekannten Element sprichst du?
Von welchem ihm nicht durch die DTD bekannten Attribut sprichst du?

Seit molilys Posting war von HTML 5 die Rede. Inhalt neu eingeführter Elemente stellen bisherige Browser dar; Werte neu eingeführter Attribute nicht.

Live long and prosper,
Gunnar

[at]

Hallo.

Wir wissen doch alle, wem du antwortest.

Die Forumssuche aber nicht.

Also maschinenlesbare Semantik auf inhaltlicher Ebene. Na gut, die Notwendigkeit sehe ich zwar nicht, aber jetzt muss ich mich wenigstens nicht mehr über diese Einleitungen wundern.

Seit molilys Posting war von HTML 5 die Rede. Inhalt neu eingeführter Elemente stellen bisherige Browser dar; Werte neu eingeführter Attribute nicht.

Was hat denn HTML mit der Darstellung zu tun?
MfG, at

[Gunnar Bittersmann]

@@at:

Inhalt neu eingeführter Elemente stellen bisherige Browser dar; Werte neu eingeführter Attribute nicht.

Was hat denn HTML mit der Darstellung zu tun?

„Stellen dar“ meint hier nicht, ob rot oder grün; sondern ob oder ob nicht. Also eher „zeigen an“:

Inhalt neu eingeführter Elemente zeigen bisherige Browser an; Werte neu eingeführter Attribute nicht.

Live long and prosper,
Gunnar

[at]

Hallo.

„Stellen dar“ meint hier nicht, ob rot oder grün; sondern ob oder ob nicht. Also eher „zeigen an“:

Ach so, du meinst die display-Eigenschaft. Die gehört aber auch nicht zu HTML.

Inhalt neu eingeführter Elemente zeigen bisherige Browser an; Werte neu eingeführter Attribute nicht.

Die Nutzer-Stylesheets der Browser gelten in diesem Forum gemeinhin als unzuverlässig. Wobei ich zugeben muss, dass ich bei <head> auch auf ein browser-eigenes display: none; verlasse. Das sollte ich ändern. Insofern danke ich dir für den impliziten Hinweis.
MfG, at

[Tim Tepaße]

Hallo,

In HTML 5 gibt es das menu-Element mit dem label-Attribut?!

Semantisch weist das eher auf Applikation-Menüs als auch Kontextmenüs hin und ermöglicht dazu die weitere Nutzung von In-Flow-Menüs im Chrome des Browsers. Mehr im Sinne von HTML 5 ist das (hoffnungslos überkomplizierte) <datagrid>-Element, schließlich ist das genau für den Anwendungszweck des Originalposters geplant. In diesem Fall ist der Inhalt von <datagrid> vermutlich verschachtelte geordnete Listen bei denen die Ordner mit der header-Klasse versehen sind oder gleich hX-Elemente enthalten, wenn ich das bis ins Detail versuche zu überblicken.

(XHTML 2 Nerd Content: Wo wurde im Originalposting gesagt, dass die Darstellung einer Ordner-Struktur die Aufgabe einer Navigation erfüllt? ;)

Tim

[Felix Riesterer]

Lieber Johnes,

wäre mein Download-Ordner das, was Du suchst?

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Felix Riesterer]

Aaargh,

wäre mein Download-Ordner das, was Du suchst?

das Teil ist ja sowas von veraltet... Schau Dir lieber diesen Download-Ordner an!

Liebe Grüße aus Ellwangen,

Felix Riesterer.