> I need someone to point me in the right direction so that i can find out
> more about the active and current bits in a ul used for navigation like
> this -
>
> <ul id="topnav">
> *<li id="active">*<a href="#" *id="current"*> link</a></li>
> <li><a href="#">link</a></li>
> <li><a href="#">link</a></li>
> </ul>
>
> this is one of the lists off css.maxdesign but i dont actually
> understand what the /active /and /current /is referring to.. what it
> does or if i even need to use it. There is no reference to either in
> the style sheet so whats it all about.
>
> I have more than one ul list in the page so obviously if i am using the
> same style of list again i will have to make the <li /*id*/="active"> a
> class instead. But do i even need to have active and current
> ids/classes in there at all.
>
hi Jackie,
the :active selector is wehn the mouse pointer is within an element in the time
when you are pressing down the mouse button (or are
tabbing via the keyboard). It doesn't work in NN4 and Opera 3.
while
id="current" means the behavior when the link is clicked and you are on the new
site (so that you can see that this is the active
link, which mostyl shoud not be a clickable link ...).
so e.g.: .
.header{display: inline;padding: 0;width: 100%; background: transparent}
.header li{ float: left;width: 7em;margin: 0 1.5em 0 2em;padding: 0}
.header li a{text-decoration: none; display: block; font-weight: bold}
.header li a:link, .header li a:visited { color: #194948;background:transparent}
.header li a:hover { background:#8143C0;color:#fff}
.header li a:active { background:#8143C0;color:#000}
.header li#current {background:#fff;font-weight: bold;color:#ff0000;}
<div class="header">
<ul class="topnav">
<li id="current">Home</li>
<li id="test"><a href="test.htm" title="test">test</a></li>
</ul>
</div>
best
johannes
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
