Sent by Martin Heiden on 22 March 2005 13:01
Brian,
did you try to apply the vertical lines as border to the ul and
shift all li above this border. Than you can apply background-images
with node markers to the li and add a class to the last li inside of
each ul which apply another the general background-color and a
terminating corner. the background-color will make the rest of the
ul-border invisible.
I hope that is understandable. I've got no example which could be
reached from outside. Just some css and html:
..tree { font-size: 1.2em; line-height: 1.5em; margin-left: -0.6em; }
..tree ul { border-left: 1px solid #666666; list-style-type: none; margin: 0 !important;
margin-left: 1.8em !important; padding: 0; }
..tree li { display: block; left: -0.5em; position: relative; white-space: nowrap; }
..tree span { margin-left: 1.4em; white-space: nowrap; }
..tree .nodeopen>span,
..tree .nodeclosed>span { margin-left: 0.2em; }
..tree li div { border-bottom: 1px solid #666666; display: block; float: left; height: 0.7em;
margin-left: 0.42em; overflow: hidden; position: absolute; width: 1em; }
..tree span img,
..tree span input { vertical-align: bottom; }
..tree img.checkbox { margin-bottom: 0.3em; }
..tree span a { height: 1.4em; text-decoration: none; }
..tree span a:hover { color: #CCCCCC; }
..tree .treetype { height: 1.5em; width: auto; }
..tree .node { height: 1.147em; width: 0.863em; }
..tree .checkbox { height: auto; width: 1em; }
..tree li.active a { color: #000000; }
..tree a { color: #666666; }
..tree a:visited { color: #666666 !important; }
..tree a:hover { color: #999999 !important; }
..tree a:active,
..tree a.active:hover,
..tree a.active:visited,
..tree a.active { color: #000000 !important; }
<div class="tree">
<ul>
<li class="nodeopen"> <a href=""><img src="/img/nodeopen.gif" alt="-" class="node" /></a>
<span> <img src="/img/folderopen.gif" alt="nodeopen" class="treetype" /> <a
href="">Startseite</a></span>
<ul>
<li class="nodeopen"> <a href=""><img src="/img/nodeopen.gif" alt="-" class="node"
/></a> <span> <img src="/img/folderopen.gif" class="treetype" alt="nodeopen" /> <a href=""><img
src="/img/chkbox-checked.gif" alt="checkbox" class="checkbox" /></a> <a href="">Vorgänge</a>
</span>
<ul>
<li class="leave"><div> </div><span> <img src="/img/leave_type.gif"
alt="leave" class="treetype" /> <a href=""><img src="/img/chkbox-checked.gif" alt="checkbox"
class="checkbox" /></a> <a href="" >Eingänge</a> </span></li>
<li class="leave"><div> </div><span> <img src="/img/leave_type.gif"
class="treetype" alt="leave" /> <a href=""><img src="/img/chkbox-notchecked.gif" alt="checkbox"
class="checkbox" /></a> <a href="" >Ausgänge</a> </span></li>
<li class="leave"><div> </div><span> <img src="/img/leave_type.gif"
alt="leave" class="treetype" /> <a href="">Wiedervorlagen</a></span></li>
<li class="leavelast last"><div> </div><span> <img
src="/img/leave_type.gif" alt="leave" class="treetype" /> <a href="">Journal</a></span></li>
</ul>
</li>
<li class="nodeclosed"> <a href=""><img src="/img/nodeclosed.gif" alt="+" class="node"
/></a><span> <img src="/img/folder.gif" alt="nodeclosed" class="treetype" /> <a href=""><img
src="/img/chkbox-checked.gif" alt="checkbox" class="checkbox" /></a> <a href="">Partner</a>
</span></li>
<li class="nodeclosed"> <a href=""><img src="/img/nodeclosed.gif" alt="+" class="node"
/></a><span> <img src="/img/folder.gif" alt="nodeclosed" class="treetype" /> <a href=""><img
src="/img/chkbox-notchecked.gif" alt="checkbox" class="checkbox" /></a> <a href="">Objekt</a>
</span></li>
<li class="nodeclosed"> <a href=""><img src="/img/nodeclosed.gif" alt="+" class="node"
/></a><span> <img src="/img/folder.gif" alt="nodeclosed" class="treetype" /> <a href=""
>In/Exkasso</a></span></li>
<li class="nodeclosed"> <a href=""><img src="/img/nodeclosed.gif" alt="+" class="node"
/></a><span> <img src="/img/folder.gif" alt="nodeclosed" class="treetype" /> <a href=""
>Schaden</a></span></li>
<li class="leave"><div> </div><span> <img src="/img/leave_type.gif" alt="leave"
class="treetype" /> <a href="">Weiterleitung</a></span></li>
<li class="nodeclosed"> <a href=""><img src="/img/nodeclosed.gif" alt="+" class="node"
/></a><span> <img src="/img/folder.gif" alt="nodeclosed" class="treetype" /> <a
href="">OAS/DMS</a></span></li>
<li class="nodeclosed"> <a href=""><img src="/img/nodeclosed.gif" alt="+" class="node"
/></a><span> <img src="/img/folder.gif" alt="nodeclosed" class="treetype" /> <a
href="">3270</a></span></li>
<li class="nodeclosed"> <a href=""><img src="/img/nodeclosed.gif" alt="+" class="node"
/></a><span> <img src="/img/folder.gif" alt="nodeclosed" class="treetype" /> <a href="">Zentrale
Anwendungen</a></span></li>
<li class="nodeclosed last"> <a href=""><img src="/img/nodeclosed.gif" alt="+"
class="node" /></a><span> <img src="/img/folder.gif" alt="nodeclosed" class="treetype" /> <a
href="">CodeServer</a></span></li>
</ul>
</li>
<li class="nodeclosed last"> <a href=""><img src="/img/nodeclosed.gif" alt="+" class="node"
/></a><span> <img src="/img/folder.gif" alt="nodeclosed" class="treetype" /> <a href="">Zweiter
Teilbaum</a></span></li>
</ul>
</div>
Sorry about the spaghetti-code, it is dynamically generated and there
are more features implemented than you suggested. In this case the
node markers are clickable and represented by the first img-tag. The
next img is an icon followed by an optional checkbox and the text.
I hope that helps.
regards,
Martin
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/