I want to reduce indentation at simple tree menu---please Help

[sharmin]

1) Script Title: Simple Tree Menu Author: Dynamic Drive

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/navigate1.htm

3) Describe problem: I want to reduce indentation at simple tree menu---please Help.

Hello,

I need help for the following matter ( please help ). To understand the problem please see the attached picture and the following test website:

http://userwww.sfsu.edu/~iamhappy/Te...ates/page3.htm.

At the simple tree menu, the whole menu starts after 25-50 pixels of indentation. I know that this happens as we are using list elements. Is there a way so that the menu starts after 5 or 7 pixels of indentation instead of starting after a long indentation.

The main question is: how to control the indentation of the simple tree menu so that I can control the indentation. Thank you for reading.

Please reply.

[Twey]

Read the CSS file, you'll see:

.treeview li{ /*Style for LI elements in general (excludes an LI that contains sub lists)*/
background: white url(list.gif) no-repeat left center;
list-style-type: none;
padding-left: 22px;
margin-bottom: 3px;
}

Change the number in red.

[sharmin]

Hello Twey,

thanks a lot for reply, but I tried that approach all ready.

If I do that, the inner elements get indented; for example, item 3, item 4, page3, page 4 gets indented more toward left.

but I want the very first elements ( Source Doc ) or Folder 1, Folder 2, or Page 1to get indented and start with less indentation. I hope that you understand my problem. Is it fixable? Please reply.

Thank you.

[Twey]

I think I understand what you're saying. If I'm right, the easiest method is to apply a change as above, then override it for lower elements:

.treeview li li {
  padding-left: 22px;
}

[sharmin]

I think I understand what you're saying. If I'm right, the easiest method is to apply a change as above, then override it for lower elements:

.treeview li li {
  padding-left: 22px;
}

Hello,

thank you so much for trying to help here.

I've tried with your advice, but I cannot get the desired affect. Today I will not be able to connect with my server; so, I will not be able to show you what result I am getting.

However, I am getting this following result, which is not the effect I want. Although the list gets indented, but the menu item gets on top of the picture; for example, the word Folder 1 goes on top of the Folder picture. I tried to modify the li and uls but the menu items gets on top of the 'open folder' and on top of the 'close folder' picture.

So, it seems that I have to indent the 'floder' pictures. Please tell me how to indent the pictures so the whole menu starts with less indentation but also has its open folder, close folder, and its arrow images in their respective places.

Thank you.

[Twey]

I'm not entirely sure what you're describing. Can you put a demo page somewhere? Sign up for a free account, Geocities or Freewebs or something, if you still can't get your webspace working.

[sharmin]

I'm not entirely sure what you're describing. Can you put a demo page somewhere? Sign up for a free account, Geocities or Freewebs or something, if you still can't get your webspace working.

Hello,
thank you agiain for reading this thread.

I am explaining the problem. Please visit the page at the following address:

http://userwww.sfsu.edu/~iamhappy/Templates/page1.htm

and then, please, visit this page:

http://userwww.sfsu.edu/~iamhappy/Templates1/page1.htm

At the first Demo, I tried to modify the css file as follows, as you have suggested:

.treeview ul{ /*CSS for Simple Tree Menu*/
margin: 0;
padding: 0;
}

.treeview li li{ /*Style for LI elements in general (excludes an LI that contains sub lists)*/
background: url(flower-dot.png) left 2px;
background-repeat:no-repeat;
list-style-type: none;
padding-left: 18px;
margin-bottom: 3px;
}

.treeview li.submenu{ /* Style for LI that contains sub lists (other ULs). */
background: url(closed.gif) left 1px;
background-repeat:no-repeat;
cursor: hand;

}


.treeview li.submenu ul{ /*Style for ULs that are children of LIs (submenu) */
display: none; /*Hide them by default. Don't delete. */
}

.treeview .submenu ul li{ /*Style for LIs of ULs that are children of LIs (submenu) */
cursor: hand;
}



.....and as you can see, the word "Folder 1" is at top of the image of Folder. So, the words and the images get overlapped.

So, I need to indent the image also so that the text were not goes at top of the image.

Please help me so that I can move the whole menu toward left as much as possible ( so that it can have less indentation) with the images ( openfolder image, closefolder image, and arrow image).

Please help. Thank you.

[sharmin]

Hello,
thank you agiain for reading this thread.

I am explaining the problem. Please visit the page at the following address:

http://userwww.sfsu.edu/~iamhappy/Templates/page1.htm

and then, please, visit this page:

http://userwww.sfsu.edu/~iamhappy/Templates1/page1.htm

At the first Demo, I tried to modify the css file as follows, as you have suggested:

.treeview ul{ /*CSS for Simple Tree Menu*/
margin: 0;
padding: 0;
}

.treeview li li{ /*Style for LI elements in general (excludes an LI that contains sub lists)*/
background: url(flower-dot.png) left 2px;
background-repeat:no-repeat;
list-style-type: none;
padding-left: 18px;
margin-bottom: 3px;
}

.treeview li.submenu{ /* Style for LI that contains sub lists (other ULs). */
background: url(closed.gif) left 1px;
background-repeat:no-repeat;
cursor: hand;

}


.treeview li.submenu ul{ /*Style for ULs that are children of LIs (submenu) */
display: none; /*Hide them by default. Don't delete. */
}

.treeview .submenu ul li{ /*Style for LIs of ULs that are children of LIs (submenu) */
cursor: hand;
}



.....and as you can see, the word "Folder 1" is at top of the image of Folder. So, the words and the images get overlapped.

So, I need to indent the image also so that the text were not goes at top of the image.

Please help me so that I can move the whole menu toward left as much as possible ( so that it can have less indentation) with the images ( openfolder image, closefolder image, and arrow image).

Please help. Thank you.

Someone, Twey, mburt, others, or ddadmin, please help me to solve this problem. I tried, and I cannot solve it. I need to understand and solve it.

Thank you.

[Twey]

Well, there's always the easy way out:

.treeview ul{ /*CSS for Simple Tree Menu*/
margin: 0;
padding: 0;
position: relative;
left: -15px;
}

[mburt]

The easy way out isn't necessarily the best way out