dynamic CSS selectors or declarations

[a_design_interactive]

although i'm developing my project in ColdFusion for server side scripting, even if you're unfamiliar w/ CFML, you can get the basic idea of what i'm doing if you've ever used "include()" pages in PHP, or ASP include pages-- the idea being two separate pages come together as one when page-A is "called" into another, page-B -- so that "included" bit, page-A, where the nav resides, is reused over and over.

since my navigation is an "include", going from the format of my site structure, i'm unable to mark active / current the navigation as is commonly used in CSS navigation div's (like the many nav lists shown here, for example). in other words, since that include never changes, then i can't very easily change the code of the style selectors-- to change an anchor

 from <a class="nav" href="...>
into <a id="currentnav" href="... >

know what i mean?

i got the idea that i could set a variable to hold the Style info by using ColdFusion's CGI variable function "GetCurrentTemplatePath()" to tell the nav code when page we're on.
(it doesn't have to be ColdFusion... could be any server side scripting language, i suppose-- i just happened to come up w/ it while doing some research on ColdFusion's built-in server variable functions)

i look forward to your feedback. thanks! i'm happy to explain more btw-- i realize i probably didn't do a very good job of explaining here...

thanks again!

[jscheuer1]

I would think that an include becomes a part of the page it is included in. If that page has different css for elements of the include, they would appear differently when included in that page. Much simpler than making up a script.

[mwinter]

There are two solutions, as I see it. The first is to generate content, be it the document, the include, or the style sheet. The second is to import a common style sheet into a section-specific one.

I'll be assuming a menu structure along the lines of:

<ul class="navigation-menu">
  <li><a href="/">Home</a></li>
  <li><a href="/products/">Products</a></li>
  <li><a href="/support/">Support</a></li>
  <li><a href="/about-us/">About Us</a></li>
  <li><a href="/contact-us/>Contact Us</a></li>
</ul>

for the basis of the discussion below. It will be modified at various points, though depending on the appearance you're aiming for (you haven't specified), the modifications may not be the most appropriate. Still, it will suffice as a general guide.

I'll describe the second approach (importing) first as it won't take long. However, it's probably not the choice I'd make.

The general idea is that for each section (Products, Support, etc.) there will be a single, small style sheet. All it will do is select a particular menu item, and modify it superficially. It will rely on a broader, imported style sheet to actually provide the bulk of the presentation.

The first step is to provide 'hooks' into the markup; specifically the addition of id attributes:

<ul class="navigation-menu">
  <li id="home"><a href="/">Home</a></li>
  <li id="products"><a href="/products/">Products</a></li>
  <li id="support"><a href="/support/">Support</a></li>
  <li id="about-us"><a href="/about-us/">About Us</a></li>
  <li id="contact-us"><a href="/contact-us/>Contact Us</a></li>
</ul>

Each section-specific style sheet will then follow the general form:

@import url(/common.css);

#section-id {
  /* ... */
}

All documents within a particular section would then include the relevant style sheet.

Simple enough. So, why wouldn't I do this? There are a few reasons. The first is that it's clumsy. Not only is it necessary to litter the server with several small files, but these files are almost identical in content. The second is that it adds a maintenance burden. If you choose to alter the appearance at a later date, you'd have to modify each file. Finally, from a usability perspective, documents shouldn't link to themselves. As it is, the menu itself will not change to reflect the current location within the site.


For the first approach (generating content), the only question is what to generate. The style sheet is one idea. Each link element can include the section in the query string:

<link rel="stylesheet" type="text/css" href="/css/section?products">

to produce a small style sheet similar to the one above. This takes care of the first two issues I mentioned, but it does still leave the third. A style sheet is also one of those things that should be cacheable, if for no other reason than that the server shouldn't have to waste time on something so simple. Provided that you can set HTTP headers, generated content can (and should) be made cacheable, but it is a little extra work.

A slight variation on this involves modifying the document itself. Instead of importing a common style sheet through a section-specific one, the common style sheet can be linked directly. The section-specific rules can be written directly into an embedded style sheet, instead. However, I'd say that this reintroduces a maintenance burden as style data is now being generated within the content. Also, this might be difficult to do simply if all of your documents are being generated by separate files.

The final option then, and the one I'd be most inclined to choose, is modifying the include. The style sheet can be written as one file, using a class attribute, rather than id attribute, selector:

ul.navigation-menu li.current-item {
  /* ... */
}

The matching markup would look along the lines of:

<ul class="navigation-menu">
  <li class="current-item">Home</li>
  <li><a href="/products/">Products</a></li>
  <li><a href="/support/">Support</a></li>
  <li><a href="/about-us/">About Us</a></li>
  <li><a href="/contact-us/>Contact Us</a></li>
</ul>

Notice that the source anchor has been removed for the current location.

Not having used ColdFusion, I couldn't tell you the best way to go about doing this, though. Nevertheless, I hope this helped in some way.

Mike

[a_design_interactive]

i've been using something lately which i like:

in keeping w/ my experimentation with the most simple bits of code possible (having learned my lesson, and for a much as it would go against all that she would swear upon as truth, that it's not always the size that matters but the magic within), i've been setting up my webs w/ all included components-- much like one would see in a WordPress Dashboard, perhaps.

so, i've basically got 4 pieces:

1. FILENAME (and that which holds the following three items ie. this is a file, not an element within a file)
2. HEADER (for discussion, this will be synonymous with NAVCONTAINER)
3. MAINBODY
4. FOOTER

the key to making this work is dependent upon how well developed is the HEADER element.

the HEADER must be able to give us:

• DOCTYPE
• TITLE, METADATA, STYLE, etc -- (ie. the HEAD html ele. in full)
• $BODY_ID - critcal variable, to be named after FILENAME in every circumstance - this will be used in <body id="$BODY_ID">
• NAVCONTAINER (this may be placed elsewhere once you get the concept)

now, i have in my pages, no matter if it's coldfusion, php, whatever this should work:

FILENAME "gallery.php"
**ATTN: the KEY to she magic-box**
before sending headers, we MUST set a value of $BODY_ID, so we do so here ($body_id = "gallery"), BEFORE the HEADER component is brought into the page!
HEADER (wherein the BODY_ID is named FILENAME -- so, $BODY_ID = "gallery")
MAINBODY - unique to each page - do whatever you want here each time, relevant to the FILENAME
FOOTER - same same same -- unless needed to be different, in which case it can be FOOTERv1.0, FOOTERv2.0, etc

so, now we have our gallery page. everything in that page can be styled uniquely based off of #BODY_ID in the stylesheet because every element of our entire page is (or should be usually) a descendent of that initial node.

there is no need for fiddling w/ code w/in <a href=" this or that blah blah...
because it's all going to be determined by that BODY_ID -- in this manner, the entire page can be modified by simply changing the properties of #BODY_ID in the CSS

does that work for you?
is it as good as Van Halen's first album? doubtful!!