...

View Full Version : Setting active link property for nested ul



pschorr
02-18-2005, 02:59 PM
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? :confused:
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

mcdougals4all
02-18-2005, 03:39 PM
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:


#navcontainer li li a

Welcome to the forums. :thumbsup:

whizard
02-18-2005, 03:40 PM
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)

pschorr
02-18-2005, 03:42 PM
Sorry, wrong URL, here is a page with the nested ul:

http://web.acd.ccac.edu/~jbusch/example/interactive.html

pschorr
02-18-2005, 03:45 PM
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.

whizard
02-18-2005, 03:45 PM
Yeah, my bad

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

Dan

Yay, 100th post!

mcdougals4all
02-18-2005, 04:03 PM
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.


<!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.

pschorr
02-18-2005, 04:11 PM
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.

whizard
02-18-2005, 04:12 PM
I don't know if you can do that... (could be wrong)

Dan

pschorr
02-18-2005, 04:16 PM
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!

whizard
02-18-2005, 04:18 PM
Hey, no problem!

Dan



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum