Changing link properties for "current" entry on menu

[Don G]

Within the menu for my site, I have inserted 'class="current"' within
the link for the current page. So the link looks somthing link:

<li><a href="index.php" class="current">Home</a></li>

The css for formatting the menu links is:

#menu a:hover {
background-color: #E00080;
color: white;
}

#menu a:active {
background-color: #E00080;
color: white;
}

#menu li li a {
display: block;
color: white;
background-color: #C00080;
width: 100%;
padding: 0.5em 0.5em 0.5em 2em;
text-decoration: none;
border-bottom: 1px solid #fff;
font-weight: normal;
font-size: 75%;
}

and for the "current" link:

..current {
background-color: red;
}

But the formatting does not show up.

Does anyone have any idea what I'm doing wrong? If you would like to
look at the complete site, go to:

http://holly.sillyfamily.org/

Thank you for your help,

Don

PS If you have any suggestions, please feel free to offer them. The
general color scheme is non-negotiable though (it's for my daughter
after all). Though, I might work up some alternate stylesheets.

[David Dorward]

Don G wrote:

#menu a:hover { background-color: #E00080; }
and for the "current" link:
.current { background-color: red; }
But the formatting does not show up.

Most specific selector wins. .current is less specific then #menu a:hover.

http://www.w3.org/TR/CSS2/cascade.html#specificity

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

[Christoph Paeper]

*Don G* <ma******@yahoo.com>:

Within the menu for my site, I have inserted 'class="current"' within
the link for the current page.
Why? Why would anyone want to go to the current page? It's just confusing
people.
<li><a href="index.php" class="current">Home</a></li>
Why "index.php"? "./" or "/" seem logical.

<li><a>Home</a></li>

#menu a {
background-color: red;
color: white;
}
#menu a:link, #menu a:visited {
background-color: #C00080;
}
#menu a:hover {
background-color: #E00080;
}
#menu a:active {
background-color: #E00080;
}

Or something like that.

--
It's so simple to be wise. Just think of
something stupid to say and say the opposite.

[Don G]

> Why? Why would anyone want to go to the current page? It's just

confusing people.
Why, well, I don't want change the menu for each page removing the link
to the current page, but I would like to differentiate the link for the
current page from the rest of the links so the user can know which page
they are on by looking at the menu.
Why "index.php"? "./" or "/" seem logical.
Why not? Does it really make a difference? I did it for consistency.
The rest of the links in the menu specify a filename so I specified the
link to index.php as well. Is there a good reason to not do it?
<li><a>Home</a></li>

#menu a {
background-color: red;
color: white;
}
#menu a:link, #menu a:visited {
background-color: #C00080;
}

#menu a:hover {
background-color: #E00080;
}
#menu a:active {
background-color: #E00080;
}

Or something like that.

I'm including the menu using PHP to help with site management, and it is
easy to add 'class="current"'. However, I am not aware of how I might
remove the href for the link to the current page, which is why I asked
the question I asked. So, do you know of a way to remove the href using
PHP?

Thanks,

Don

[Don G]

>>#menu a:hover { background-color: #E00080; }

and for the "current" link:
.current { background-color: red; }
But the formatting does not show up.

Most specific selector wins. .current is less specific then #menu a:hover.

Ah, interesting. I was not aware of this. I was thinking that since it
was later in the cascade, then it would override. So, how do I fix my
problem then? I tried making "current" more specific by switching it to:

#current ul li a { background-color: red; }
#current ul li a:hover { background-color: red; }

But I still got the same result. My understanding of the link you sent
is that what I have above is more specific than what I had originally
because of the added element names.

Ah ha! I've got it now.

#menu ul li a.current { background-color: red; }
#menu ul li a.current:hover { background-color: red; }

Does what I want it to do! I don't know if everything I've specified is
necessary, but it works. I'll play with it some more to see what happens.

Thanks a bundle!

Don

[Lauri Raittila]

in comp.infosystems.www.authoring.stylesheets, Don G wrote:

Why? Why would anyone want to go to the current page? It's just
confusing people.
Why, well, I don't want change the menu for each page removing the link
to the current page,

Why? that is usually best approach. I can't think any reason why person
would like to go to same page he already is, especially using menu.
but I would like to differentiate the link for the
current page from the rest of the links so the user can know which page
they are on by looking at the menu.

