Startseite >> Projekte >> CSS-Formatierungen >> cssTree

cssFormate: cssTree - CSS-Ordnerbaumstruktur

Übersicht

Original-Name

cssTree

Status

PRODUCTION STABLE - Diese Software wird nach Bedarf weiterentwickelt.

Lizenz

GPL

Aktuelle Version

1.00

aktive Entwickler

Ralf Büscher (ralf P.U.N.K.T buescher A.T web P.U.N.K.T de )

Verfasser, Urheber

Ralf Büscher (ralf P.U.N.K.T buescher A.T web P.U.N.K.T de )

Kurzbeschreibung

Darstellen einer Ordnerbaumstruktur mit Hilfe der XHTML-Tags <ul>, <li> und dem Attribut "class"

Voraussetzungen

HTML- bzw. XHTML-konformer sowie CSS1 fähiger Browser

_ Detaillierte Beschreibung

Die Darstellung einer Ordnerbaumstruktur sollte in jedem Browser möglich sein, der CSS unterstützt.

Die Entwicklung einer Möglichkeit zur Darstellung einer Ordnerbaumstruktur ohne Javascript oder andere Skriptsprachen, die im Browser eins Webseitenbesuchers ausgeführt werden ist das Ergebnis zahlreicher Erwägungen bei der Auslieferung von Inhalten an Browser bei denen unbekannt ist, ob der Browser überhaupt Javascript ausführen kann und ob der Benutzer Javascript in seinem Browser aktiviert hat sowie der Problematik von Browsern zur alternativen Widergabe der Inahlte von Webseiten wie sie zB. von Blinden und Sehbehinderten benutzt werden und hinsichtlich der Problematik von Suchmaschinen, die keine Inhalte durchsuchen und indizieren können, die durch Javascripte nachträglich in einem Dokument erzeugt werden.

Da sowohl Blinde und Sehbehinderte als auch Suchmaschinen auf die grafische Auszeichnung einer Ordnerbaumstruktur verzichten sondern vielmehr Rückschlüsse aus der Struktur ziehen, bot es sich an, als kleinsten gemeinsamen Nenner das HTML-Tag <UL> (in XHTML <ul>) für die Darstellung von Listen für die unformatierte Darstellung einer Ordnerbaumstruktur zu verwenden.

<ul>
  <li>Wurzel des Verzeichnisbaumes
    <ul>
      <li>Ordner im Verzeichnisbaum</li>
      <li>Ordner</li>
      <li>Ordner
        <ul>
          <li>Unterordner</li>
          <li>Unterordner</li>
          <li>Unterordner</li>
        </ul>
      </li>
      <li>Ordner
        <ul>
          <li>Unterordner</li>
          <li>Unterordner</li>
          <li>Unterordner</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Der vorstehende Auszug aus dem Quelltext eines HTML-Dokumentes wird von jedem visuellen Browser wie folgt dargestellt.

CSS bieten nun die Möglichkeit die Symbole die zur Illustration der Aufzählung verwendet werden aus einem Satz definierter Werte auszuwählen oder aber eine Grafik als zu verwendendes Aufzählungszeichen frei zu definieren.

<ul style="list-style-position:inside;list-style-image:url('/images/ordner.gif');">
  <li>Wurzel des Verzeichnisbaumes
    <ul>
      <li>Ordner im Verzeichnisbaum</li>
      <li>Ordner</li>
      <li>Ordner
        <ul>
          <li>Unterordner</li>
          <li>Unterordner</li>
          <li>Unterordner</li>
        </ul>
      </li>
      <li>Ordner
        <ul>
          <li>Unterordner</li>
          <li>Unterordner</li>
          <li>Unterordner</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Der vorstehende Auszug aus dem Quelltext eines HTML-Dokumentes sollte von jedem visuellen Browser, der CSS (Version1) unterstützt, im folgenden als einfache Aufzählungsliste mit einem kleinen Ordner als Aufzählungszeichen dargestellt werden.

Da CSS auch die Möglichkeit bietet für jedes sichtbare Element ein Bild als Hintergund zu definieren sowie die Position des Elementes und des Hintergundes punktgenau festzulegen, kann man mit wenig Aufwand viel erreichen.

