Showing link for current page

[Rhino]

Yesterday, I reworked the index on my site - http://sfl.london.on.ca - so
that they used list markup and I'm quite pleased with them. However, I'm
having a problem with one small aspect of the menu and could use some help
in fixing it.

The problem is that I want the index to always highlight the link for the
content which is currently being displayed on the right hand side of the
page. This behaviour should be over and above the rollovers on the links and
it should work in the three major browsers, IE, Firefox, and Opera.

So, for example, if someone moves their mouse over the "Club Policies" link
in the index, the link should be highlighted as a rollover and if they click
on that link, the browser should show the Club Policies page on the right
AND highlight that link in the index. Naturally, the link should appear
differently than it does for a regular rollover. The highlighting for the
currently-selected page should persist until someone clicks on a new page.
I've got this working fine in IE6 but it doesn't work in Firefox and Opera.
Does anyone know how I could make this work in Firefox and Opera as well?

The basic technique I am using is to have an id for each link in the menu,
like this:
<a href="policies. shtml" id="policies">P olicies</a>

Then, have this in the Policies page:
<style type="text/css">#policies {background: #FF9933}</style>

Can this technique be tweaked so it works in all three browsers? Or will I
have to change it dramatically? Or will this technique simply not work for
all of the three browsers no matter what I do?

By the way, if anyone can think of a technique that doesn't involve putting
any CSS in the HTML markup of the individual pages, I'd love to hear it. The
current technique uses only one line of internal CSS in each HTML page but
I'd prefer none at all....
--
Rhino

[Disco Octopus]

Rhino wrote:

Yesterday, I reworked the index on my site - http://sfl.london.on.ca - so
that they used list markup and I'm quite pleased with them. However, I'm
having a problem with one small aspect of the menu and could use some help
in fixing it.

The problem is that I want the index to always highlight the link for the
content which is currently being displayed on the right hand side of the
page. This behaviour should be over and above the rollovers on the links and
it should work in the three major browsers, IE, Firefox, and Opera.

So, for example, if someone moves their mouse over the "Club Policies" link
in the index, the link should be highlighted as a rollover and if they click
on that link, the browser should show the Club Policies page on the right
AND highlight that link in the index. Naturally, the link should appear
differently than it does for a regular rollover. The highlighting for the
currently-selected page should persist until someone clicks on a new page.
I've got this working fine in IE6 but it doesn't work in Firefox and Opera.
Does anyone know how I could make this work in Firefox and Opera as well?

The basic technique I am using is to have an id for each link in the menu,
like this:
<a href="policies. shtml" id="policies">P olicies</a>

Then, have this in the Policies page:
<style type="text/css">#policies {background: #FF9933}</style>

Can this technique be tweaked so it works in all three browsers? Or will I
have to change it dramatically? Or will this technique simply not work for
all of the three browsers no matter what I do?

By the way, if anyone can think of a technique that doesn't involve putting
any CSS in the HTML markup of the individual pages, I'd love to hear it. The
current technique uses only one line of internal CSS in each HTML page but
I'd prefer none at all....

instead of this....

#navlist li a {
color: #ffffff;
background-color: inherit;
text-decoration: none;
display: block;
}


try this....
#navlist li a {
color: #ffffff;
text-decoration: none;
display: block;
}


--
a beef jerky site http://www.choicebeefjerky.com.au
not a beef jerky site http://mycoolwheels.com/vote.cmks
nobody ever dreams of working for the man

[Rhino]

"Disco Octopus" <di**********@y ahoo.com> wrote in message
news:1p******** *************** ******@40tude.n et...

Rhino wrote:

Yesterday, I reworked the index on my site - http://sfl.london.on.ca - so
that they used list markup and I'm quite pleased with them. However, I'm
having a problem with one small aspect of the menu and could use some
help
in fixing it.

