Zur Navigation

Baumstruktur mit CSS [2]

11 Jörg Kruse

Muss mich korrigieren, bei Shift+F5 aktualisiert mein FF überhaupt nicht - nach Shift+Ctr+R erscheinen die Abstände auch wieder

Mich stört ja schon wahnsinnig dieses src beim img, wenn ich das noch wegbekomme... vielleicht mit einem anderen Element, dem der Knoten als Background gesetzt wird?

dem a selbst?

Ich habe gestern die Deer-Park Version (entspricht FF 1.6a1 installiert, dort trat der Effekt nicht auf.

dann kann man dem ja entgegensehen, dass eine solche Baumstruktur in Zukunft einfacher zu erstellen ist :)

06.09.2005 12:05 | geändert: 06.09.2005 12:06

12 C)-(iLL@

bei Shift+F5 aktualisiert mein FF überhaupt nicht
Das geht auch nur mit Shift+Klick auf Aktualisieren = komplett neu laden, ich glaube das entspricht Ctrl+Shift+R.

dem a selbst?


Ver... hätte ich das früher gelesen ;) Das versuche ich jetzt.

Ich habe es mit einem <p> innerhalb der <li> gelöst, das ist auch schon nicht übel. Aber der komplette Reload bringt einen neuen Effekt, siehst Du ihn? ;)
dann kann man dem ja entgegensehen, dass eine solche Baumstruktur in Zukunft einfacher zu erstellen ist :)
Leider sieht es momentan alles andere als rosig aus. Mit CSS3 ja, aber bis die Eigenschaft last-child nicht von Opera unterstützt wird ist das eben noch etwas unsauber. Die Gecko-Gemeinde kann sich glücklich schätzen, dass dies bereits integriert ist. Ich verstehe nicht wie man ohne Baumstrukturen auskommen kann. Dateilisten, Sitemaps, Verzeichnisse, Foren, News - an so vielen Orten kann man sie einsetzen. Und dennoch findet man hierzu Lösungen im Netz die mit 6 Divs arbeiten, mit Tabellen, 10 verschiedenen gifs oder noch schlimmer. Das ist kein Zustand ;)

06.09.2005 12:52

13 C)-(iLL@

Das wars! <p> gekillt, background rein ins a, super! Klasse Tip, Danke! CSS gespart, Markup gespart. Der IE zeigt nur den Hauptknoten gleich wie die Subknoten. Wenn es ihm gefällt ;) Vergrößern lässt es sich dank der neuen XL-Knoten nun auch. Die gifs sind insgesamt 4 kB groß :D

Den angespielten Effekt, dass Teile der Äste beim Shift+Reload verschwinden, war Schuld der last-child Pseudoklasse. Die Gecko-Implementation hat noch Macken, die Klasse lc macht das aber überflüssig.
Kann es sein, dass es nun endlich tatsächlich funktioniert? ;)

Edit: neue Version nach Jörgs Vorschlag, welche das <p> überflüssig macht - mit a display:block und dem span im a.

Hier ein laufendes Beispiel (v.2) und der Sourcecode:
<?php


class CSSTree {
   
   var $tree;
   var $ul;
   
  function drawTree($tree, $depth=0) { 
     $result = "\n".str_repeat(' ', $depth*2)."<ul>\n";
     list($last, $li) = array(count($tree)-1, 0);
     foreach (array_keys($tree) as $node) {
       $branch =& $tree[$node];
       $class = ($li++ == $last) ? ' class="lc"' : NULL;
       if (is_array($branch['node'])) {
         $result .= str_repeat(' ', $depth*2+2).'<li'.$class.'>'.
                    '<a href="'.$branch['href'].'" title="'.$branch['title'].'">'.$branch['title'].
                    ' <span>'.$branch['date'].'</span></a>'.
	                      $this->drawTree($branch['node'], $depth+1).
                    str_repeat(' ', $depth*2+2)."</li>\n";
       } else {
         $result .= str_repeat(' ', $depth*2+2).'<li'.$class.'>'.
                    '<a href="'.$branch['href'].'" title="'.$branch['title'].'">'.
                    $branch['title'].' <span>'.$branch['date'].'</span></a>'.
                    "</li>\n";
       }
     }
     return $result.str_repeat(' ', $depth*2)."</ul>\n";
  }
     
  function showTree($id = NULL) {
    $this->ul = $this->drawTree($this->tree);
    if ($id != NULL) $this->ul = substr_replace($this->ul, '<ul id="'.$id.'">', 0, 5);
    print($this->ul);
  }
   
} 

