UL tree-view without the use of images
I've gotten quite far getting this to work already but I'm out of fresh ideas and need an elegant way to wrap it up.
I'm aiming to create a tree-view with those nice dotted lines but not using images. The solution seems quite simple, set a left and bottom border on all the li elements and use position relative to displace the name of the element, contained in a p-tag. The problem arises with containers. If the last-child of a list is an unfolded container, the dotted line runs on to the bottom of it's child-elements, where it should stop after the first line.
So, if anyone can come up with a gracefull solution to this, I'd be most appreciative. Here's the code I have so far:
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> Project </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
ul, li { list-style: none; margin: 0; padding: 0; }
ul { padding-left: 1em; }
li { padding-left: 1em; border: 1px dotted black; border-width: 0 0 1px 1px; }
li.container { border-bottom: 0px; }
li.empty { font-style: italic; color: silver; border-color: silver; }
li p { margin: 0; background: white; position: relative; top: 0.5em; }
li ul { border-top: 1px dotted black; margin-left: -1em; padding-left: 2em; }
</style>
</head>
<body>
<ul>
<li class="container"><p>Testi
<ul>
<li><p>Testing 1</p></li>
<li><p>Testing 2</p></li>
<li class="container"><p>Testi
<ul>
<li><p>Testing 1</p></li>
<li><p>Testing 2</p></li>
<li><p>Testing 3</p></li>
</ul>
</li>
</ul>
</li>
<li class="container"><p>Testi
<ul>
<li><p>Testing 1</p></li>
<li><p>Testing 2</p></li>
<li><p>Testing 3</p></li>
</ul>
</li>
<li class="container"><p>Testi
<ul>
<li class="empty"><p>empty</p>
</ul>
</li>
</ul>
</body>
</html>
For a working online example: http://www.windgazer.nl/eexchange/list_test.html
I'm aiming to create a tree-view with those nice dotted lines but not using images. The solution seems quite simple, set a left and bottom border on all the li elements and use position relative to displace the name of the element, contained in a p-tag. The problem arises with containers. If the last-child of a list is an unfolded container, the dotted line runs on to the bottom of it's child-elements, where it should stop after the first line.
So, if anyone can come up with a gracefull solution to this, I'd be most appreciative. Here's the code I have so far:
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> Project </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
ul, li { list-style: none; margin: 0; padding: 0; }
ul { padding-left: 1em; }
li { padding-left: 1em; border: 1px dotted black; border-width: 0 0 1px 1px; }
li.container { border-bottom: 0px; }
li.empty { font-style: italic; color: silver; border-color: silver; }
li p { margin: 0; background: white; position: relative; top: 0.5em; }
li ul { border-top: 1px dotted black; margin-left: -1em; padding-left: 2em; }
</style>
</head>
<body>
<ul>
<li class="container"><p>Testi
<ul>
<li><p>Testing 1</p></li>
<li><p>Testing 2</p></li>
<li class="container"><p>Testi
<ul>
<li><p>Testing 1</p></li>
<li><p>Testing 2</p></li>
<li><p>Testing 3</p></li>
</ul>
</li>
</ul>
</li>
<li class="container"><p>Testi
<ul>
<li><p>Testing 1</p></li>
<li><p>Testing 2</p></li>
<li><p>Testing 3</p></li>
</ul>
</li>
<li class="container"><p>Testi
<ul>
<li class="empty"><p>empty</p>
</ul>
</li>
</ul>
</body>
</html>
For a working online example: http://www.windgazer.nl/eexchange/list_test.html
seanpowell
Interesting - just doing some testing here....
This is the direction I'm going in at the moment...
<html>
<head>
<html>
<head>
<title> Project </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
ul, li { list-style: none; margin: 0; padding: 0; }
ul { padding-left: 1em; }
li { padding-left: 1em; border: 1px dotted black; border-width: 0 0 1px 1px; }
li.container { border-bottom: 0px; }
li.empty { font-style: italic; color: silver; border-color: silver; }
li p { margin: 0; background: white; position: relative; top: 0.5em; }
li ul { border-top: 1px dotted black; margin-left: -1em; padding-left: 2em; }
ul.last { border-left:2px solid white; margin-left: -1.1em; padding-left: 2em; }
</style>
</head>
<body>
<ul>
<li class="container"><p>Testi
<ul>
<li><p>Testing 1</p></li>
<li><p>Testing 2</p></li>
<li class="container"><p>Testi
<ul class="last">
<li><p>Testing 1</p></li>
<li><p>Testing 2</p></li>
<li><p>Testing 3</p></li>
</ul>
</li>
</ul>
</li>
<li class="container"><p>Testi
<ul>
<li><p>Testing 1</p></li>
<li><p>Testing 2</p></li>
<li><p>Testing 3</p></li>
</ul>
</li>
<li class="container"><p>Testi
<ul class="last">
<li class="empty"><p>empty</p>
</ul>
</li>
</ul>
</body>
</html>
<html>
<head>
<html>
<head>
<title> Project </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
ul, li { list-style: none; margin: 0; padding: 0; }
ul { padding-left: 1em; }
li { padding-left: 1em; border: 1px dotted black; border-width: 0 0 1px 1px; }
li.container { border-bottom: 0px; }
li.empty { font-style: italic; color: silver; border-color: silver; }
li p { margin: 0; background: white; position: relative; top: 0.5em; }
li ul { border-top: 1px dotted black; margin-left: -1em; padding-left: 2em; }
ul.last { border-left:2px solid white; margin-left: -1.1em; padding-left: 2em; }
</style>
</head>
<body>
<ul>
<li class="container"><p>Testi
<ul>
<li><p>Testing 1</p></li>
<li><p>Testing 2</p></li>
<li class="container"><p>Testi
<ul class="last">
<li><p>Testing 1</p></li>
<li><p>Testing 2</p></li>
<li><p>Testing 3</p></li>
</ul>
</li>
</ul>
</li>
<li class="container"><p>Testi
<ul>
<li><p>Testing 1</p></li>
<li><p>Testing 2</p></li>
<li><p>Testing 3</p></li>
</ul>
</li>
<li class="container"><p>Testi
<ul class="last">
<li class="empty"><p>empty</p>
</ul>
</li>
</ul>
</body>
</html>
ASKER
Hmm, that works rather smooth, I was trying to get something along those lines to work but just got stuck, need an extra pair of eyes and all...
Personally I think that, IE be damned, if you can come up with a way to do this without a class but using CSS2 selectors that are beyond microsoft, I'd be more happy than using an extra class...
If this is the direction, I'm looking forward to your destination Sean :)
Nice going,
Martin
Personally I think that, IE be damned, if you can come up with a way to do this without a class but using CSS2 selectors that are beyond microsoft, I'd be more happy than using an extra class...
If this is the direction, I'm looking forward to your destination Sean :)
Nice going,
Martin
You just asked this question to frustrate me didn't you...
We can handle all the child elements, except the last one. I don't see how to remove it :-(
<html>
<head>
<html>
<head>
<title> Project </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
ul, li
{
list-style: none;
margin: 0;
padding: 0;
}
ul
{
padding-left: 1em;
}
li
{
padding-left: 1em;
border: 1px dotted black;
border-width: 0 0 1px 1px;
}
li.container
{
border-bottom: 0px;
}
li.empty
{
font-style: italic;
color: silver;
border-color: silver;
}
li p
{
margin: 0; background: white;
position: relative;
top: 0.5em;
}
li ul
{
border-top: 1px dotted black;
margin-left: -1em;
padding-left: 2em;
}
p+ul
{
border-left:2px solid white;
margin-left: -1.05em;
padding-left: 2em;
}
ul li ul
{
border-left:1px solid white;
margin-left: -1.05em;
padding-left: 2em;
}
.last
{
border-left: 2px solid white;
}
</style>
</head>
<body>
<div>
<ul>
<li class="container"><p>Testi
<ul>
<li><p>Testing 1</p></li>
<li><p>Testing 2</p></li>
<li class="container"><p>Testi
<ul>
<li><p>Testing 1</p></li>
<li><p>Testing 2</p></li>
<li><p>Testing 3</p></li>
</ul>
</li>
</ul>
</li>
<li class="container"><p>Testi
<ul>
<li><p>Testing 1</p></li>
<li><p>Testing 2</p></li>
<li><p>Testing 3</p></li>
</ul>
</li>
<li class="container"><p>Testi
<ul class="last">
<li class="empty"><p>empty</p>
</ul>
</li>
</ul>
</div>
</body>
</html>
We can handle all the child elements, except the last one. I don't see how to remove it :-(
<html>
<head>
<html>
<head>
<title> Project </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
ul, li
{
list-style: none;
margin: 0;
padding: 0;
}
ul
{
padding-left: 1em;
}
li
{
padding-left: 1em;
border: 1px dotted black;
border-width: 0 0 1px 1px;
}
li.container
{
border-bottom: 0px;
}
li.empty
{
font-style: italic;
color: silver;
border-color: silver;
}
li p
{
margin: 0; background: white;
position: relative;
top: 0.5em;
}
li ul
{
border-top: 1px dotted black;
margin-left: -1em;
padding-left: 2em;
}
p+ul
{
border-left:2px solid white;
margin-left: -1.05em;
padding-left: 2em;
}
ul li ul
{
border-left:1px solid white;
margin-left: -1.05em;
padding-left: 2em;
}
.last
{
border-left: 2px solid white;
}
</style>
</head>
<body>
<div>
<ul>
<li class="container"><p>Testi
<ul>
<li><p>Testing 1</p></li>
<li><p>Testing 2</p></li>
<li class="container"><p>Testi
<ul>
<li><p>Testing 1</p></li>
<li><p>Testing 2</p></li>
<li><p>Testing 3</p></li>
</ul>
</li>
</ul>
</li>
<li class="container"><p>Testi
<ul>
<li><p>Testing 1</p></li>
<li><p>Testing 2</p></li>
<li><p>Testing 3</p></li>
</ul>
</li>
<li class="container"><p>Testi
<ul class="last">
<li class="empty"><p>empty</p>
</ul>
</li>
</ul>
</div>
</body>
</html>
ASKER
I honestly must admit that I didn't really expect anybody other than you to so much as give this a shot :) That is, except for me, but I'm on the questioneers side on this one... And hey, you gotta admit it's a nice challenge.
But, back to the solution, it doesn't seem to work? It looks the same in IE, mozilla and Opera and on all of them it's displaying a gap running from an open container to the next, it there is a next.
But, back to the solution, it doesn't seem to work? It looks the same in IE, mozilla and Opera and on all of them it's displaying a gap running from an open container to the next, it there is a next.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Ok, I just had a quick look at it and that looks awesome (FYI Opera pick that up just nicely too). I'm going to check out what you did when I get home, but for now, a big thanx!!