Re: [WSG] Active Links
On Sat, 14 Jan 2006 09:16 am, Justin Carter wrote: Hope that helps. Maybe someone else can suggest another idea... Well, i use m4 macros - each (static) page on the site is generated from an m4 source file, which (via an include) contains a macro to only generate items in the nav menu which /don't/ refer to the current page. *shrug* Works for me . . . . Alexis. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Active Links
Unless I'm missing something, I'm surprised that nobody mentioned what I
thought was the most common way to do this with static content:
assign an id or class to each navigation bar link, and also assign an id
or class to the body element. then, in your css, define rules that match
up the two.
e.g. using id, let's assume a navbar like
ul
lia href=/ id=navhomehome/a/li
lia href=/portfolio/ id=navportfolioportfolio/a/li
lia href=/contact/ id=navcontactcontact/a/li
...
/ul
you can then add an id to the body element on the different pages
body id=home
body id=portfolio
body id=contact
and so on, and have a css with all the cases
body#home a#navhome { /* styling for active page */ }
body#portfolio a#navportfolio { /* styling for active page */ }
body#contact a#navcontact { /* styling for active page */ }
etc
--
Patrick H. Lauke
__
re·dux (adj.): brought back; returned. used postpositively
[latin : re-, re- + dux, leader; see duke.]
www.splintered.co.uk | www.photographia.co.uk
http://redux.deviantart.com
__
Web Standards Project (WaSP) Accessibility Task Force
http://webstandards.org/
__
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Active Links
At 07:18 AM 1/14/2006, Patrick H. Lauke wrote:
assign an id or class to each navigation bar link, and also assign
an id or class to the body element. then, in your css, define rules
that match up the two.
...
ul
lia href=/ id=navhomehome/a/li
lia href=/portfolio/ id=navportfolioportfolio/a/li
lia href=/contact/ id=navcontactcontact/a/li
...
/ul
...
body id=home
body id=portfolio
body id=contact
...
body#home a#navhome { /* styling for active page */ }
body#portfolio a#navportfolio { /* styling for active page */ }
body#contact a#navcontact { /* styling for active page */ }
Patrick,
I've used this technique a lot over the past year or so and I love it.
One minor annoyance is that it forces us to reproduce all those named
item ids in the stylesheet for each new project, and to modify the
stylesheet every time the menu is tweaked.
I've recently started using this more generic approach:
body class=navitem01
...
ul
li id=navitem01a href=/home/a/li
li id=navitem02a href=/portfolio/portfolio/a/li
li id=navitem03a href=/contact/contact/a/li
...
/ul
...
body.navitem01 li#navitem01,
body.navitem02 li#navitem02,
body.navitem03 li#navitem03,
...
{
/* styling for active page */
}
Notes:
I use body class, not id, allowing me to use this technique for more
than one structure on a given page.
I put my ids into the parent LI, not the child A, for greater styling control.
One advantage of using numbered ids is that you can import a generic
block of selectors for a new project and merely update the styling
rules, with fewer issues mis-proofreading selectors at 2:30 am.
One disadvantage of this level of abstraction is that you have to
remember that navitem03 is the contact page, not the portfolio
page, during development.
I clean this up by using server-side scripting to generate the block
of menu styling rules (in which case it doesn't matter if they're
names or numbers) or to auto-number the menu item ids on the fly.
Regards,
Paul
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Active Links
Patrick H. Lauke wrote: Unless I'm missing something, I'm surprised that nobody mentioned what I thought was the most common way to do this with static content: I think it was mentionned by Josh already (2nd post to this thread). Thierry | www.TJKDesign.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Active Links
Thierry Koblentz wrote: I think it was mentionned by Josh already (2nd post to this thread). Doh...serves me right for only skimming over the thread rather than reading it ;) -- Patrick H. Lauke __ re·dux (adj.): brought back; returned. used postpositively [latin : re-, re- + dux, leader; see duke.] www.splintered.co.uk | www.photographia.co.uk http://redux.deviantart.com __ Web Standards Project (WaSP) Accessibility Task Force http://webstandards.org/ __ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Active Links
Thanks for the tips, unfortunately no Server Side technology can be used, just static HTML files. Thanks for the thought though. ...helmut -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Terrence Wood Sent: Thursday, January 12, 2006 3:45 PM To: wsg@webstandardsgroup.org Subject: RE: [WSG] Active Links Helmut Granda said: What I am trying to achieve is this: http://www.alistapart.com/articles/keepingcurrent/ but without using an ID or a class. What server side language do you have support for? Creating navigation like the php example and including it with your pages is the best way to achieve what you want. If you don't have PHP, then you will probably at least have SSI as part of the server. Let us know and we can proced from there. kind regards Terrence Wood. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Active Links
On 1/14/06, Helmut Granda [EMAIL PROTECTED] wrote: Thanks for the tips, unfortunately no Server Side technology can be used, just static HTML files. If the pages must be static then you only have two options that I can think of... 1) Use a current class (or id) on the navigation element that corresponds to the current page (something that you already said you dont want to do). If you're maintaining all these pages by hand then why is one extra attribute going to hurt? 2) Use JavaScript to traverse the element containing the navigation to find the achor tags href attribute which matches the page which is currently being viewed (this would be done unobtrusively of course, and will do nothing for browsers without JavaScript enabled, leaving non-JavaScript enabled browsers without a solution for the problem you're trying to solve). Hope that helps. Maybe someone else can suggest another idea... --carter ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Active Links
1) I am using DW Templates and I have locked the menu to avoid having to recreate every time there is a menu update. Also the site will be updated with Contribute so the user will be able to add/delete items from the menu and they might not know how to apply a class/id attribute to the item they are adding. 2) That sounds like a good solution, I definitely will look into that, that way I don't have to worry about the user forgetting to add the class/id attribute. Thanks! ...helmut -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Justin Carter Sent: Friday, January 13, 2006 4:17 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Active Links On 1/14/06, Helmut Granda [EMAIL PROTECTED] wrote: Thanks for the tips, unfortunately no Server Side technology can be used, just static HTML files. If the pages must be static then you only have two options that I can think of... 1) Use a current class (or id) on the navigation element that corresponds to the current page (something that you already said you dont want to do). If you're maintaining all these pages by hand then why is one extra attribute going to hurt? 2) Use JavaScript to traverse the element containing the navigation to find the achor tags href attribute which matches the page which is currently being viewed (this would be done unobtrusively of course, and will do nothing for browsers without JavaScript enabled, leaving non-JavaScript enabled browsers without a solution for the problem you're trying to solve). Hope that helps. Maybe someone else can suggest another idea... --carter ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Active Links
Helmut Granda said:
Hello,
I am trying to show on a left menu what page is currently active with CSS.
So far the only way I know how to do it is by hand-coding it
a href=link.html class=currentlinklink.html/a
What I was thinking about doing was to set up the a:Active class to like
bold or something, now the only time when the text shows bold is when I
press on it.
This is the correct behaviour. a:active is when the link is clicked.
You want to set up your style for the 'currentLink' class:
a.currentLink {
font-weight: bold;
}
kind regards
Terrence Wood.
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Active Links
The :active pseudo-class is used on the, well, current active element.
In any browser other than IE this doesn't even need to be an anchor:
you could (probably, haven't tested just now) use it on a form element
so that the background changed colour when you were entering
information into an input element (child of the form element, hence
form is still active).
So that's what :active does.
The class=currentlink solution is probably best... another way to do
it would be to apply a class to body depending on what the current
page was, and use an ID on each of your nav items with the rule
body.documentclass #individualnavitemclass {
font-weight:bold;
}
Personally, I'd prefer to just have the class in the list item itself
(the other seems like overkill, though possibly easier if you're doing
static sites with lots of page-specific styles).
There's probably a way you could parse the href values of each list
item and set the style using JavaScript accordingly, but that's beyond
me at least...
Regards,
Josh
On 1/13/06, Helmut Granda [EMAIL PROTECTED] wrote:
Hello,
I am trying to show on a left menu what page is currently active with CSS.
So far the only way I know how to do it is by hand-coding it
a href=link.html class=currentlinklink.html/a
What I was thinking about doing was to set up the a:Active class to like
bold or something, now the only time when the text shows bold is when I
press on it.
Is there a way to set up the CSS globally with a:Active or similar so I
don't have to hand-code each link in my menu?
Thanks!
-H
--
Joshua Street
http://www.joahua.com/
+61 (0) 425 808 469
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Active Links
Hello Helmut,
On 12 Jan 2006 at 14:56, Helmut Granda wrote:
So far the only way I know how to do it is by hand-coding it
a href=link.html class=currentlinklink.html/a
What I was thinking about doing was to set up the a:Active class to like
bold or something, now the only time when the text shows bold is when I
press on it.
You can use
a:link {color:#003399; text-decoration:none;}
a:visited {color:#A0; text-decoration:none}
a:hover {color:#003300; background-color:#E8E8E8;
border-bottom:solid;border-bottom-width:1px;
text-decoration:none; }
as a global definition or
..pNav a:link, .sNav a:link{color:#ff; text-decoration:none;
font-size:smaller;}
.pNav a:visited, .sNav a:visited {color:#ee; text-decoration:none;
font-size:smaller;}
.pNav a:hover, .sNav a:hover {color:#ff3300;
background-color:#003300;
border-bottom:solid;border-bottom-width:1px;
border-top-width:0px;text-decoration:none;
as definitions for pNav/sNav as classes.
Both works, I am using it on my domain.
Best Regards
Juergen Auer
Jürgen Auer, http://www.sql-und-xml.de/
Web-Datenbanken zum Mieten
Friedenstr. 37, 10 249 Berlin
Tel.: (030) 420 20 060
Fax: (030) 420 19 819
[EMAIL PROTECTED]
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
RE: [WSG] Active Links
Hello Everyone, Thanks everyone for your responses, I think I explained myself wrong: What I am trying to achieve is this: http://www.alistapart.com/articles/keepingcurrent/ but without using an ID or a class. I have been looking around and so far no luck, I believe that we have to type the ID names manually. The reason why I was trying to figure it out is because as some one commented I am creating a static site and contains hundreds of pages. So to avoid the trouble of opening each page and defining the Active ID I would like to solve the problem by just defining it in my CSS and then all the pages would inherit it. Btw, for a minute I thought some one was taking about the pseudo-class currentLink but then I figured they were making reference to my email J ...helmut From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Helmut Granda Sent: Thursday, January 12, 2006 2:57 PM To: WSG Subject: [WSG] Active Links Hello, I am trying to show on a left menu what page is currently active with CSS. So far the only way I know how to do it is by hand-coding it a href="" class=currentlinklink.html/a What I was thinking about doing was to set up the a:Active class to like bold or something, now the only time when the text shows bold is when I press on it. Is there a way to set up the CSS globally with a:Active or similar so I dont have to hand-code each link in my menu? Thanks! -H
RE: [WSG] Active Links
Helmut Granda said: What I am trying to achieve is this: http://www.alistapart.com/articles/keepingcurrent/ but without using an ID or a class. What server side language do you have support for? Creating navigation like the php example and including it with your pages is the best way to achieve what you want. If you don't have PHP, then you will probably at least have SSI as part of the server. Let us know and we can proced from there. kind regards Terrence Wood. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