$ct = new CSSTree;
$ct->tree = array(array('title'=>'Foo', 'date'=>'06.09.2005', 'href'=>'#', 
                  'node' => array(array('title'=>'Foo', 'date'=>'06.09.2005', 'href'=>'#'), 
                  array('title'=>'Foo', 'date'=>'06.09.2005', 'href'=>'#'), 
                  array('title'=>'Foo', 'date'=>'06.09.2005', 'href'=>'#'))), 
                  array('title'=>'Foo', 'date'=>'06.09.2005', 'href'=>'#',  
                  'node' => array(array('title'=>'Foo', 'date'=>'06.09.2005', 'href'=>'#'), 
                  array('title'=>'Foo', 'date'=>'06.09.2005', 'href'=>'#'), 
                  array('title'=>'Foo', 'date'=>'06.09.2005', 'href'=>'#', 
                  'node' => array(array('title'=>'Foo', 'date'=>'06.09.2005', 'href'=>'#'), 
                  array('title'=>'Foo', 'date'=>'06.09.2005', 'href'=>'#'), 
                  array('title'=>'Foo', 'date'=>'06.09.2005', 'href'=>'#'))))), 
                  array('title'=>'Foo', 'date'=>'06.09.2005', 'href'=>'#'));
?>
<!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="en" lang="en">
<head>
<title>CSS-Baumstruktur</title>
<meta http-equiv="content-type" content="text/html;  charset=ISO-8859-1" />
<style type="text/css">

div#folderview {
  height:30%;
  width:30%;
  border:1px solid;
  border-color: gray black black gray;
  overflow:hidden;
}
ul#filelist { 
 margin: 0 0 0 10px; 
 padding: 0; 
 background: white; 
} 
ul#filelist ul {
  padding:0;
  margin:0;
}
ul#filelist > ul{ 
  padding: 0; 
  margin: 0 0 0 10px; 
} 
ul#filelist li a { 
  display:block;
  font-size:12px; 
  text-decoration: none; 
  color: black; 
  margin:0 0 0 -19px;
  padding: 0 0 0 10px;
  background:url('nodexxl.gif') no-repeat center left;
} 
ul#filelist > li > a {
  padding:0;
  font-weight:bold;
  background:url('node0xl.gif') no-repeat center left;
  padding: 0 0 0 20px;

  margin:0 0 0 -21px;
}
ul#filelist li a:hover{ 
  color: blue; 
} 
ul#filelist li{ 
  background-image: url('branch.gif'); 
  background-repeat: repeat-y;
  background-position: 9px 0; 
  padding: 2px 0 2px 28px; 
  list-style:none;
} 

ul#filelist > li{ 
  padding: 2px 0 2px 20px; 
  margin:0;
  list-style:none;
}

ul#filelist li.lc { /* Opera fix (last-child) */
 background-repeat: no-repeat; 
}
 
ul#filelist ul > li {
  background-repeat: repeat-y; 
} 

ul#filelist * span {
   margin-left: 1px;
   color:#333;
   font-size:10px;
	 font-weight:normal;
}

</style>
</head>

<body>
 <div id="folderview">
 <?=$ct->showTree('filelist')?>
 </div>
</body>
</html>

Die Einzüge & Umbrüche können natürlich rausgekickt werden, dann wird das ganze noch schneller.

06.09.2005 13:09 | geändert: 07.09.2005 13:57

14 Jörg Kruse

Edit: Mit der <a>-Methode wird zwar das Markup kürzer und das ganze zum IE kompatibler, aber beim Vergrößern brechen die Knoten trotz langer gifs ab, und wer braucht schon den IE ;). So habe ich es bei der <p>-Methode belassen, welche diesen Effekt rein zufällig nicht hat.

vielleicht weil es sich bei <p> im Gegensatz zu <a> und <span> um ein Blockelement handelt?

Kann es sein, dass es nun endlich tatsächlich funktioniert? ;)

ich habe jedenfalls keine Fehlanzeige mehr entdeckt :)

06.09.2005 20:09

