Stylesheets - Showing link for current page

Author

Showing link for current page

Rhino

2005-11-19, 10:23 pm

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">Policies</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

2005-11-20, 7:07 pm

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">Policies</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

2005-11-20, 7:07 pm

"Disco Octopus" <discooctopus@yahoo.com> wrote in message
news:1piwbj4gfyz2t$.f9p7474g1vv5.dlg@40tude.net...
> Rhino wrote:
>
>
> 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

2005-11-21, 11:31 pm

"Rhino" <no.offline.contact.please@nospam.com> wrote in
news:sEOff.3886$KP5.505002@news20.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">Policies</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.