The problem is that I want the index to always highlight the link for the
content which is currently being displayed on the right hand side of the
page. This behaviour should be over and above the rollovers on the links
and
it should work in the three major browsers, IE, Firefox, and Opera.

So, for example, if someone moves their mouse over the "Club Policies"
link
in the index, the link should be highlighted as a rollover and if they
click
on that link, the browser should show the Club Policies page on the right
AND highlight that link in the index. Naturally, the link should appear
differently than it does for a regular rollover. The highlighting for the
currently-selected page should persist until someone clicks on a new
page.
I've got this working fine in IE6 but it doesn't work in Firefox and
Opera.
Does anyone know how I could make this work in Firefox and Opera as well?

The basic technique I am using is to have an id for each link in the
menu,
like this:
<a href="policies. shtml" id="policies">P olicies</a>

Then, have this in the Policies page:
<style type="text/css">#policies {background: #FF9933}</style>

Can this technique be tweaked so it works in all three browsers? Or will
I
have to change it dramatically? Or will this technique simply not work
for
all of the three browsers no matter what I do?

By the way, if anyone can think of a technique that doesn't involve
putting
any CSS in the HTML markup of the individual pages, I'd love to hear it.
The
current technique uses only one line of internal CSS in each HTML page
but
I'd prefer none at all....

instead of this....

#navlist li a {
color: #ffffff;
background-color: inherit;
text-decoration: none;
display: block;
}


try this....
#navlist li a {
color: #ffffff;
text-decoration: none;
display: block;
}

Thanks, that did the trick!

Rhino

[Stan McCann]

"Rhino" <no************ ***********@nos pam.com> wrote in
news:sE******** ***********@new s20.bellglobal. com:

Yesterday, I reworked the index on my site - http://sfl.london.on.ca
- so that they used list markup and I'm quite pleased with them.
However, I'm having a problem with one small aspect of the menu and
could use some help in fixing it.

The problem is that I want the index to always highlight the link
for the content which is currently being displayed on the right hand
side of the page. This behaviour should be over and above the
rollovers on the links and it should work in the three major
browsers, IE, Firefox, and Opera.

So, for example, if someone moves their mouse over the "Club
Policies" link in the index, the link should be highlighted as a
rollover and if they click on that link, the browser should show the
Club Policies page on the right AND highlight that link in the
index. Naturally, the link should appear differently than it does
for a regular rollover. The highlighting for the currently-selected
page should persist until someone clicks on a new page. I've got
this working fine in IE6 but it doesn't work in Firefox and Opera.
Does anyone know how I could make this work in Firefox and Opera as
well?

The basic technique I am using is to have an id for each link in the
menu, like this:
<a href="policies. shtml" id="policies">P olicies</a>

Then, have this in the Policies page:
<style type="text/css">#policies {background: #FF9933}</style>

Can this technique be tweaked so it works in all three browsers? Or
will I have to change it dramatically? Or will this technique simply
not work for all of the three browsers no matter what I do?

By the way, if anyone can think of a technique that doesn't involve
putting any CSS in the HTML markup of the individual pages, I'd love
to hear it. The current technique uses only one line of internal CSS
in each HTML page but I'd prefer none at all....

I found the easiest way to do this is to set a style for .current
setting the current page's link to class="current" Make current look
however you'd like; hide the link, set different colors, background,
hovering, etc. It works in all browsers; you just have to remember
when creating/editing the page to make it the current page. Your
method of styling a bunch of ids seems like overkill. Do it once when
you can.

I don't see anything here (haven't looked at your pages) describing
what doesn't work with what browsers. Ids or classes, there should be
no reason that you can't set differences that'll work cross-browser.

Take a look at the bottom horizontal menu at http://abateofnm.org/ and
note my "greyed out" effect.

--
Stan McCann "Uncle Pirate" http://stanmccann.us/pirate.html
Webmaster/Computer Center Manager, NMSU at Alamogordo
http://alamo.nmsu.edu/ There are 10 kinds of people.
Those that understand binary and those that don't.