Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Making some kind of treeview with css - need some tips

Status
Not open for further replies.
Stoemp

Stoemp

Programmer
Sep 25, 2002
389
BE
Hi there

I'm making some sort of treeview (dynamically built up with ASP to print files and folders on our Intranet). I have 3 images: A simple vertical line, a vertical line with a horizontal in the middle to point to a file in the middle of a list and a corner to mark a file at the end of the list. Now I want to align everything perfectly and I want the vertically stacked images to fit perfectly on each other without any space in between. I posted an example screenshot on this location:


I don't use any particular CSS at this time, but I tried setting the margin and padding of the DIV where the images are put in without any result.

Could you please help me?

Thanks

Steven
 
Sort by date Sort by votes
Very hard to advise you without seeing your code. What are the individual lines in your code? Are they separated via breaks (<br />) or are they inside some block level element? I would suggest you use html lists to create this list. That's what they are there for.
 
Upvote 0 Downvote
This may be of some interest for you


It's not quite what you are looking for, but you may be able to glean some insight from it.

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r
 
Upvote 0 Downvote
Vragabond: I use one <div>-element per line, so all the images that are on one line are in 1 div

Foamcow: I will check out the page you gave me.

Thanks guys. If you think of something else, please let me know!

Regards

Steven
 
Upvote 0 Downvote
YOu should put each item as a list item within an unorderd list.
Then nest lists to achieve the tree structure.

When you've done that, it should be pretty simple to line everything up.

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r
 
Upvote 0 Downvote
Foamcow

I tried thinking about making lists, but how can I create the parallel lines when the item is more than 1 level deep? I didn't figure this out yet.

Thanks for the tips, man!

Steven
 
Upvote 0 Downvote
Here's a way to do it, albeit with different images:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
  <style>
    .tree ul {
      margin: 0;
      padding: 0;
      list-style: none;
      background: url(bar.gif) repeat-y;
    }

    .tree li {
      margin: 0;
      padding: 0 0 0 12px;
      background: url(branch.gif) 4px 0.5em no-repeat;
    }

    .tree li.last {
       background-image: url(lastbranch.gif);
    }
  </style>
<head>
<body>
  <div class="tree">
    <ul>
       <li>One</li>
       <li>Two</li>
       <li>Three
          <ul>
            <li>Three-A</li>
            <li>Three-B</li>
            <li class="last">Three-C</li>
          </ul>
       </li>
       <li class="last">Four</li>
    </ul>
  </div>
</body>
</html>
bar.gif is 5 pixels wide and one high, the rightmost pixel is black, the rest white (or transparent).

branch.gif is also 5x1 pixels, all of them black.

lastbranch.gif is 5 pixels wide and 1000 high (make it as big as you like). The top row of pixels is black, the rest are white (or whatever your background colour is, but NOT transparent).

I use a background image to associate a long vertical line with each <ul>, and other images to give each <li> a side branch. The last <li> has a solid background that overlays the unwanted portion of the <ul> line. Neat eh?

I've put the whole thing in a <div> in case you wanted to have some kind of image at the root of the tree. Just make it a non-repeating background image, and give the <div> enough padding-top to accommodate it.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Yes, but that's the wrong side, he's looking to list in a treeveiw the files on the server, sorta like Apache's default index pages, only fancier... Or using it like a menu....

Your answer was the client look at client side files.

[plug=shameless]
[/plug]
 
Upvote 0 Downvote
I'm making some sort of treeview (dynamically built up with ASP to print files and folders on our Intranet)
Click to expand...
I interpreted that as wantiing to display a tree representation of all the files and folders in a given place, rather than actually talking about selecting files and printing them - using the word "print" as programmers do, rather than normal people's usage.

If it's a matter of really printing files, then the file picker control is the best way to do it.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
I think those files are on the server... he said something about Active Server Pages and they won't be running on the client unless all of his clients are also web servers... which I guess is possible but seems quite unlikely.
 
Upvote 0 Downvote
I think that this forum would work better if we just all provided our tips and the originator just selected the tip that best served his/her purposes. That way we all have the opportunity of learning something from one another. I find it a little vexing listening to people who think that they own this forum and that theirs are the only valid tips.

Clive
 
Upvote 0 Downvote
I understand where you're coming from CliveC but I think the confusion does fill some usefule purpose.

The miscommuncations on these forums are focusing me to be more attentive to the precision of my technical writing... and I think this is paying off at work.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
814
spamjim
spamjim
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
762
3esolar
3
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
812
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
637
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top