menu link to not change color
in [CSS]
|
Prev: Bullet alignment problem with max-width on <li> OT: suggestion
Next: How do I make a dotted line on a restaurant menu?
From: The Bicycling Guitarist on 14 Jan 2008 00:25 Hello. I have a navigation bar at the top of all my pages with css-styled buttons that change color when hovered over. I am a little confused on how to disable that for the link that the page is on, for example, the sitemap link in the navigation bar on the sitemap page, the studies link for the navigation bar on the studies page, etc. The css is at http://www.TheBicyclingGuitarist.net/css/style.css The sitemap is at http://www.TheBicyclingGuitarist.net/sitemap.htm Any tips will be greatly appreciated. Do I need to make a new class and surround the relevant link with <span> tags, or is there a better way? Thanks. -- The Bicycling Guitarist
From: dorayme on 14 Jan 2008 01:35 In article <478af24c$0$3969$6e1ede2f(a)read.cnntp.org>, "The Bicycling Guitarist" <Chris(a)TheBicyclingGuitarist.net> wrote: > Hello. I have a navigation bar at the top of all my pages with css-styled > buttons that change color when hovered over. I am a little confused on how > to disable that for the link that the page is on, for example, the sitemap > link in the navigation bar on the sitemap page, the studies link for the > navigation bar on the studies page, etc. > > The css is at http://www.TheBicyclingGuitarist.net/css/style.css > > The sitemap is at > http://www.TheBicyclingGuitarist.net/sitemap.htm > > Any tips will be greatly appreciated. Do I need to make a new class and > surround the relevant link with <span> tags, or is there a better way? > Thanks. > On that page, you have this: <div id="menubar"> <ul> <li class="skip"> <a class="menu2" href="#skiplinks" title="skip navigation links">Skip links</a> </li> <li> <a class="menu2" href="schwinn/tbg.htm" title="tells how I became known as The Bicycling Guitarist.">About me</a> </li> <li> <a class="menu2" href="songs/warning.htm" title="leads to my original songs, with optional free audio downloads.">R Band</a> </li> <li> <a class="menu2" href="ranchero/index.htm" title="shows the history and restoration of my 1965 Ford Falcon Ranchero.">Ranchero</a> </li> etc. First, yes, you can just class the link you do not want to have hovering effects; <a class="current" href="...> is a common practice. You then style the .current how you wish in the css. Second, you can also not have the link at all so not even a cursor hand will appear, in this case you might style just the li itself to fit in with the real links in style. It is common and informational to have the text a little different, perhaps in colour or background (this is an extra way for users to know which page they are on out of the choices in the navigation strip. Third, (but I have not studied your site properly so this may not be convenient on the whole) you don't generally need to keep putting class="menu2" if you use #menubar li a to specify a style. It is briefer. There are some server side solutions so the page itself "knows" which page it is and "turns off" links to itself. In PHP. Ford Falcons eh? hmmm... Somehow I don't think mine would be welcome in the gatherings you picture <g> -- dorayme
From: The Bicycling Guitarist on 14 Jan 2008 02:51 "dorayme" <doraymeRidThis(a)optusnet.com.au> wrote in message news:doraymeRidThis-504DD5.17352614012008(a)news-vip.optusnet.com.au... > In article <478af24c$0$3969$6e1ede2f(a)read.cnntp.org>, > "The Bicycling Guitarist" <Chris(a)TheBicyclingGuitarist.net> > wrote: > >> Hello. I have a navigation bar at the top of all my pages with css-styled >> buttons that change color when hovered over. I am a little confused on >> how > First, yes, you can just class the link you do not want to have > hovering effects; <a class="current" href="...> is a common > practice. You then style the .current how you wish in the css. > Second, you can also not have the link at all so not even a > cursor hand will appear, in this case you might style just the li > itself to fit in with the real links in style. It is common and > informational to have the text a little different, perhaps in > colour or background (this is an extra way for users to know > which page they are on out of the choices in the navigation strip. > > Third, (but I have not studied your site properly so this may not > be convenient on the whole) you don't generally need to keep > putting class="menu2" if you use #menubar li a to specify a > style. It is briefer. > Thank you for your help, Dorayme. Well I followed the first suggestion so far, but I plan to implement the second suggestion (no link, just styling the li for the current page), and I want to learn how to do the third suggestion. It's a little beyond me right now. I automatically think "tic-tac-toe" when I see #.
From: The Bicycling Guitarist on 14 Jan 2008 03:05 "The Bicycling Guitarist" <Chris(a)TheBicyclingGuitarist.net> wrote in message news:478af24c$0$3969$6e1ede2f(a)read.cnntp.org... > Hello. I have a navigation bar at the top of all my pages with css-styled > buttons that change color when hovered over. I am a little confused on how > to disable that for the link that the page is on, for example, the sitemap > link in the navigation bar on the sitemap page, the studies link for the Oh heck. I just noticed that the navigation bar for the site map page is a wee bit smaller than the navigation bars on all the other pages. I think this is because I have set styles for <p> and <a> in the header of the site map page so they are only 90% regular size (because of all the links on that page). What's the best fix for this without changing the 90% for the body content? I don't want to assign a class name and put that into every single <p> and <a> on the page.
From: dorayme on 14 Jan 2008 03:16
In article <478b14a3$0$3967$6e1ede2f(a)read.cnntp.org>, "The Bicycling Guitarist" <Chris(a)TheBicyclingGuitarist.net> wrote: > "dorayme" <doraymeRidThis(a)optusnet.com.au> wrote in message > news:doraymeRidThis-504DD5.17352614012008(a)news-vip.optusnet.com.au... > > In article <478af24c$0$3969$6e1ede2f(a)read.cnntp.org>, > > "The Bicycling Guitarist" <Chris(a)TheBicyclingGuitarist.net> > > wrote: > > Third, (but I have not studied your site properly so this may not > > be convenient on the whole) you don't generally need to keep > > putting class="menu2" if you use #menubar li a to specify a > > style. It is briefer. > > > > Thank you for your help, Dorayme. > Well I followed the first suggestion so far, but I plan to implement the > second suggestion (no link, just styling the li for the current page), and I > want to learn how to do the third suggestion. It's a little beyond me right > now. I automatically think "tic-tac-toe" when I see #. OK, about the third, here is a sort of case where the savings are considerable - might get you to see how easy it is: Suppose you want to float a *lot* of divs, you want them to be a certain size as well and maybe other special things. Let us suppose they are in a wrapper div. <dv id="wrapper">...lots of divs within...</div>. It is a bore (as well as adding to bandwidth and clutter) to class every single inner div. It is easier to target them all in one go by: #wrapper div {float: left; width: ... etc ...;} This targets all the div children of the #wrapper div. Not any other divs elsewhere. You can also use classed wrappers. ID here is just an example (to emphasise that it is unique and therefore a rather nice handle to identify a whole mob of its children). From what I did see of your css, I am sure you do understand this idea to a degree (see your own css!). -- dorayme |