Why "index.php"? "./" or "/" seem logical.
Why not? Does it really make a difference?

Sure it makes. if you are in page
http://www.example.org/foo/
and there is link to
http://www.example.org/foo/index.php (if you use index.php)
it surely looks different that that link to
http://www.example.org/foo/ (if you use ./)
I did it for consistency.
It is less consistant, as you use different URL for same page. If your
server is some rare case that never shows / on end but redirects to
/index.xxx, then it might be consistant.
The rest of the links in the menu specify a filename so I specified the
link to index.php as well. Is there a good reason to not do it? I'm including the menu using PHP to help with site management, and it is
easy to add 'class="current"'. However, I am not aware of how I might
remove the href for the link to the current page, which is why I asked
the question I asked. So, do you know of a way to remove the href using
PHP?

No, I don't, but I suspect it is just as easy.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.

[Don G]

> Why? that is usually best approach. I can't think any reason why person

would like to go to same page he already is, especially using menu.
No, but a person is able to look at the menu and see where they are. I
was under the impression that it is a good idea to indicate on the menu
which page is currently being displayed.
Sure it makes. if you are in page
http://www.example.org/foo/
and there is link to
http://www.example.org/foo/index.php (if you use index.php)
it surely looks different that that link to
http://www.example.org/foo/ (if you use ./)

I suppose you are right, but I think that it is clear from the menu,
especially with highlighting the current page, that it is a link to the
current page.

The rest of the links in the menu specify a filename so I specified the
link to index.php as well. Is there a good reason to not do it?

I'm including the menu using PHP to help with site management, and it is
easy to add 'class="current"'. However, I am not aware of how I might
remove the href for the link to the current page, which is why I asked
the question I asked. So, do you know of a way to remove the href using
PHP?

No, I don't, but I suspect it is just as easy.

I just thought of another potential snag, or maybe another bad design
choice on my part. I am using a multi-tier menu whose HTML is similar
to this:

<div id="menu">
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a>Group A</a>
<ul>
<li>
<a href="itema1.html">Item A1</a>
</li>
<li>
<a href="itema2.html">Item A2</a>
</li>
<li>
<a href="itema3.html">Item A3</a>
</li>
</ul>
</li>
<a>Group B</a>
<ul>
<li>
<a href="itemb1.html">Item B1</a>
</li>
<li>
<a href="itemb2.html">Item B2</a>
</li>
<li>
<a href="itemb3.html">Item B3</a>
</li>
</ul>
</ul>
</div>

I did this because I wanted all of the top tier items to have the same
appearance, regardless of whether they were a link. So, if I just
remove the href, then the current page will not be differentiated. I
guess there are other ways of doing what I have done, but it would
involve rethinking how I have done the CSS for my menu. I based what I
did off of an example I found, not realizing the potential problems.

Does anyone have a link to suggested best practices for menus?

Thanks,

Don

[Lauri Raittila]

in comp.infosystems.www.authoring.stylesheets, Don G wrote:

Why? that is usually best approach. I can't think any reason why person
would like to go to same page he already is, especially using menu.
No, but a person is able to look at the menu and see where they are. I
was under the impression that it is a good idea to indicate on the menu
which page is currently being displayed.

Sure, but it is not good idea to have link there.

Sure it makes. if you are in page
http://www.example.org/foo/
and there is link to
http://www.example.org/foo/index.php (if you use index.php)
it surely looks different that that link to
http://www.example.org/foo/ (if you use ./)

I suppose you are right, but I think that it is clear from the menu,
especially with highlighting the current page, that it is a link to the
current page.

No, it is not necessarily so. What is user uses some toher means to
access that link? Things like links panel in Opera 7? Or if user has CSS
disabled? And it might be not show up as visited link if you use
different URL (in fact, it could be different page, so that is no
wonder).

The rest of the links in the menu specify a filename so I specified the
link to index.php as well. Is there a good reason to not do it?

Yes. 2 URLs for same page is not good.
I just thought of another potential snag, or maybe another bad design
choice on my part. I am using a multi-tier menu whose HTML is similar
to this:

<a>Group B</a>
I did this because I wanted all of the top tier items to have the same
appearance, regardless of whether they were a link. So, if I just
remove the href, then the current page will not be differentiated.
Well, you need to differentiate it. Anyway, I think your markup should
make difference between headings and links.
Does anyone have a link to suggested best practices for menus?

