Re: [css-d] Can CSS compare the href to the URL and if they match, highlight the href?
I believe there is a way to add code to SSI includes, IIRC. However, for a CSS solution, your last method is probably the easiest to implement. Thanks for thinking about this, David. I guess I will go with what I've come up with - it's been great having all this input. thanks all! Sandy __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Can CSS compare the href to the URL and if they match, highlight the href?
On Wed, 18 Feb 2009 14:02:07 -0500, Sandy wrote:
I am working on a site that uses menus that are includes. I have been
wrestling with a way to highlight the link to the page you are on in the
included menu. I have a way that works, but it's kind of labour intensive -
every page needs a unique bit of style in the header. I'm hoping you guys can
suggest something a bit more global.
Here is the site and the related style sheets.
http://www.cantoraccess.com
http://www.cantoraccess.com/css/ca.css
http://www.cantoraccess.com/css/menu.css
http://www.cantoraccess.com/css/ie6-hacks.css
http://www.cantoraccess.com/css/ie7-hacks.css
[...]
Is there a way to write the style so that it will work without putting a
style unique to each page in the head of that page? Can CSS compare the href
to the URL and if they match, highlight the href? If every body tag has a
unique id and I add a matching id to the link to that page, could I somehow
get the browsers to compare that?
I believe there is a way to add code to SSI includes, IIRC. However,
for a CSS solution, your last method is probably the easiest to implement.
Give each link a unique ID or class, and put a similar ID or the same class
on the BODY tag of each page.
Example:
HTML:
body class=macros_1
li class=macros_1a href=macros_2008_resna_library_download.shtml ...
li class=macros_2a href=macros_2006_csun_quadruple.shtml ...
CSS
body.macros_1 li.macros_1 a,
body.macros_2 li.macros_2 a,
body.macros... /* rest of the links */ {
/* styling for your are here link */
}
(You don't really need the tag name qualifier, as
.macros_1 .macros_1 a
will target the same link.
Cordially,
David
--
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Can CSS compare the href to the URL and if they match, highlight the href?
I am working on a site that uses menus that are includes. I have been
wrestling with a way to highlight the link to the page you are on in the
included menu. I have a way that works, but it's kind of labour
intensive - every page needs a unique bit of style in the header. I'm
hoping you guys can suggest something a bit more global.
Here is the site and the related style sheets.
http://www.cantoraccess.com
http://www.cantoraccess.com/css/ca.css
http://www.cantoraccess.com/css/menu.css
http://www.cantoraccess.com/css/ie6-hacks.css
http://www.cantoraccess.com/css/ie7-hacks.css
An example: here is a landing page
http://www.cantoraccess.com/publications/macros.shtml
which uses the included list of links
http://www.cantoraccess.com/includes/pub_macros_articles.shtml
The list of links is also included in all the articles listed on the
landing page as a side bar menu, for example
http://www.cantoraccess.com/publications/macros_2008_resna_library_download.shtml
(publications that only appear in print are turned off. These show up on
the landing page, but not in the menus.)
Currently none of the pages on this site that have included menus have
any highlights in those menus to show what page you are on. I have just
read an article on askthecssguy.com called Showing Hyperlink Cues with CSS
http://askthecssguy.com/2006/12/showing_hyperlink_cues_with_cs_1.html
I used his samples to come up with this
.menu a[href $='test.shtml'] {
padding-left: 28px;
background: transparent url(../images/braille_arrow.jpg) no-repeat
top left;
font-weight : bold;
color : #66;
}
which I have placed in the head of
http://www.cantoraccess.com/publications/test.shtml
The links in the Related Publications menu on this page are an include
http://www.cantoraccess.com/includes/testinclude.shtml
The link to test.shtml is highlighted on this page because of the
style in the head.
Is there a way to write the style so that it will work without putting a
style unique to each page in the head of that page? Can CSS compare the
href to the URL and if they match, highlight the href? If every body tag
has a unique id and I add a matching id to the link to that page, could
I somehow get the browsers to compare that?
thanks guys!
Sandy
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Can CSS compare the href to the URL and if they match, highlight the href?
Is there a way to write the style so that it will work without putting a style unique to each page in the head of that page? Can CSS compare the href to the URL and if they match, highlight the href? If every body tag has a unique id and I add a matching id to the link to that page, could I somehow get the browsers to compare that? You could probably do something with the CSS3 :target pseudo-class, but it would be awkward at best. Browser support would also be lacking. The best bet is some sort of server side programming or Javascript; however, both would be off topic. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Can CSS compare the href to the URL and if they match, highlight the href?
Is there a way to write the style so that it will work without putting a style unique to each page in the head of that page? Can CSS compare the href to the URL and if they match, highlight the href? If every body tag has a unique id and I add a matching id to the link to that page, could I somehow get the browsers to compare that? You could probably do something with the CSS3 :target pseudo-class, but it would be awkward at best. Browser support would also be lacking. The best bet is some sort of server side programming or Javascript; however, both would be off topic. Scott - thanks! Browser support isn't too big an issue for this - the site works without it, this just adds a little extra. http://www.w3.org/TR/css3-selectors/#target-pseudo If I understand :target pseudo-class (which I don't necessarily!) it looks like you can take, say, all the anchor links and style them. It seems to be about creating groups, and giving them a treatment. Is there any css approach to comparing two things, and styling according to how they compare? Sandy __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Can CSS compare the href to the URL and if they match, highlight the href?
Sandy wrote:
Browser support isn't too big an issue for this - the site works without
it, this just adds a little extra.
A bit of unobtrusive Javascript would be a good fit here.
http://www.w3.org/TR/css3-selectors/#target-pseudo
If I understand :target pseudo-class (which I don't necessarily!) it
looks like you can take, say, all the anchor links and style them. It
seems to be about creating groups, and giving them a treatment.
The :target pseudo-class refers to the fragment identifier portion of
your current URI.
So if you're current URI is http://www.blah.com/blah/index.htm#example
AND in that pages markup there is an element with an id attrib equal to
'example', you could give that element a border using this css rule:
*:target {border:1px solid #C00;}
So, if you were willing to apply an id attrib and matching fragment
identifiers to each of your menu links you could achieve your goal. I
won't recommend it though; it feels like an abuse of the fragment
identifier, and the focus of each page will initially be one of your
menu items--an unusual (confusing) page behavior for both mouse and
keyboard users.
--
//
Shawn Lawler
Institute on Community Integration
University of Minnesota
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
