[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