Best practice is not to include complex menu on every page...

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.

[Don G]

> Best practice is not to include complex menu on every page...

It really isn't all that complex of a menu, or at least I don't think
so. It sounds more complex that it really is.

So, what is a better way to do it? It seems to me that most pages do
what I am talking about (though they may be doing it better than I am).
I realize that that isn't necessarily an indication that it is a good
thing, but it seems to work rather well.

Do you think it would be better to have a link on each page that takes
the reader back to the index?

Thanks,

Don

[Lauri Raittila]

in comp.infosystems.www.authoring.stylesheets, Don G wrote:

Best practice is not to include complex menu on every page...
It really isn't all that complex of a menu, or at least I don't think
so. It sounds more complex that it really is.

So, what is a better way to do it? It seems to me that most pages do
what I am talking about (though they may be doing it better than I am).

Most pages do things bad way... To know what is good for your page, it
would require knowing your page.
I realize that that isn't necessarily an indication that it is a good
thing, but it seems to work rather well.
It is not necessarily very bad thing.
Do you think it would be better to have a link on each page that takes
the reader back to the index?

Likely.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.

[Don G]

> Most pages do things bad way... To know what is good for your page, it

would require knowing your page.

Feel free to take a look and give me any comments you might have.

holly.sillyfamily.org

Thank you for your help,

Don

[Lauri Raittila]

in comp.infosystems.www.authoring.stylesheets, Don G wrote:

Most pages do things bad way... To know what is good for your page, it
would require knowing your page.

Feel free to take a look and give me any comments you might have.

holly.sillyfamily.org

Thank you for your help,

You will have confusingly complex menu in 6 months, if you add one item
each month. And already, your manu is taking space that could be used for
something else, for example to put next/previous links available without
scrolling.

It is confusing that I can't click Pre-Birth but can click Home, they
look and feel same.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.

[Don G]

> You will have confusingly complex menu in 6 months, if you add one item

each month.
Why do you say it is complex? It is but a simple list. Aside from the
fact that some of the items are not links, how is it confusing?
And already, your manu is taking space that could be used for
something else, for example to put next/previous links available without
scrolling.
Yes, that would be nice, but I thought it would be better to always be
able to jump to any other page without having to go back. I guess that
is why is at least part of why you feel it is complex.
It is confusing that I can't click Pre-Birth but can click Home, they
look and feel same.

You have a good point here. What I think I will do now is move most of
the formatting from the link tag to the list item tags, but keep the
hover on the links. This will help differentiate links from non-links.
Do you think that would eliminate the confusion or should I do
something else to help differentiate the non-links?

Thank you for your input,

Don

[Lauri Raittila]

in comp.infosystems.www.authoring.stylesheets, Don G wrote:

You will have confusingly complex menu in 6 months, if you add one item
each month.
Why do you say it is complex? It is but a simple list. Aside from the
fact that some of the items are not links, how is it confusing?

Hard to tell what is confusing, if the part that is confusing is not to
be taken account. It is 2 levels, but not consistant. It is not clear
that it is 2 levels, and especially it is not clear that home is link and
the others are headings.
Yes, that would be nice, but I thought it would be better to always be
able to jump to any other page without having to go back.
So, you are assumimg that your images are so uninteresting, that
almost nobody bothers to look at them? I don't think you are wrong
here... but your mother is most likely bigger target for this page than
thousand ciwas readers...

It is confusing that I can't click Pre-Birth but can click Home, they
look and feel same.

You have a good point here. What I think I will do now is move most of
the formatting from the link tag to the list item tags, but keep the
hover on the links. This will help differentiate links from non-links.

But it is not perfect. They should not look same.
Do you think that would eliminate the confusion or should I do
something else to help differentiate the non-links?

You need to make links look more links and text look more passive. It
doesn't help much to make them look different, if it is still unclear
which is link and which is text. There is convention that blue,
underlined text is link. That is best way to provide links today.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.

[Don G]

> So, you are assumimg that your images are so uninteresting, that

almost nobody bothers to look at them? I don't think you are wrong
here...

There is no reason to be rude. I appologize for wasting your time by
asking for your advice on this learning project.

Good day,

Don