Webmaster Forum / HTML, CSS, Scripts / CSS / December 2007

The short version:  Is there a way to get embedded styles to work on
files that are displayed in a page using the shtml Include method?

My work intranet site uses Front Page dynamic templates.  Please no
flames; I'm not a FP fan either but that's the only tool I'm given, and
the templates coupled with css made it easy for me (and others) to
update the site "wrapper" and menu quickly when adding pages, as the
website is close to the bottom of my job-jar.  I know html, xhtml and
css, but do no yet know any dynamic coding such as javascript, php or
asp.  I am trying to keep the site simple because the next webmaster may
know even less.

Anyway.  The kind folks who run the web server broke templates when they
upgraded the server, and have no intention of fixing it.

The site has a pure-css navigation system I designed myself, taking
pages from various tutorials on the web.  It uses both external and
embedded styles... In short, the entire menu was/is in the template,
"collapsed" through the use of display:none in the external CSS file.
The menu is built so that each line item has a unique ID, which
identifies each section and then the page # in the section. (like, 2,
21, 22, etc)

Then, I use embedded css on each page to "open up" the section the page
belongs to (display:block).  This css also creates the "you are here"
visuals for the menu link.

For example, the default collapsed menu without the embedded CSS might
include:

About Us
   Organization
   History
   Something else
Help
   Some Help
   More Help
   Helpless
Some other Link
   Linky

But would actually display as:

About Us
Help
Some Other Link

Since we're visiting the Help page, when we get there, that menu would
expand to look like this:

About Us
Help
   Some Help
   More Help
   Helpless
Some Other Link

Then, when you go to Helpless:

About Us
Help
   Some Help
   More Help
 > Helpless
Some Other Link

Although I'm sure it's a terribly unwieldy methodology, it works for me
and I've received kudos from customers for the user-friendly, easy
navigation. It is also keyboard-friendly. It looks like I've created
menus for every page, when in reality there's only one.

Ok, so... to get off of the templates, I'm trying to use includes.  The
menu, of course, becomes one of those includes.  And therein is the rub:
 the embedded css on the page does not work on the Included navigation.

So:  Is there a way to get that to work?

If not:

I need suggestions on how I can recreate the navigation system I have
now, using pure css and x/html.

I may be able to use the whatever:hover method; I'll play with that
tomorrow.  But, how do I create the "you are here" visuals to the
current link, without using dynamic code, or the embedded CSS?

Oh, and it has to be accessible too.  Which is why I'm not using canned
Javascript menus.  And, probably why I didn't use a hover method when I
created the navigation system in the first place.

Anyway, I hope this makes some sort of sense.

jmc