[thelist] A:Active Working Example?

rudy r937 at interlog.com
Mon Feb 24 14:39:01 CST 2003


> Basically, *how* do you set the current page's
> link to a different color.

okay, let's start over

say there are three pages -- Home, About, Contact

if you plan to use exactly the same code for the nav bar on all three pages,
then you have no choice but to slap on some monstrous DOM solution which
will change the "current" link for whatever page it's on

if you will allow the nav bar to be slightly different on each of the three
pages, then you are in business

note that one easy way to make them different is to hard-code them that
way!!

i mean, the logic of this may appear tautological, but if the nav bar is
being inserted into each of the pages using some server-side capability like
SSI, then there's no reason why you have to insert exactly the same code
into each of the three pages -- just insert something lightly different into
each page

thus, on the Home page --

      <something>Home</something>
      <a href="about.html">About</a>
      <a href="contact.html">Contact</a>

and on the About page --

      <a href="index.html">Home</a>
      <something>About</something>
      <a href="contact.html">Contact</a>

and on the Contact page --

      <a href="index.html">Home</a>
      <a href="about.html">About</a>
      <something>Contact</something>

there are ways to do this in each of SSI, ASP, ColdFusion, whatever

if you have no server-side scripting available at all, then of course you
simply hardcode the nav bar differently on each page

okay, now let's talk about what you should code for the "something"

i've seen many suggestions, ranging from classes, to inline spans, to all
sorts of stuff

none of them have the same appeal to me as the  a   selector

it is the cleanest and the simplest, and it uses the simplest css, too

so for the Contact page --

      <a href="index.html">Home</a>
      <a href="about.html">About</a>
      <a name="contact">Contact</a>

in terms of styling, what you do is style the  a   selector first

give it all the styles that are shared by both links and anchors

typically, font-family and font-size

more importantly, other styles like display:block, if for example you wanted
your nav bar links to be treated that way

notice that in the context of the nav bar, the anchors are "links" in the
general sense, even though, as anchors, they are "dead" on the page that
they sit on (if you know what i mean)


does this help?   should i go on?


rudy




More information about the thelist mailing list