menu link to not change color

#1

Hello. I have a navigation bar at the top of all my pages with css-styled
buttons that change color when hovered over. I am a little confused on how
to disable that for the link that the page is on, for example, the sitemap
link in the navigation bar on the sitemap page, the studies link for the
navigation bar on the studies page, etc.

The css is at http://www.TheBicyclingGuitarist.net/css/style.css

The sitemap is at
http://www.TheBicyclingGuitarist.net/sitemap.htm

Any tips will be greatly appreciated. Do I need to make a new class and
surround the relevant link with <span> tags, or is there a better way?
Thanks.

--
The Bicycling Guitarist

#2

In article <478af24c$0$3969$6e1ede2f (AT) read (DOT) cnntp.org>,
"The Bicycling Guitarist" <Chris (AT) TheBicyclingGuitarist (DOT) net>
wrote:

Quote:

Hello. I have a navigation bar at the top of all my pages with css-styled
buttons that change color when hovered over. I am a little confused on how
to disable that for the link that the page is on, for example, the sitemap
link in the navigation bar on the sitemap page, the studies link for the
navigation bar on the studies page, etc.

The css is at http://www.TheBicyclingGuitarist.net/css/style.css

The sitemap is at
http://www.TheBicyclingGuitarist.net/sitemap.htm

Any tips will be greatly appreciated. Do I need to make a new class and
surround the relevant link with <span> tags, or is there a better way?
Thanks.

On that page, you have this:

<div id="menubar">
<ul>
<li class="skip">
<a class="menu2" href="#skiplinks" title="skip navigation
links">Skip links</a>
</li>
<li>
<a class="menu2" href="schwinn/tbg.htm" title="tells how I
became known as The Bicycling Guitarist.">About me</a>
</li>
<li>
<a class="menu2" href="songs/warning.htm" title="leads to
my original songs, with optional free audio
downloads.">R Band</a>
</li>
<li>
<a class="menu2" href="ranchero/index.htm" title="shows the
history and restoration of my 1965 Ford Falcon
Ranchero.">Ranchero</a>
</li>

etc.

First, yes, you can just class the link you do not want to have
hovering effects; <a class="current" href="...> is a common
practice. You then style the .current how you wish in the css.

