On Mon, Aug 2, 2010 at 7:28 AM, Beth Lee <[email protected]> wrote:
> On Mon, Aug 2, 2010 at 6:01 AM, Shortie Designs > <[email protected]> wrote: > > Sorry - my original email was unclear - I"m 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. > > Add to the css: > .current {rules differentiating the current-page link} > > On each page, add class="current" to the navigation link for that page. > > Regards, > > Beth Lee > www.bethleedesign.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/ > Here's a few examples of what Beth is talking about. We used just this approach in our City website: http://www.springfieldmo.gov/brownfields/index.html http://www.springfieldmo.gov/planning/minority.html http://www.springfieldmo.gov/planning/homeama.html If you study the markup of the left navigation list (and the CSS), you'll discover the use of classes such as ".currentPage", ".afterCurrent", etc. that add indicators to the list of what page you're on. Multiple classes are used on some items to style various elements of the background image, text, etc. Hope this helps. Looking "under the hood" of other sites is one of the best ways to learn various techniques, I think. Chris Akins Web Coordinator City of Springfield, MO ______________________________________________________________________ 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/
