Previous Message
Next Message

highlighting sub nav topics

Sent by Trish Meyer on 7 October 2004 07:07

Hi all,

First off, you're lucky I didn't find this list last month or I'd 
have driven you all mad with questions...!

By way of introduction, I spent September learning CSS and building 
my first site. I'm still a newbie to CSS and HTML (though I'm more 
comfortable with CSS than tables as it's more like a page layout 
program - come to think of it, I don't think I've ever actually made 
a table...).

My background is in print graphics and film/video motion graphics; I 
only actually took an interest in learning web programs when I saw 
the CSS Zen Garden site. I bought Eric Meyer's books and am shocked 
that I can actually follow them for the most part (despite the last 
name and a family tie to Ohio, sad to say I don't think I'm a 

The first site I'm tackling is our "hobby" wildlife gardening site:

The header/banner art was created in After Effects, which is my main 
program. I sliced the "tabs" out in ImageReady and positioned them 
with CSS. Not sure if that was the best way to approach this, but it 
avoided having to learn about tables...<G>

I think I tried everyone's 3 column template... I was most influenced 
by the design in Chapter 1 of the Dreamweaver MX2004 Magic book and 
then I kept cobbling together other tricks to make it work for me. 
(The "minimum width" trick from Project 7 is added to a "wrapper" div 
around the three columns, for instance.)

I use Mac but I had a look on Windows IE6 and Mozilla and it seemed 
to work okay there too. If anyone has a chance to try it on Win IE5 I 
would really appreciate it (I assume people still use IE5 on Windows).

(I did have some odd issues with having to put the leftside nav bar 
OUTSIDE the wrapper div in order to make it stay in the right 
position in Win IE6, but it works now so I'm not going to mess with 
it...! Some day I'll figure it out...)

If anyone sees anything amiss or something I could improve or clean 
up, please let me know, as I'm a sponge.

QUESTION: My question is with how to indicate to the reader where 
they are when they move around the site.

I have a unique Template in Dreamweaver for each of the 10 main 
areas, or top navigation "tabs". This way I could make the tab stick 
on the highlight color when you go to a main page (Plants, Birds, 
etc.) Each main tab then has a sub navigation along the left side 
which is going to grow. This sub nav is made with an unordered list.

It's this submenu that I'm having trouble with.
For instance, see

This is based on the "Insects" template. Anytime I add a new sub nav 
item on the Template page, it updates all pages spawned off this 
template. That's all well and good, but...

....since each sub nav is only editable in the Dreamweaver template 
file, what's the best way to "stick" on the highlight color for the 
page you're on ("Books on Insects" in this case)?

I have the "Eric Meyer on CSS" book and on page 115 there's a sidebar 
called "Applying the Current Style" which looked promising. My 
understanding of this technique is that you edit the <head> of every 
page to give it a unique ID, then add (import?) a second style sheet 
just for that page. But when I open the Books_Insects page in 
Dreamweaver, the "head" of the page is grayed out as it's an 
uneditable region. I think making the body tag editable would take 
the whole page off the template. Am I missing something?

I think I've hit the proverbial brick wall, so I'd love some input 
from the experts.  Maybe the best solution is to add a line of 
breakcrumbs above each page title, but it seems like a lot of 
clutter? I'd much rather just highlight the menu item on the left 
side nav.

My CSS style sheet is at

Also, I noticed the thread about <ul> nested inside another <ul> 
which is what I'm doing for the Book listings under the "Bookstores" 
heading. I tried putting the nested <ul> inside the open <li> item 
for Bookstores, but it didn't work. Or maybe my CSS wasn't right? 
Does anyone have a tutorial they could point me to on nested lists 
and controlling their styling from CSS? I find nested lists confusing.

thanks for any help, this looks like a great list,



\ Trish & Chris Meyer/CyberMotion: Motion Graphics Design & Effects
  \ recent projects & clients:
   \ books, video, & articles:
    \ music (including Alias Zone):
css-discuss [EMAIL-REMOVED]]
List wiki/FAQ --
Supported by --
Previous Message
Next Message

Message thread:

Possibly related: