[css-d] current navigation indicator for included menus

2009-09-15 Thread Sandy 
Hey all,

I have a little site where the main menu is an include. Each link list 
item has an id, and I add a style for that id in the header of the 
current page that shows it's the current item.

http://askon.ca/en/index.shtml
http://askon.ca/en/css/askon.css

I have used some css from
http://www.askthecssguy.com/2006/12/showing_hyperlink_cues_with_cs_1.html
in other contexts, for example

a[href ^=mailto:;] {
padding-right: 20px;
background: transparent url(icon_mail.gif) no-repeat center right;
}


the

a[href ^=mailto:;]

tells you to style anything that starts with the mailto:;
He has other styles that tell you to style anything that ends with .pdf.

What I would love is to figure out how to put the whole page name in the 
style so that I can eliminate the ids in the menu - something like
a[href =index.shtml]
except that doesn't work.

Any thoughts?

thanks!
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] current navigation indicator for included menus

2009-09-15 Thread Tim Snadden 

On 16/09/2009, at 8:12 AM, Sandy wrote:

 Hey all,

 I have a little site where the main menu is an include. Each link list
 item has an id, and I add a style for that id in the header of the
 current page that shows it's the current item.

 http://askon.ca/en/index.shtml
 http://askon.ca/en/css/askon.css

 I have used some css from
 http://www.askthecssguy.com/2006/12/showing_hyperlink_cues_with_cs_1.html
 in other contexts, for example

 a[href ^=mailto:;] {
padding-right: 20px;
background: transparent url(icon_mail.gif) no-repeat center right;
 }


 the

 a[href ^=mailto:;]

 tells you to style anything that starts with the mailto:;
 He has other styles that tell you to style anything that ends  
 with .pdf.

 What I would love is to figure out how to put the whole page name in  
 the
 style so that I can eliminate the ids in the menu - something like
 a[href =index.shtml]
 except that doesn't work.

 Any thoughts?

Hi - The reason that it isn't working is that the attribute selector  
has lower specificity than your class selector and pseudo selectors.  
You can use !important if you need to test whether or not it's a  
specificity issue. I'd recommend removing !important after that and  
rethinking the specificity of your selectors.

This works...

.menu a[href~=contact.shtml] {
color : #000;
background-color : #eff39c;
font-weight : bold;
}

Bear in mind that this doesn't work in IE6. Off the top of my head I  
can't remember if it works in IE7. Another approach might be to add a  
class or id to the body or a containing div via SSI and style from  
there.

Forgive me for straying from the CSS but do you realise that your  
include will only work with a flat site? If you include it in a file  
in a subdirectory all of the links will break unless you make them  
root relative (starting with a slash). I'm assuming that you are using  
SSIs as you don't have a server side language available. If you have  
to use SSIs you can actually push them quite far. You have various  
server variables available to you and a bit of 'if else' type flow  
control.

Cheers, Tim




__
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] current navigation indicator for included menus

2009-09-15 Thread Alan Gresley 
Sandy wrote:
 Hey all,
 
 I have a little site where the main menu is an include. Each link list 
 item has an id, and I add a style for that id in the header of the 
 current page that shows it's the current item.
 
 http://askon.ca/en/index.shtml
 http://askon.ca/en/css/askon.css
 
[...]
 What I would love is to figure out how to put the whole page name in the 
 style so that I can eliminate the ids in the menu - something like
 a[href =index.shtml]
 except that doesn't work.
 
 Any thoughts?
 
 thanks!
 Sandy


Hello Sandy,

You should have a $ in that selector which indicates the end portion of 
an attribute string.

a[class$=index.shtml] {}


http://www.w3.org/TR/css3-selectors/#attribute-substrings


-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
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/