Results 1 to 4 of 4

Thread: Javascript Simple Tree Menu Question

  1. #1
    Join Date
    Nov 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Javascript Simple Tree Menu Question

    1) Script Title:
    Simple Tree Menu

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

    3) Describe problem:

    Hello,
    First off, let me just say I love this example. I've been using it on a daily basis for over eight months. But I've always had one problem with it: I can't get the first item in the list to flush left.

    A quick look at the example and you'll see what I mean. The options to "expand all" and "contract all" are flushed left. Yet the first item in the list is not. I really need it flushed left to make room for the primary content on my page.

    I've tried to change the CSS padding-left and margin-left settings to 0px but to no avail...

    Does anyone know how to move the list so that its first item is flush against the left margin?

    Thanks in advance for any and all help!

  2. #2
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    From a quick glance at the code, I think you should be able to change the following line in the CSS file:
    padding-left: 22px;
    Just change 22 to anything you want, such as 0.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  3. The Following User Says Thank You to djr33 For This Useful Post:

    DynamicTextDante (11-19-2011)

  4. #3
    Join Date
    Nov 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    I've already tried that actually, but thanks for the suggestion.

    Code:
    padding-left: 22px
    refers to the amount of space each item of the list is indented. Thus item 2 is indented 22px more than item 1, and item 3 is indented 22px more than item 2, etc.

    Thus setting the padding to 0 makes each item's beginning position equal to that of item 1's. But that change doesn't affect item 1's beginning position, so the first item still begins where it always began, and that's not at the left margin but several spaces to the right of it.

    In other words, while your suggestion makes all the items begin where item 1 currently begins, item 1 doesn't change position and still begins in the wrong place.

    Any other ideas?

  5. #4
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    I'm not sure. But here's something else to try. It may be a default style for the <li>. So just add the following two lines from the <ul> style:
    margin: 0;
    padding: 0;

    to the <li> style in the CSS. Specifically, see if the margin:0 style helps. (Basically this is not part of the script; it's default styling for lists that is set by the browser.)
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •