Re: [css-d] Dynamic navigation link aid
-Original Message- From: David Hucklesby [mailto:[EMAIL PROTECTED] For this, I make the current link a STRONG element instead of a link. This emphasizes you are here even in the absence of CSS. -- How do you use CSS to make a link another element? Or am I misinterpreting what you are doing. I always simply make a class called current, apply that class to the link, and define that class has having a different color, weight, background, etc... If you are hard coding it and removing the link that's an option but the better option would be to use PHP to dynamically add the class to the link when the page is active. Mike __ css-discuss [EMAIL PROTECTED] 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] Dynamic Navigation Link Aid
Hi all, I'm new to this forum and relatively new to CSS-based web design, so please excuse my newb-ness over the following days/weeks/etc. I'm trying to find a way to style the navigation links in a document that will highlight the page that the user is on, and do it in such a way that I don't have to hand-code every page. Thus far, I've used: ul li id=currenta href=#Link 1/a/li lia href=page2.htmlLink 2/a/li lia href=page3.htmlLink 3/a/li lia href=page4.htmlLink 4/a/li /ul and styled #current to make the link stand out. It works, but there _has_ to be a better way than doing this for every nav menu in every page in a website. Can anyone help me out? I'd appreciate it; thanks! Regards, Stephen Carrell __ css-discuss [EMAIL PROTECTED] 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] Dynamic Navigation Link Aid
--- On Tue, 8/5/08, Stephen Carrell [EMAIL PROTECTED] wrote: I'm trying to find a way to style the navigation links in a document that will highlight the page that the user is on, and do it in such a way that I don't have to hand-code every page. In short: use a unique (between pages) id on your body element A quick reference: http://css-tricks.com/id-your-body-for-greater-css-control-and-specificity/ There are great example of this in some of the standard literature out there: cederholm, budd, et al. - Bobby __ css-discuss [EMAIL PROTECTED] 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] Dynamic Navigation Link Aid
Hi Stephen.
AFAIK there's no simple way around putting a common nav bar on every page,
other than by the use of Frames, which I wouldn't recommend.
It's a PITA when a client suddenly wants an extra 'button' added to the
navigation. :-(
I have this problem with nearly all of my websites, but at least with CSS you
only need write the style for the nav, once.
Instead of the li id=currenta href=#Link 1/a/li construct, I now
prefer to specifically style the 'current' mode as fixed, with the cursor
defined as default for the state and an image that the user can recognise as
specifically 'current'.
Something along the lines of:
div id=navbar
div id=current
ul
liCostumes/li
/ul
/div
ul
lia href=scenery.htmScenery/a/li
lia href=lighting.htmLighting/a/li
lia href=sound.htmSound/a/li
lia href=magic.htmMagic amp; FX/a/li
lia href=props.htmProps/a/li
lia href=memorabilia.htmMemorabilia/a/li
lia href=misc.htmMiscellaneous/a/li
lia href=../index.htmHome/a/li
/ul
/div
#navbar li a, #navbar #current li {
background-image:url(../images/SmBlankMulti.png);
position:relative;
background-position:0 0;
background-repeat: no-repeat;
cursor:pointer;
etc
}
.navbar li a:hover {
background-position:0 -28px;
}
.navbar li a:active, #navbar #current li {
background-position:0 -56px;
color:aqua;
}
#navbar #current li {
cursor:default;
color:aqua;
}
Hope this helps.
Regards,
Alan.
www.theatreorgans.co.uk
www.virtualtheatreorgans.com
Admin: ConnArtistes, UKShopsmiths, 2nd Touch A-P groups
Shopsmith 520 + bits
Flatulus Antiquitus
- Original Message -
From: Stephen Carrell
To: css-d@lists.css-discuss.org
Sent: Tuesday, August 05, 2008 2:46 PM
Subject: [css-d] Dynamic Navigation Link Aid
Hi all,
I'm new to this forum and relatively new to CSS-based web design, so please
excuse my newb-ness over the following days/weeks/etc.
I'm trying to find a way to style the navigation links in a document that
will highlight the page that the user is on, and do it in such a way that I
don't have to hand-code every page. Thus far, I've used:
ul
li id=currenta href=#Link 1/a/li
lia href=page2.htmlLink 2/a/li
lia href=page3.htmlLink 3/a/li
lia href=page4.htmlLink 4/a/li
/ul
and styled #current to make the link stand out. It works, but there _has_ to
be a better way than doing this for every nav menu in every page in a
website.
Can anyone help me out? I'd appreciate it; thanks!
Regards,
Stephen Carrell
__
css-discuss [EMAIL PROTECTED]
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] Dynamic Navigation Link Aid
Alan wrote to Stephen...
AFAIK there's no simple way around putting a common nav bar on every page,
other than by the use of Frames, which I wouldn't recommend.
- Original Message -
From: Stephen Carrell
To: css-d@lists.css-discuss.org
Sent: Tuesday, August 05, 2008 2:46 PM
Subject: [css-d] Dynamic Navigation Link Aid
Hi all,
I'm new to this forum and relatively new to CSS-based web design, so
please
excuse my newb-ness over the following days/weeks/etc.
Can anyone help me out? I'd appreciate it; thanks!
Regards,
Stephen Carrell
08/05/2008
Stephen:
If I am understanding your question correctly, see here,
http://www.whitehouseinwestbend.com/ and
http://www.whitehouseinwestbend.com/whitehoxphp.css
The trick is to give the body tag for each page a unique id, such as body
id=indexpage, and then give each nav list element its own id as well,
such as li id=navindex, then use the CSS decendant selector to highlight
the appropriate nav element. For the example page, it's...
body#WHIWBindex li#navindex a {
text-decoration: underline;
color: white;
background-color: #244893;
}
body#WHIWBschedule li#navschedule a {
text-decoration: underline;
color: white;
background-color: #244893;
}
body#WHIWBspecialevents li#navspecialevents a {
text-decoration: underline;
color: white;
background-color: #244893;
}
body#WHIWBmap li#navmap a {
text-decoration: underline;
color: white;
background-color: #244893;
}
so on and so forth. There may be more efficient ways to do this, but it
works. Also, in this instance, I have stuck the nav block into a .php file
so if I add pages, I only have to modify that file, not each individual
page.
Hope this helps,
Best Regards,
Peter
www.fatpawdesign.com
__
css-discuss [EMAIL PROTECTED]
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] Dynamic Navigation Link Aid
- Original Message - From: Stephen Carrell [...] I'm trying to find a way to style the navigation links in a document that will highlight the page that the user is on, and do it in such a way that I don't have tour hand-code every page. Thus far, I've used: ul li id=currenta href=#Link 1/a/li lia href=page2.htmlLink 2/a/li lia href=page3.htmlLink 3/a/li lia href=page4.htmlLink 4/a/li /ul and styled #current to make the link stand out. It works, but there _has_ to be a better way than doing this for every nav menu in every page in a website. On Tue, 5 Aug 2008 18:39:23 +0100, Alan K Baker replied: Hi Stephen. AFAIK there's no simple way around putting a common nav bar on every page, other than by the use of Frames, which I wouldn't recommend. Bobby Jack gave the technique for highlighting the you are here link. Addressing a possible solution for adding a common nav bar on every page, if your host allows it, investigate server-side includes (SSI): http://httpd.apache.org/docs/2.0/howto/ssi.html Cordially, David -- __ css-discuss [EMAIL PROTECTED] 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] Dynamic Navigation Link Aid
Wow, thanks for all the responses out there! I added body id's to each page and classed each navbar link. Then I styled all those link classes to each id to highlight the appropriate page's navbar link. Uploaded all the files and tested - perfect! Thanks again, and I'm sure I'll have more questions for y'all soon (probably tomorrow, in fact - LOL!)! Stephen __ css-discuss [EMAIL PROTECTED] 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/
