Re: [css-d] navigation link a different colour when page is active
Duncan Hill wrote: (bonus for whoever tells me why the four panels are rendered differently between surprising browsers, Firefox and IE7/8 versus all the rest! Duncan /Anything/ to relieve the boredom of all this. But, what four panels do you mean? Best, ~d -- desktop http://chelseacreekstudio.com/ __ 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] navigation link a different colour when page is active
--- On Tue, 8/3/10, Duncan Hill dun...@gmail.com wrote: to add a little to MB's method, and maybe confound the SSI doubters a little bit. The 'active' page can easily have its link disabled with no more than CSS by changing the cursor to a standard arrow so that the user does not expect any action, and the addition of the 'pointer-events' property set to none. An entire item on the menu can be just as easily hidden by using display: none; Of course, that method doesn't help if you don't have CSS enabled or if, for example, you're using a screen reader. You could also use javascript to remove the 'href' attribute, but that suffers from the same sort of problem. Ideally, you'd remove the href element server-side so the *content* is accurate. There shouldn't be any case where this is difficult. Yes, if you're just including a single static chunk of HTML for your menu, this isn't possible, so it's better to either dynamically generate the menu, or have a separate static 'chunk' for each different state. If your menu has more than one level of navigation, you'll need to do this anyway. - Bobby __ 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] navigation link a different colour when page is active
On Tue, 03 Aug 2010 11:29:15 +0100, Bobby Jack bobbykj...@yahoo.co.uk wrote: Of course, that method doesn't help if you don't have CSS enabled or if, for example, you're using a screen reader. You could also use javascript to remove the 'href' attribute, but that suffers from the same sort of problem. Ideally, you'd remove the href element server-side so the *content* is accurate. There shouldn't be any case where this is difficult. Yes, if you're just including a single static chunk of HTML for your menu, this isn't possible, so it's better to either dynamically generate the menu, or have a separate static 'chunk' for each different state. If your menu has more than one level of navigation, you'll need to do this anyway. - Bobby Agreed, without CSS it does not work and similarly doesn't take into account screen readers, however it seems much more probable that a 'normal' browser will have CSS enabled whereas JavaScript can more easily be disabled in many situations. The method works for relatively simple sites and handles SSI/PHP Includes, but it can soon become tiresome to write large sets of matching attributes to catch the correct pages. It will work with multi-level menus, but again can become complex on any but smallish sites. It is an easy and quite stable method for anyone who does not have the skills, or the need to start writing the dynamic scripts. The usual caveat applies that not all browsers respect the 'pointer-events' as yet. Best wishes Duncan -- Using Opera's revolutionary e-mail client: http://www.opera.com/mail/ __ 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] navigation link a different colour when page is active
On 8/2/10 4:00 PM, Philip Taylor (Webmaster, Ret'd) wrote: Ah : I see the article is entitled Apache Tutorial: Introduction to Server Side Includes -- is the same functionality available in all SSI processors, do you know (for example, in IIS) ? Pass. 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/
Re: [css-d] navigation link a different colour when page is active
You will need to add a class somewhere that you can anchor any unique styles to. - Tim (Please forgive any typos caused by huge fingers on a teeny phone keybard.) On Aug 2, 2010, at 8:01 AM, Shortie Designs shortiedesi...@gmail.com wrote: Sorry - my original email was unclear - Im trying to make the current page in the navigation bar appear active - so when you are on the page - the name of it will appear in different colour font in the navigation bar - this way the user knows they they are on the 'home' or 'about us' page. Cheers Sofia Woods -Original Message- From: Philip Taylor (Webmaster, Ret'd) [mailto:p.tay...@rhul.ac.uk] Sent: Monday, 2 August 2010 6:19 PM To: Chris F.A. Johnson Cc: Shortie Designs; css-d@lists.css-discuss.org Subject: Re: [css-d] navigation link a different colour when page is active Chris F.A. Johnson wrote: Why do you want a link to the current page? Remove theA tags and style it differently. Whilst I cannot answer for the original enquirer, the most common reasons for wanting to link to the current page are : For consistency (all pages have a consistent set of links) Because a Library file, SSI or similar is used to insert a fixed set of link. In neither case can your suggestion be followed as-is. Philip Taylor __ 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-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] navigation link a different colour when page is active
Shortie Designs wrote: I'm trying to keep the current page navigation link a different colour to the rest of the navigation link - this way users will know what page they are on. Sofia This is one way to do it. http://chelseacreekstudio.com/ca/cssd/8.html Best, ~d -- http://chelseacreekstudio.com/ __ 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] navigation link a different colour when page is active
On 8/2/10 1:19 AM, Philip Taylor (Webmaster, Ret'd) wrote: Chris F.A. Johnson wrote: Why do you want a link to the current page? Remove theA tags and style it differently. Whilst I cannot answer for the original enquirer, the most common reasons for wanting to link to the current page are : For consistency (all pages have a consistent set of links) Because a Library file, SSI or similar is used to insert a fixed set of link. In neither case can your suggestion be followed as-is. David Laakso has given an excellent solution. But I respectfully disagree that SSI cannot be used. Here is a demo I made for a student who wants to do that very thing. I hope it helps: http://webwiz.robinshosting.com/temp/jaime/ (Links lead to other example pages.) 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/
Re: [css-d] navigation link a different colour when page is active
Shortie Designs said: I'm trying to keep the current page navigation link a different colour to the rest of the navigation link - this way users will know what page they are on. Ie: if the user is on the 'ABOUT US' page - then the About US link in the navigation bar is a different colour. I don't want to use JavaScript. The best way if using a dynamic web page is to use an id on the current page link in the navigation. If it's a static web site you could use a combination of an id on the body tag and the links and target those with unique descendant selectors. For example these HTML snippets: body id=markets lia id=nav-markets href=markets.htmlmarkets/a/li lia id=nav-products href=products.htmlproducts/a/li could be targeted with these selectors: #markets #nav-markets, #products #nav-products I'd use id rather than class as a target inside the navigation should be unique on the page. Even if you have several pages with the same body id value, this doesn't matter as only one page is loaded at a time. This allows several pages to be current under a navigation link, like part 2 of an article and so on. I use this technique on quickly made mockups and similar. /MB __ 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] navigation link a different colour when page is active
Intrigued :-) What handles the #IF/#ELSE/#ENDIFs ? ** Phil. David Hucklesby wrote: David Laakso has given an excellent solution. But I respectfully disagree that SSI cannot be used. Here is a demo I made for a student who wants to do that very thing. I hope it helps: http://webwiz.robinshosting.com/temp/jaime/ __ 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] navigation link a different colour when page is active
On Mon, 2 Aug 2010, Philip Taylor (Webmaster, Ret'd) wrote: Chris F.A. Johnson wrote: Why do you want a link to the current page? Remove theA tags and style it differently. Whilst I cannot answer for the original enquirer, the most common reasons for wanting to link to the current page are : For consistency (all pages have a consistent set of links) I like the consistency of all links leading away from the current page. Links to the current page can be confusing. Because a Library file, SSI or similar is used to insert a fixed set of link. When I want to use the same file fro links on many pages, I use SSI to run a script that removes the link to the current page. In neither case can your suggestion be followed as-is. -- Chris F.A. Johnson, http://cfajohnson.com Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ 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] navigation link a different colour when page is active
Ah : I see the article is entitled Apache Tutorial: Introduction to Server Side Includes -- is the same functionality available in all SSI processors, do you know (for example, in IIS) ? ** Phil. David Hucklesby wrote: On 8/2/10 12:26 PM, Philip Taylor (Webmaster, Ret'd) wrote: Intrigued :-) What handles the #IF/#ELSE/#ENDIFs ? ** Phil. Hi Phil, SSI handles the logic. Check the article linked to from the home page. 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/
Re: [css-d] navigation link a different colour when page is active
missed an extra link with my earlier reply http://www.w3.org/TR/SVG/interact.html#PointerEventsProperty Duncan __ 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] navigation link a different colour when page is active
On Mon, 02 Aug 2010 19:42:34 +0100, MB digital.disc...@gmail.com wrote: Shortie Designs said: I'm trying to keep the current page navigation link a different colour to the rest of the navigation link - this way users will know what page they are on. Ie: if the user is on the 'ABOUT US' page - then the About US link in the navigation bar is a different colour. I don't want to use JavaScript. The best way if using a dynamic web page is to use an id on the current page link in the navigation. If it's a static web site you could use a combination of an id on the body tag and the links and target those with unique descendant selectors. For example these HTML snippets: body id=markets lia id=nav-markets href=markets.htmlmarkets/a/li lia id=nav-products href=products.htmlproducts/a/li could be targeted with these selectors: #markets #nav-markets, #products #nav-products to add a little to MB's method, and maybe confound the SSI doubters a little bit. The 'active' page can easily have its link disabled with no more than CSS by changing the cursor to a standard arrow so that the user does not expect any action, and the addition of the 'pointer-events' property set to none. An entire item on the menu can be just as easily hidden by using display: none; Both examples can be seen on my 'very much work in progress' at http://redlemonarts.com/_dev/textbeast/index.html the relevant css is in http://redlemonarts.com/_dev/textbeast/css/navbuttons.css (line 62) (bonus for whoever tells me why the four panels are rendered differently between surprising browsers, Firefox and IE7/8 versus all the rest! Duncan __ 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/
