Re: [css-d] Hide current page link
On 2010-08-16 Sandy wrote:
Is there a CSS method to hide the current page link in a navigation
list? ie: if you're on the widgets page, you don't get the See our
crazy widgets! link in the menu.
I'm responsible for looking after a static HTML site that has had
more and more pages added to it over the years, and changing the
navigation on each page is becoming a chore.
I know how to do includes, I'd just like to hide the current page link..
hi Val,
Try this bit of style, which I cribbed off
http://www.askthecssguy.com/2006/12/showing_hyperlink_cues_with_cs_1.html
it needs to go in the head of the page you are on, and use that
page name for yourcurrentpage.html
style type=text/css
!--
#links a[href~=yourcurrentpage.html] {
Not sure if it's a factor for your users, but be aware that
selector will not be recognized by ie6.
HTH,
-Steve
--
Steve Axthelm
stev...@pobox.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/
[css-d] Hide current page link
Is there a CSS method to hide the current page link in a navigation list? ie: if you're on the widgets page, you don't get the See our crazy widgets! link in the menu. I'm responsible for looking after a static HTML site that has had more and more pages added to it over the years, and changing the navigation on each page is becoming a chore. I know how to do includes, I'd just like to hide the current page link.. Val -- --- Somewhere, something incredible is waiting to be known - Carl Sagan www.oakleafdesignprint.co.uk www.oakleafcircle.org.uk www.valdobson.co.uk www.astrodiary.co.uk __ 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] Hide current page link
Val Dobson wrote: Is there a CSS method to hide the current page link in a navigation list? ie: if you're on the widgets page, you don't get the See our crazy widgets! link in the menu. You can do this only if you have some way of distinguishing the current page link from other elements in terms of CSS. This normally means it needs to have a suitable class (or id) attribute. CSS does not know anything about a link pointing to the page itself. In theory you could use attribute selectors that select elements e.g. on the basis of the href attribute value. But there's no way in CSS to couple this with the idea of the URL of the page itself. I'm responsible for looking after a static HTML site that has had more and more pages added to it over the years, and changing the navigation on each page is becoming a chore. I know how to do includes, I'd just like to hide the current page link.. Simple server-side includes won't help. You would need to generate the navigational elements in a manner that uses some distinguishing markup for the current page link. You might ask why not then remove that link instead of hiding it from the visual appearance, and that's a good question. If you cannot use any more advanced server-side techniques, then probably the best shot is to add a piece of JavaScript that traverses the links on the page and hides any link pointing to the page itself. Here, too, one might ask why not remove the link from the document tree instead of just hiding it via CSS. -- Yucca, http://www.cs.tut.fi/~jkorpela/ __ 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] Hide current page link
Hi, CSS does not know anything about a link pointing to the page itself. What about a:active and/or a:current? I'm uncertain but a:hover works in style sheets without having to add an ID or class of 'hover' to the links so maybe it's the same with the former two. Then perhaps} display: none; Sorry if it's a bad guess. br, cb On 17/08/2010, at 3:01 AM, Jukka K. Korpela wrote: Val Dobson wrote: Is there a CSS method to hide the current page link in a navigation list? ie: if you're on the widgets page, you don't get the See our crazy widgets! link in the menu. You can do this only if you have some way of distinguishing the current page link from other elements in terms of CSS. This normally means it needs to have a suitable class (or id) attribute. CSS does not know anything about a link pointing to the page itself. In theory you could use attribute selectors that select elements e.g. on the basis of the href attribute value. But there's no way in CSS to couple this with the idea of the URL of the page itself. I'm responsible for looking after a static HTML site that has had more and more pages added to it over the years, and changing the navigation on each page is becoming a chore. I know how to do includes, I'd just like to hide the current page link.. Simple server-side includes won't help. You would need to generate the navigational elements in a manner that uses some distinguishing markup for the current page link. You might ask why not then remove that link instead of hiding it from the visual appearance, and that's a good question. If you cannot use any more advanced server-side techniques, then probably the best shot is to add a piece of JavaScript that traverses the links on the page and hides any link pointing to the page itself. Here, too, one might ask why not remove the link from the document tree instead of just hiding it via CSS. -- Yucca, http://www.cs.tut.fi/~jkorpela/ __ 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] Hide current page link
On 16 August 2010 20:01, Jukka K. Korpela jkorp...@cs.tut.fi wrote: If you cannot use any more advanced server-side techniques, then probably the best shot is to add a piece of JavaScript that traverses the links on the page and hides any link pointing to the page itself. Here, too, one might ask why not remove the link from the document tree instead of just hiding it via CSS. + Thanks for that. I suspected I'd have to use something like Javascript, but had hoped there might be an elegant CSS solution. Yes, I could include the navigation on every page and remove the current document link from every page manually - I already do that, and it's becoming a pain. Val --- Somewhere, something incredible is waiting to be known - Carl Sagan www.oakleafdesignprint.co.uk www.oakleafcircle.org.uk www.valdobson.co.uk www.astrodiary.co.uk __ 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] Hide current page link
Is there a CSS method to hide the current page link in a navigation
list? ie: if you're on the widgets page, you don't get the See our
crazy widgets! link in the menu.
I'm responsible for looking after a static HTML site that has had
more and more pages added to it over the years, and changing the
navigation on each page is becoming a chore.
I know how to do includes, I'd just like to hide the current page link..
hi Val,
Try this bit of style, which I cribbed off
http://www.askthecssguy.com/2006/12/showing_hyperlink_cues_with_cs_1.html
it needs to go in the head of the page you are on, and use that page
name for yourcurrentpage.html
style type=text/css
!--
#links a[href~=yourcurrentpage.html] {
position : absolute;
top : -1000px;
width:1px;
height:1px;
overflow:hidden;
}
--
/style
good luck!
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] Hide current page link
Sandy wrote:
#links a[href~=yourcurrentpage.html] {
This means that you would need a different style sheet, with a different URL
there, for each and every page. I don't see how this could be any easier or
otherwise better than simply having, say,
a href=... class=current.../a
for each current-page link or, better still (for current-page links in
navigation)
a class=current.../a
so that the current-page link ain't no link but can be styled along with
other a elements but so that it does not look like a link but like a here
you are now designator.
--
Yucca, http://www.cs.tut.fi/~jkorpela/
__
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] Hide current page link
Chris Blake wrote: What about a:active and/or a:current? The latter is a mere proposal, though an interesting one. You might find experimental implementations, but hardly anything useful in practice now or in the near future. The :active pseudo-class is an old invention (in the www timescale) but with vague definition in CSS recommendations and drafts and inconsistent interpretation in browsers. Most importantly, it relates to the _state_ of the link, as active in some dynamic sense (e.g., the user just clicked on it), not to its role on the page or its URL. I'm uncertain but a:hover works in style sheets without having to add an ID or class of 'hover' to the links so maybe it's the same with the former two. The :hover pseudo-class is a different beast, and it is indeed fairly well supported, especially for links. Its meaning is different, and it would actually be impossible to replace the use of :hover with a class, since it is a dynamic pseudo-class, related to the state of an element (of being hovered) - something you cannot do with classes, since if an element has a class (as opposite to a pseudo-class), it has the class in all states of the element. -- Yucca, http://www.cs.tut.fi/~jkorpela/ __ 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] Hide current page link
Sandy wrote:
#links a[href~=yourcurrentpage.html] {
This means that you would need a different style sheet, with a different URL
there, for each and every page. I don't see how this could be any easier or
otherwise better than simply having, say,
a href=... class=current.../a
for each current-page link or, better still (for current-page links in
navigation)
a class=current.../a
so that the current-page link ain't no link but can be styled along with
other a elements but so that it does not look like a link but like a here
you are now designator.
Not a whole different style sheet, just that little bit in the head of
each page. I think it's actually about the same amount of work as adding
class=current to the current page on an html page.
The advantage of this approach is if you are using includes - the menu
can be included and the current page addressed on that page.
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] Hide current page link
On 16 August 2010 21:00, Sandy sfeld...@sympatico.ca wrote: Not a whole different style sheet, just that little bit in the head of each page. I think it's actually about the same amount of work as adding class=current to the current page on an html page. The advantage of this approach is if you are using includes - the menu can be included and the current page addressed on that page. Sandy That sounds like the best idea so far. Thank you. Val --- Somewhere, something incredible is waiting to be known - Carl Sagan www.oakleafdesignprint.co.uk www.oakleafcircle.org.uk www.valdobson.co.uk www.astrodiary.co.uk __ 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] Hide current page link
Not a whole different style sheet, just that little bit in the head of each page. I think it's actually about the same amount of work as adding class=current to the current page on an html page. The advantage of this approach is if you are using includes - the menu can be included and the current page addressed on that page. Sandy That sounds like the best idea so far. Thank you. you are very welcome Val. __ 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] Hide current page link
On 8/16/10 11:44 AM, Val Dobson wrote: Is there a CSS method to hide the current page link in a navigation list? ie: if you're on the widgets page, you don't get the See our crazy widgets! link in the menu. I'm responsible for looking after a static HTML site that has had more and more pages added to it over the years, and changing the navigation on each page is becoming a chore. I know how to do includes, I'd just like to hide the current page link.. Without adding a class to each BODY or HTML element to identify the page, I don't know of any CSS solution. But you mention includes (I assume SSI) so you may be interested in a demo I made for a student that highlights current page links-- I'm sure you can adapt it. For more about SSI includes, visit the link that's in the index page write-up: http://webwiz.robinshosting.com/temp/jaime/ Hope it helps. 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] Hide current page link
David Hucklesby wrote: Without adding a class to each BODY or HTML element to identify the page, I don't know of any CSS solution. How would such class attributes help the least (in this issue)? They cannot be used to distinguish between different links on the page. But you mention includes (I assume SSI) so you may be interested in a demo I made for a student that highlights current page links Actually, it does not highlight them - apparently your SSI code, which is not directly visible to us, _prevents_ current-page links in menus, which is actually a better idea than hiding them. But this question was apparently about other than normal navigation, namely about a repeated list of links, where one would like to hide the current-page link. As previously mentioned, it is better to remove such links than to hide them, but the techniques used for that are not a CSS ssue- -- Yucca, http://www.cs.tut.fi/~jkorpela/ __ 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] Hide current page link
On Mon, 16 Aug 2010 19:44:51 +0100, Val Dobson valdob...@gmail.com wrote: Is there a CSS method to hide the current page link in a navigation list? ie: if you're on the widgets page, you don't get the See our crazy widgets! link in the menu. I'm responsible for looking after a static HTML site that has had more and more pages added to it over the years, and changing the navigation on each page is becoming a chore. I know how to do includes, I'd just like to hide the current page link.. Val A very similar topic was discussed earlier this month, if you check the archives for the thread referring to navigation link a different colour when page is active, you might find something to help you. My own example on that thread is still visible and it works using includes. http://redlemonarts.com/_dev/textbeast/index.html 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/
