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.