SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist
    Join Date
    Jul 2001
    Location
    London, UK
    Posts
    475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Reposition html bullet script? Unusual problem

    Hi,
    I am trying to build a new tree style menu for my website. You can see the current one here - www.hostcompanies.com . Although this works fine, it is a heavy bit of code and it slows down the page a lot on a slow connection.

    There are lots of tree menus available on the web, however i cannot find one that will enable search engines to crawl the links in the menu and in a frameless enviroment.

    I did find a script over at dynamic drive, that is quick.. does the job and is crawlable. Problem is that the bullet items appear too far over to the right. How could i alter the script to position the menu better?

    The script is half javascipt and half html. It uses the bullet list command to display the menu items. So in actual fact.. if i could reposition the bullet items somehow... i could get this script to do what i want.

    You can see the script here - www.hostcompanies.com/menutest2.htm .

    Can this script be changed to do what i want?

    Perhaps i should just see if anyone can make me a lightweight script that is similar - sitepoint itself uses a script on the forum homepage which would do what i want.
    Add your web design / hosting companies to my directory - Web Hosting Directory
    Want to join our panel of experts? - Hosting Forums ( top right of forums -expert drop down box for more info ).

  2. #2
    SitePoint Addict
    Join Date
    Jul 2000
    Posts
    201
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To move the submenus to the left, add a margin-left attribute to the foldinglist style:
    HTML Code:
    #foldinglist{list-style-image:url(iNavigate/graphics/leaf.gif);
    margin-left:16px;}

  3. #3
    SitePoint Evangelist
    Join Date
    Jul 2001
    Location
    London, UK
    Posts
    475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Which bit of code do i need to change that into?
    Add your web design / hosting companies to my directory - Web Hosting Directory
    Want to join our panel of experts? - Hosting Forums ( top right of forums -expert drop down box for more info ).

  4. #4
    SitePoint Evangelist
    Join Date
    Jul 2001
    Location
    London, UK
    Posts
    475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by FauxPas
    To move the submenus to the left, add a margin-left attribute to the foldinglist style:
    HTML Code:
    #foldinglist{list-style-image:url(iNavigate/graphics/leaf.gif);
    margin-left:16px;}
    I see... i have done this. Its good, but i also need to move the menu headings over to the left... do you know how this could be done?

    And is it possible to adjust the positioning of the height of the bullets? If i could also position the height and move the menu headings over to the left - i could make the exact look i need.
    Add your web design / hosting companies to my directory - Web Hosting Directory
    Want to join our panel of experts? - Hosting Forums ( top right of forums -expert drop down box for more info ).

  5. #5
    SitePoint Addict
    Join Date
    Jul 2000
    Posts
    201
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try these styles:
    HTML Code:
    #foldheader{cursor:pointer;cursor:hand ; font-weight:bold ;
    list-style-image:url(iNavigate/graphics/nodePlus.gif);
    }
    
    #foldinglist{list-style-image:url(iNavigate/graphics/leaf.gif);
    margin-left:16px;
    padding-left:0; /* fix for non-IE browsers */
    }
    
    #mainlist{
    margin-left:16px; /* move whole list left */
    line-height:16px; /* remove gap between items */
    vertical-align:top; /* fix vertical alignment */
    }
    
    div>ul#mainlist {
    padding-left:8px; /* fix for non-IE browsers */
    }
    Apply this new style to the main ul tag:
    HTML Code:
         <div align="left">
           <ul id="mainlist">
             <li id="foldheader">News</li>
    Last edited by FauxPas; Mar 26, 2004 at 18:29.

  6. #6
    SitePoint Evangelist
    Join Date
    Jul 2001
    Location
    London, UK
    Posts
    475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks FauxPas.. it is working fine now except i have a problem with one area of code. Its a bit complicated so i posted it here http://www.sitepoint.com/forums/show...6&goto=newpost .

    Paul made some comments about the html struture of the bullet list ( at the above link ). Do you think this script is a bit shabby?

    Would you be able to create a hack to fix the problems?

    Either way i appreciate your help and if you have a website i can give you a link on for free on one of my webpages - pr5.
    Add your web design / hosting companies to my directory - Web Hosting Directory
    Want to join our panel of experts? - Hosting Forums ( top right of forums -expert drop down box for more info ).


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
  •