Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Setting active link property for nested ul

    I am setting up a style sheet to control a menu consisting of unordered lists using XHTML 1.0 strict.

    I have nested unordered lists which do not accept the changes to the active link property I have setup for nested unordered lists.

    What can I be doing wrong?
    You can view my style sheet at:
    http://web.acd.ccac.edu/~jbusch/example/style.css

    The pages currently using this style sheet is at:
    http://web.acd.ccac.edu/~jbusch/example/index.html

  • #2
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by pschorr
    I have nested unordered lists
    I don't see any nested lists, only one <ul> element, which means you're referencing the <li>'s incorrectly in your css with the extra li:

    Code:
    #navcontainer li li a
    Welcome to the forums.
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #3
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    I'm not sure if i'm understandig your question correclty, but here's my take on this.

    If you're trying to apply the active pseudo class, like :hover, it needs to be specified as ul:active, not #active ul. I also don't see anywhere in your CSS where a nested UL is specified. I do see this line, which may be what you are referring to:

    line 57: #active li li a

    again, if you want the :active pseudo class, use the colon (:), not the pound (#).

    Also, I don't know if you can really apply :active to a ul. I mean, does that really make any sense? How can a list be "active"? It can be hovered over, but it is not a link, so the property of activity doesnt make sense.

    EDIT: Yes, I agree with Mcdougals4all, i'm just slower

    Dan (HTH)
    Last edited by whizard; 02-18-2005 at 03:42 PM. Reason: mcdougals4all got in ahead of me... grrrr..., also, a stupid smilie!!!!
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #4
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry, wrong URL, here is a page with the nested ul:

    http://web.acd.ccac.edu/~jbusch/exam...teractive.html

  • #5
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by whizard
    Also, I don't know if you can really apply :active to a ul. I mean, does that really make any sense? How can a list be "active"? It can be hovered over, but it is not a link, so the property of activity doesnt make sense.
    The active propery is being applied to the a tab in the list.

  • #6
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    Yeah, my bad

    Still, your CSS needs to have a nested ul tag, not an li

    Dan

    Yay, 100th post!
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #7
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think your use of the word 'active' for an id is confusing the issue. As whizard mentioned, this usually refers to the :active psuedo class

    It sounds more like you are trying to set a different style for the current page's corresponding menu item. If so, you can just do something like below. The styling of <a> is generally more consistent across browsers than <li> so apply your changes to the <a> element rather than trying to affect it through it's containing <li>.

    A simple example with a .current class that will only apply inside the #navcontainer. It will affect links in the parent list, or links in nested lists.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>Distance Learning Support - Interactive Tutorials</title>
    
    <style type="text/css">
      #navcontainer .current { background:yellow; }
    </style>
    
    </head>
      <body>
        <div id="navcontainer">
          <ul>
            <li><a href="index.html">Main Page</a></li>
            <li><a href="tutorials.html">Student Tutorials</a></li>
            <li><a href="interactive_alt.html">Interactive Tutorials</a>
              <ul>
                <li><a class="current"  href="interactive/tour.html">Blackboard Tour</a></li>
                <li><a href="interactive/password.html">Password Reset</a></li>
              </ul>
            </li>
            <li><a href="interest.html">Links of Interest</a></li>
            <li><a href="links.html">CCAC Links</a></li>
          </ul>
        </div>
      </body>
    </html>
    If this is not what you're trying to acheive please elaborate.
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #8
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The pseudo class only changes the display properties momentarily. What I am attempting to do is change the display properties of the link in the list using ids.

    Meaning I wanted to have the #active li li a to overrider the #nacvontainer li li a properties.

  • #9
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    I don't know if you can do that... (could be wrong)

    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #10
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, I think the 'class' is what I wanted to use and not the 'id'. It's going to need a little more formatting, but I think I've got it.

    Thanks for the help!

  • #11
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    Hey, no problem!

    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION


  •  

    Posting Permissions

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