15 C)-(iLL@

vielleicht weil es sich bei <p> im Gegensatz zu <a> und <span> um ein Blockelement handelt?

Du winkst mit einem ganzen Zaun und ich steh auf der Leitung. Natürlich, ein display:block in deiner <a> - Version löst es!

07.09.2005 13:22

16 Ralf Büscher (Gast)

Hallo Rudy,

ich hatte genau den selben Gedanken in Hinsicht auf Darstellung einer Order- bzw. Baumstruktur.

Siehe dazu eine Beschreibung der Umsetzung
[url="http://www.shop-builder.net/de/projects/css_formats/css_tree/"]cssTree
und das ganze auch live unter
[url="http://www.personal-robotics.com/"]www.personal-robotics.com/ (auch wenn dort noch das Script zur Dom-Manipulation fehlt, aber das ist in Arbeit, und jeder der ein bisschen Javascript beherrscht kann das dann auch).

Das Interessante an dem Ganzen ist die Möglichkeit durch einfachen Wechsel der Klasse die Struktur entweder als Baumstruktur oder als Menu anzeigen zu lassen.

Hier mal die CSS-Regeln für die alternative Darstellung als Menu. (Ok, das Layout ist ein bisschen XP lastig.)
ul.menu {
	list-style-position:inside;
	list-style-image:url("img/menu/home.gif");
	margin:0;
	padding:0;
	background:inherit;
}
ul.menu li {
	min-width:inherit;
	position: relative;
	margin:0;
	width:auto;
	white-space:nowrap;
	padding:2px 4px 2px 0;
	background:inherit;
}
ul.menu > li {
	margin:0;
	padding:0;
	width:auto;
}
ul.menu ul {
	display:block;
	margin:0;
	padding:0;
	width:auto;
	list-style-position:inside;
}
ul.menu ul li ul {
	width:100%;
	z-index: 100;
	position: absolute;
	top: -2px;
	left: 99%;
	visibility:hidden;
}
ul.menu ul li:hover > ul {
	visibility:visible; display:block;
}
ul.menu li.folder_c,
ul.menu li.folder_c_last,
ul.menu li.folder_c_open,
ul.menu li.folder_c_last_open {
	background: url("img/menu/arrow.gif") no-repeat 98% 50%;
}
ul.menu li.folder_c:hover,
ul.menu li.folder_c_last:hover,
ul.menu li.folder_c_open:hover,
ul.menu li.folder_c_last_open:hover {
	background-position: 98.5% 50%;
}
ul.menu li.file,
ul.menu li.file_last {
	list-style-image:url("img/menu/file.gif");
}
ul.menu li.folder,
ul.menu li.folder_last,
ul.menu li.folder_c,
ul.menu li.folder_c_last {
	list-style-image:url("img/menu/folder.gif");
}
ul.menu li.folder_open,
ul.menu li.folder_last_open,
ul.menu li.folder_c_open,
ul.menu li.folder_c_last_open {
	list-style-image:url("img/menu/folder_open.gif");
}

Ich poste demnächst eine URL auch zu cssMenu und dem zur Manipualtion notwendigen Script.

Schönen Tag noch.

Gruß


Ralf Büscher

02.11.2005 07:18

18 Jörg Kruse

Hallo Ralf

auch sehr schön gemacht :)

Ein klein wenig verwirrend ist die Darstellung allerdings zuerst, wenn man gewohnt ist, auf das Plus- und Minuszeichen in dem kleinen Kästchen zu klicken, um Verzeichnisse zu öffnen und zu schließen, das funktioniert hier ja nicht ;)

mfG Jörg

11.11.2005 14:30

19 Ralf Buescher

Hallo Jörg,

ich habe schon kleines Script bei dem das dann auch funktioniert.
Am Rande habe ich bemerkt, dass das Verhalten des Windows Explorers (der ja den IE für die Darstellung nutzt) genau wie das Verhalten wie bei meinem Script nicht wirklich punktgenau ist. Man muss nicht das Plus oder Minus treffen beim Klick. Es reicht ein Klick in die richtige Reihe auch dann wenn man dabei eventuell eine Linie eines zwei ebenen höher liuegenden Ordners trifft oder den Leeraum hinter dem Ordnernamen.
Aber das Script muss ich noch ein wenig von kleinen Fehlern befreien und dann gehört es auch der Allgemeinheit :-)
Und danke für das Lob - sowas höt jeder gern.

Gruß´

Ralf

11.11.2005 18:51 | geändert: 11.11.2005 19:53

20 C)-(iLL@

Sehr schön gemacht, und GPL. Bin gespannt auf den Code, ich tipsel ja auch gerne ;)

Beim CSS ist noch zu beachten, dass wenn Du einen Ordner mit Unterordnern markierst, die Unterordner nicht gleich mitmarkiert werden, aber das ist ja nur eine kleinere CSS-Sache.

Lass was hören wenns eine erste Version gibt.

Schönen Gruß,
Rudy

22.11.2005 18:12

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]