The Old Joel on Software Forum: Part 4 (of 5) - CSS problem, did I miss something?

CSS problem, did I miss something?

I can't help feeling I'm missing something about cascading style sheets. I'd like to do a an equivalent of tree list view on a website. If I define everything using <ul> and <li> then there are loads of examples on the web of how to do the actual formatting.

In an ideal world I'd like to put that list into a file then use server side includes so I don't need frames or multiple copies of my list (this would also make sitemap simple).

The only problem is I can't see how to make this happen with adding a class per <li> element with a default <li> class that then gets overridden by each page to show the user where they are in the navigation tree.

I know that I can solve this by:
a) Using server side scripting to generate the correct list with highlights in the right place.
b) Some JavaScript on the end users browser (not really I want to make this work without JS)
c) Use a content management system that glues together the CSS + XHTML so each page has it's own copy of the list

While option (a) is starting to look fairly attractive it just seems to be a bit over the top. I'm not sure if my overriding classes idea will actually work to give the look I'm after so I thought I'd post here and see if anyone else had a good answer.

Oh BTW my editing tool of choice is notepad in UTF-8 mode, this feels like this a "problem" for those not using a CMS or DreamWeaver so perhaps there is no good answer.

Peter Ibbotson
Monday, April 26, 2004

Well, you can do something like:

<body id="albatross">

&includeFileHere;

</body>

where the included file is:

<ul>
<li id="item_rail">Rail</li>
<li id="item_crake">Crake</li>
<li id="item_albatross">Albatross</li>
<li id="item_shag">Shag</li>
</ul>

and the CSS used by all pages is:

ul li { color: green; }
#albatross #item_albatross { color: red; }
#rail #item_rail { color: red; }
etc.

I think I've got the syntax right - it would be close to that, anyway.

Inigo
Monday, April 26, 2004

Have you tried combining a class on the body tag on individual pages with ids on the link elements? Take a look at the "Link Highlighting" section on this page:

http://www.complexspiral.com/events/archive/2003/seybold/cssnav.html

Ben Scofield
Monday, April 26, 2004

Inigo has got the solution I was thinking of (and probably saved me doing a pile of head scratching as I try to implement it, thanks). That solves the problem at one level, but still leaves (I think) the problem of having to keep the css in sync with the list. It's not too bad as it's only required then in two places rather than spread across a whole site.
It just plain feels "wrong" I suspect part of the problem is that most folks solve it with scripting and I suspect I'd write a little script that took the list and produced the CSS out of that to help with keeping it in sync.

Peter Ibbotson
Monday, April 26, 2004

The way I do this is to have a per-foo css included or specified after the general css. In my case foo is 'directory', so I include the directory-specific css after the general css; the general css looks like:

li.a_thing {background-color: black;}

while the per-directory css looks like:

li.a_thing {background-color: red;}

you could do the same thing on a per-file basis; in that case, you'd probably override it in the html file (no sense putting it in a separate file, is there?)

John Lenton
Monday, April 26, 2004

As long as you're making the list into it's own code-chunk for SSI you'll have the problem of keeping the two in synch because you need to put a tag that allows highlighting to occur on each of the elements and put the appropriate highlighting code in your CSS.

If you weren't removing the list from the page you'd be able to have one list-item class (.current) and use that to highlight the present page in the heirarchy.

For your purposes it looks like the first is probably the best answer. And really, keeping that structure present in two files isn't overly complicated, and you could even write a piece of code to walk the tree and generate that chuck of CSS for you if you were really concerned about the tree updating very often.

Lou
Monday, April 26, 2004