Sent by Trish Meyer on 7 October 2004 07:07
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
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 http://www.wildscaping.com/resources/books_insects.htm
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
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: http://www.cybmotion.com/projects
\ books, video, & articles: http://www.cybmotion.com/sharing
\ music (including Alias Zone): http://www.cybmotion.com/music
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/