<ul style="
  list-style-position:inside;
  list-style-image:url('/images/ordner.gif');
  margin-left:8px;
  ">
  <li>Wurzel des Verzeichnisbaumes
    <ul style="
    display:block;
    margin-left:0;
    padding-left:22px;
    background-image:url('/images/linie.gif');
    background-position:0 0;
    background-repeat:repeat-y;
    ">
      <li>Ordner im Verzeichnisbaum</li>
      <li>Ordner</li>
      <li>Ordner
        <ul style="
        display:block;
        margin-left:0;
        padding-left:22px;
        background-image:url('/images/linie.gif');
        background-position:0 0;
        background-repeat:repeat-y;
        ">
          <li>Unterordner</li>
          <li>Unterordner</li>
          <li style="
          margin-left:-19px;
          padding-left:19px;
          background-image:url('/images/letzten_verdecken.gif');
          background-position:0px -6px;
          background-repeat:no-repeat;
          ">Unterordner</li>
        </ul>
      </li>
      <li style="
      margin-left:-19px;
      padding-left:19px;
      background-image:url('/images/letzten_verdecken.gif');
      background-position:0px -6px;
      background-repeat:no-repeat;
      ">Ordner
        <ul style="
        display:block;
        margin-left:-19px;
        padding-left:41px;
        background-image:url('/images/zweite_linie.gif');
        background-position:0 0;
        background-repeat:repeat-y;
        ">
          <li>Unterordner</li>
          <li>Unterordner</li>
          <li style="
          margin-left:-19px;
          padding-left:19px;
          background-image:url('/images/letzten_verdecken.gif');
          background-position:0px -6px;
          background-repeat:no-repeat;
          ">Unterordner</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Der vorstehende Auszug aus dem Quelltext eines HTML-Dokumentes wird von jedem visuellen Browser wie folgt dargestellt.

Mit ein paar kleinen Grafiken und etwas Liebe zum Detail kommt man dann leicht zu folgenden Einteilungen von Style-Klassen.


  ul.tree {
    list-style-position:inside;
    list-style-image:url("/images/home.gif");
    margin:1px;
    padding:0;
  }
  
  ul.tree li {
    margin:0;
    padding:0;
    white-space:nowrap;
  }
  
  ul.tree ul {
    margin:0;
    padding:0;
    list-style-position:inside;
    background-image:url("/images/linie.gif");
    background-position:0px 0px;
    background-repeat:repeat-y;
    display:block;
    vertical-align:middle;
  }
  
  ul.tree ul li ul {
    margin-left:19px;
  }
  
  ul.tree li.file_last,
  ul.tree li.folder_last,
  ul.tree li.folder_c_last,
  ul.tree li.folder_last_open,
  ul.tree li.folder_c_last_open {
    background-image:url("/images/letzten_verdecken.gif");
    background-position:0px -8px;
    background-repeat:no-repeat;
  }
  
  ul.tree li.folder_last_open ul.f,
  ul.tree li.folder_c_last_open ul.f  {
    background-image:url("/images/zweite_linie.gif");
    margin-left:0;
    padding-left:19px;
  }
  
  ul.tree li.file,
  ul.tree li.file_last {
    list-style-image:url("/images/datei.gif");
  }
  
  ul.tree li.folder,
  ul.tree li.folder_last {
    list-style-image:url("/images/ordner.gif");
  }
  ul.tree li.folder_c,
  ul.tree li.folder_c_last {
    list-style-image:url("/images/ordner_mit_unterordnern.gif");
  }
  ul.tree li.folder_open,
  ul.tree li.folder_last_open {
    list-style-image:url("/images/ordner_offen.gif");
  }
  ul.tree li.folder_c_open,
  ul.tree li.folder_c_last_open {
    list-style-image:url("/images/ordner_mit_unterordnern_offen.gif");
  }

Und das auszuzeichnende HTML ist nun auch wieder einfacher lesbar.

<ul class="tree">
  <li>Wurzel des Verzeichnisbaumes
    <ul>
      <li class="folder_c">Ordner im Verzeichnisbaum</li>
      <li class="folder">Ordner</li>
      <li class="folder_c_open">Ordner
        <ul class="f">
          <li class="folder">Unterordner</li>
          <li class="folder">Unterordner</li>
          <li class="folder_c_last_open">Unterordner
            <ul class="f">
              <li class="folder">Unterordner</li>
              <li class="file">Dokument</li>
              <li class="folder_c_last">Unterordner</li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="folder_c_last_open">Ordner
        <ul class="f">
          <li class="folder_c">Unterordner</li>
          <li class="folder_c">Unterordner</li>
          <li class="folder_last_open">Unterordner</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Und das Ergebnis kann sich sehen lassen.

Jeder Entwickler freut sich sehr über eine E-Mail voll des Lobes, aber es erscheint einfacher Taten sprechen zu lassen. ;-)