Second, you can also not have the link at all so not even a
cursor hand will appear, in this case you might style just the li
itself to fit in with the real links in style. It is common and
informational to have the text a little different, perhaps in
colour or background (this is an extra way for users to know
which page they are on out of the choices in the navigation strip.

Third, (but I have not studied your site properly so this may not
be convenient on the whole) you don't generally need to keep
putting class="menu2" if you use #menubar li a to specify a
style. It is briefer.

There are some server side solutions so the page itself "knows"
which page it is and "turns off" links to itself. In PHP.

Ford Falcons eh? hmmm... Somehow I don't think mine would be
welcome in the gatherings you picture <g>

--
dorayme

#3

"dorayme" <doraymeRidThis (AT) optusnet (DOT) com.au> wrote

Quote:

In article <478af24c$0$3969$6e1ede2f (AT) read (DOT) cnntp.org>,
"The Bicycling Guitarist" <Chris (AT) TheBicyclingGuitarist (DOT) net
wrote:

Hello. I have a navigation bar at the top of all my pages with css-styled
buttons that change color when hovered over. I am a little confused on
how

First, yes, you can just class the link you do not want to have
hovering effects; <a class="current" href="...> is a common
practice. You then style the .current how you wish in the css.

Second, you can also not have the link at all so not even a
cursor hand will appear, in this case you might style just the li
itself to fit in with the real links in style. It is common and
informational to have the text a little different, perhaps in
colour or background (this is an extra way for users to know
which page they are on out of the choices in the navigation strip.

Third, (but I have not studied your site properly so this may not
be convenient on the whole) you don't generally need to keep
putting class="menu2" if you use #menubar li a to specify a
style. It is briefer.

Thank you for your help, Dorayme.
Well I followed the first suggestion so far, but I plan to implement the
second suggestion (no link, just styling the li for the current page), and I
want to learn how to do the third suggestion. It's a little beyond me right
now. I automatically think "tic-tac-toe" when I see #.

#4

"The Bicycling Guitarist" <Chris (AT) TheBicyclingGuitarist (DOT) net> wrote

Quote:

Hello. I have a navigation bar at the top of all my pages with css-styled
buttons that change color when hovered over. I am a little confused on how
to disable that for the link that the page is on, for example, the sitemap
link in the navigation bar on the sitemap page, the studies link for the

Oh heck. I just noticed that the navigation bar for the site map page is a
wee bit smaller than the navigation bars on all the other pages. I think
this is because I have set styles for <p> and <a> in the header of the site
map page so they are only 90% regular size (because of all the links on that
page). What's the best fix for this without changing the 90% for the body
content? I don't want to assign a class name and put that into every single
<p> and <a> on the page.

#5

In article <478b14a3$0$3967$6e1ede2f (AT) read (DOT) cnntp.org>,
"The Bicycling Guitarist" <Chris (AT) TheBicyclingGuitarist (DOT) net>
wrote:

Quote:

"dorayme" <doraymeRidThis (AT) optusnet (DOT) com.au> wrote in message
news:doraymeRidThis-504DD5.17352614012008 (AT) news-vip (DOT) optusnet.com.au...
In article <478af24c$0$3969$6e1ede2f (AT) read (DOT) cnntp.org>,
"The Bicycling Guitarist" <Chris (AT) TheBicyclingGuitarist (DOT) net
wrote:

Third, (but I have not studied your site properly so this may not
be convenient on the whole) you don't generally need to keep
putting class="menu2" if you use #menubar li a to specify a
style. It is briefer.

Thank you for your help, Dorayme.
Well I followed the first suggestion so far, but I plan to implement the
second suggestion (no link, just styling the li for the current page), and I
want to learn how to do the third suggestion. It's a little beyond me right
now. I automatically think "tic-tac-toe" when I see #.

OK, about the third, here is a sort of case where the savings are
considerable - might get you to see how easy it is:

Suppose you want to float a *lot* of divs, you want them to be a
certain size as well and maybe other special things. Let us
suppose they are in a wrapper div.

<dv id="wrapper">...lots of divs within...</div>.

It is a bore (as well as adding to bandwidth and clutter) to
class every single inner div. It is easier to target them all in
one go by:

#wrapper div {float: left; width: ... etc ...;}

This targets all the div children of the #wrapper div. Not any
other divs elsewhere. You can also use classed wrappers. ID here
is just an example (to emphasise that it is unique and therefore
a rather nice handle to identify a whole mob of its children).

From what I did see of your css, I am sure you do understand this
idea to a degree (see your own css!).

--
dorayme

#6

"The Bicycling Guitarist" <Chris (AT) TheBicyclingGuitarist (DOT) net> wrote

Quote:

"The Bicycling Guitarist" <Chris (AT) TheBicyclingGuitarist (DOT) net> wrote in
message news:478af24c$0$3969$6e1ede2f (AT) read (DOT) cnntp.org...
Hello. I have a navigation bar at the top of all my

Oh heck. I just noticed that the navigation bar for the site map page is a
wee bit smaller than the navigation bars on all the other pages. I think
this is because I have set styles for <p> and <a> in the header of the
site map page so they are only 90% regular size (because of all the links
on that page). What's the best fix for this without changing the 90% for
the body content?

For now, I removed the 90% from the css in the header. I could add it back
for the div containing the sitemap content, or not. I thought that with so
many links, that having slightly smaller text would be more useful.

#7

On 14 Jan, 06:35, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:

Quote:

There are some server side solutions so the page itself "knows"
which page it is and "turns off" links to itself. In PHP.

You can do that statically too.

Put a "pagename" class onto the body for each page.

Use slightly more complex CSS selectors (including a hard-coded list
of pagenames) to recognise each of these.

The cost of this is needing to hard-code that list into the CSS, but
it works, and it works with static code.

#8

In article
<c2b1f724-a94b-43a7-a1eb-54cee1e5b3a0 (AT) k2g2000hse (DOT) googlegroups.com

Quote:

,
Andy Dingley <dingbat (AT) codesmiths (DOT) com> wrote:

Quote:

On 14 Jan, 06:35, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:

There are some server side solutions so the page itself "knows"
which page it is and "turns off" links to itself. In PHP.

You can do that statically too.

Put a "pagename" class onto the body for each page.

Use slightly more complex CSS selectors (including a hard-coded list
of pagenames) to recognise each of these.

The cost of this is needing to hard-code that list into the CSS, but
it works, and it works with static code.

Actually, thanks for the reminder on this. I speak, of course, on
behalf of the archives. <g>

--
dorayme

#9

"dorayme" <doraymeRidThis (AT) optusnet (DOT) com.au> wrote

Quote:

In article <478b14a3$0$3967$6e1ede2f (AT) read (DOT) cnntp.org>,
"The Bicycling Guitarist" <Chris (AT) TheBicyclingGuitarist (DOT) net
wrote:

"dorayme" <doraymeRidThis (AT) optusnet (DOT) com.au> wrote in message
news:doraymeRidThis-504DD5.17352614012008 (AT) news-vip (DOT) optusnet.com.au...
In article <478af24c$0$3969$6e1ede2f (AT) read (DOT) cnntp.org>,
"The Bicycling Guitarist" <Chris (AT) TheBicyclingGuitarist (DOT) net
wrote:

Third, (but I have not studied your site properly so this may not
be convenient on the whole) you don't generally need to keep
putting class="menu2" if you use #menubar li a to specify a
style. It is briefer.

now. I automatically think "tic-tac-toe" when I see #.

OK, about the third, here is a sort of case where the savings are
considerable - might get you to see how easy it is:
snip
dv id="wrapper">...lots of divs within...</div>.

It is a bore (as well as adding to bandwidth and clutter) to
class every single inner div. It is easier to target them all in
one go by:

#wrapper div {float: left; width: ... etc ...;}

This targets all the div children of the #wrapper div. Not any
other divs elsewhere. You can also use classed wrappers. ID here
is just an example (to emphasise that it is unique and therefore
a rather nice handle to identify a whole mob of its children).

From what I did see of your css, I am sure you do understand this
idea to a degree (see your own css!).

I understand it to a degree, but based on the online tutorials I've found
for css I'd rate myself at the low intermediate level, above beginner but
far below advanced. This newsgroup and the c.i.w.a.h. newsgroup have helped
me a lot over the years. What you have suggested with this tip is the next
great project for me to improve the code of my web site. It may take a while
yet.

#10

On 1/14/08 7:16 AM, Andy Dingley wrote:

Quote:

On 14 Jan, 06:35, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:

There are some server side solutions so the page itself "knows"
which page it is and "turns off" links to itself. In PHP.

You can do that statically too.

Put a "pagename" class onto the body for each page.

Use slightly more complex CSS selectors (including a hard-coded list
of pagenames) to recognise each of these.

The cost of this is needing to hard-code that list into the CSS, but
it works, and it works with static code.
Andy,

Do you have a code snippet or live example of this static method that
you could share ?

TIA.

--
Art