Results 1 to 2 of 2
  1. #1
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: Site map using LI and OL tags

    I have created a newer version of this sitemap and I strongly urge you to use this one as it has been defined using a stronger set of css without the need for user defined classes.

    The methodology is the same as above but has a stronger css for the third level in the treeview. This has also been validated using W3C at Strict. This means it is compliant and can be used in Transitional html as well
    Jerry

  2. #2
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Site map using LI and OL tags

    <P ID="edit" class=small>(Edited by Jezza on 30-Jan-06 17:16. Deleted attachment as I found fault in code. Attachment in next post is a cleaner version)</P>Simple Sitemaps using CSS

    On my journeys around the web I see that a lot of sites are not providing a good or presentable
    sitemap, if at all. Many sites are able to get PC Bobby approval if they only provided a good
    presentable site map to assist people with visual impairment to navigate the site.

    Much money is spent on site maps but they again have to be simple but effective.

    I have created a template css file for you to use if you want using <ul>,[*] and
    1. tags.
      No pseudo classes have been created (except for hyperlinks) and only uses currently available
      tags.

      The only thing that is slightly different is my subtle use and change of position of some of the html
      tags to allow nesting and inheritance from my css file.

      In the sample set of code below you will note the closing tag, by rights should be to the
      left of the
    !!!! This has been done on purpose as I am going to use the power of CSS to use
    inheritance
    to my advantage.

    Extract of sample code from HTML file
    <pre>[*]Excel
    <ul>
    [*]Functions
    1. Sum
    2. Average
    3. Max
    4. Min
    5. Count
    6. VLookup

    [/list]</pre>


    In the css file I have created a style called li ul......this will effectively style everything that
    is contained within these two tags. I first designated that all bullets in the list should be a folder icon.
    This worked a dream but then I wanted to have a second level bullet and tried a class that said li ul li
    (everything that is nested in an li tag and further nested in a ul tag and further nested in a li tag) but this

    part failed as I was able to see the 2 different bullets in Firefox but IE failed to show them could only see the
    inherited value from the stylesheet.

    Using a little trickery I realised I had to fool IE into thinking something else and changed the final level listing
    tag to an ordered list [list=1] this did the trick as I was then able to use li ol making changes to this

    class did the trick. Due to this little trick I was then able to create pseudo classes for the links and assign
    different formats

    <pre>li ul a:hover
    {
    background-color:#FFFFFF;
    color: #3399FF;
    list-style-image: url(images/sitemapfolderbullethover.gif);

    }
    li ol a:hover
    {
    background-color:#FFFFFF;
    color: #3399FF;
    list-style-image: url(images/sitemapdocbullethover.gif);
    }

    </pre>


    When you open this file you will find all the files and graphics you will require to view the outcome.
    I hope you agree this is a very simple but effective style for a sitemap and hope you use it in the future.
    Jerry

Posting Permissions

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