Smart Folding Menu Tree Scr: How change the leftmost postion of the menu

[pluus_x]

I am quite new in javascript.
But i wanted to change the left postion of the menu, and also the amount of identation.

I thought it had to be changed in

tItem.more.style.pixelLeft = (tMenu.style.pixelWidth - 17);
tItem.more.style.pixelLeft = (menu.offsetWidth - tItem.more.offsetLeft - 17);

change the -17 value to something else (like -4) does not work.

How and where can i make the changes?

[pluus_x]

Is my question so difficult,
or ridiculous
or does nobody uses this menu-script?

pls help

[jscheuer1]

How far to the left or right do you want it moved?

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format for asking a question.
PLEASE: Include the URL to your problematic webpage that you want help with.

[pluus_x]

this is the dhtml menu: http://www.dynamicdrive.com/dynamicindex1/navigate1.htm

and this is the (problematic) page: www.provoost.info

I want to move the menu to the left so i have more space for the right 'window' in which is the real information

[jscheuer1]

OK, on your page with the tree on it, make a division that contains the menu:

<div id="foldcontainer">
<ul>
   <li id="foldheader">Familie</li>
   <ul id="foldinglist" style="display:none" style=&{head};>
      <li><a href="http://home.hccnet.nl/m.provoost">Oude homepage</a></li>
      <li><a href="http://www.provoost.info/photos">Foto album</a></li>
      <li id="foldhe . . .

. . .          </ul> 
                 <li><A HREF=./Muziek/Git/Wilhelmus/Wilhelmus.txt>Wilhelmus</a></li>
               
            </ul>
      
   </ul>   
</ul>
</div>

Make the style section look like this:

<style type="text/css">

#foldcontainer {
margin-left:-15px;
}
#foldheader{cursor:pointer;cursor:hand ; font-weight:bold ;
list-style-image:url(./img/fold.gif)}
#foldinglist{list-style-image:url(./img/list.gif);margin-left:-25px!important;margin-left:8px;}

</style>

Or better yet, really neaten it up (values are the same, it is just easier on the eyes this way):

<style type="text/css">

#foldcontainer {
margin-left:-15px;
}

#foldheader {
cursor:pointer;
cursor:hand ;
font-weight:bold ;
list-style-image:url(./img/fold.gif);
}

#foldinglist {
list-style-image:url(./img/list.gif);
margin-left:-25px!important;
margin-left:8px;
}

</style>

[pluus_x]

Tnx a lot it works.
but can you explain me what i did?
especially this line:
#foldinglist{list-style-image:url(./img/list.gif);margin-left:-25px!important;margin-left:8px;}

[jscheuer1]

Well, in general, having a negative left margin will move things over to the left. However, virtually all browsers that parse this code except for IE see things a little differently. They see it that only the top level items get moved over, while IE sees everything getting moved over. That is why we follow moving the container over 15px with this kludge for the lower level elements:

margin-left:-25px!important;margin-left:8px;

The !important hack tells virtually all browsers to ignore any other rule for this property and will follow the -25px left shift. Since IE already moved all these items over, along with the top level elements, it actually needs to move them back about 8px to give them any indent at all. Since IE doesn't know from !important, it will use the second rule.

[pluus_x]

tnx again John!