Using CSS to highlight the current page

I'm working on http://www.asiabackpacker.com/ai-resource/index.html, using a
client project to help me learn, and I'm pretty happy with my progress so far
(I'm sure I'm gonna look at this on a PC, and be shattered though)....

Anyway, I'm trying to use CSS to highlight the current page in the nav through
referencing the id of the current pages nav link in the body tag-are you
familiar with this method? I'm following online tutorials, and a couple CSS
books I'm using, but I just can't seem to get this one thing to work.

All the examples seem to use a UL for the navigation.....I can't seem to get
it to work with or without, but before I go any further what I can't figure out
is, is it required that the navigation be in a UL for this technique to work?

Also, if anyone feels so inclined to give me any general feedback on the
page's css, I would be greatly appreciative. Like I said, this is my first CSS
layout. It looks fine on all my mac browsers, but haven't done too much testing
on a PC yet (ugg)

http://www.asiabackpacker.com/ai-resource/index.html (btw, this version
doesn't currently have any code for the navigation thing I'm trying to figure
out)

Thanks!

Take a look at my latest site, just finished:
http://www.musikeventkonsult.se/index.htm
I use the technique there. I have a style called "#linkdown" in the head and
then i set the id for the link I want highlighted to id=linkdown, while the
other links id is id=linkup. I also have this id as an editable attribute in
the template, so I can change it in the different pages.
Take a look at the code and you will see what I mean.

/Lars


"asiabackpacker" <webforumsuser (AT) macromedia (DOT) com> skrev i meddelandet
news:fg7pfg$daq$1 (AT) forums (DOT) macromedia.com...

I'm working on http://www.asiabackpacker.com/ai-resource/index.html, using
a
client project to help me learn, and I'm pretty happy with my progress so
far
(I'm sure I'm gonna look at this on a PC, and be shattered though)....

Anyway, I'm trying to use CSS to highlight the current page in the nav
through
referencing the id of the current pages nav link in the body tag-are you
familiar with this method? I'm following online tutorials, and a couple
CSS
books I'm using, but I just can't seem to get this one thing to work.

All the examples seem to use a UL for the navigation.....I can't seem to
get
it to work with or without, but before I go any further what I can't
figure out
is, is it required that the navigation be in a UL for this technique to
work?

Also, if anyone feels so inclined to give me any general feedback on the
page's css, I would be greatly appreciative. Like I said, this is my first
CSS
layout. It looks fine on all my mac browsers, but haven't done too much
testing
on a PC yet (ugg)

http://www.asiabackpacker.com/ai-resource/index.html (btw, this version
doesn't currently have any code for the navigation thing I'm trying to
figure
out)

Thanks!

Thanks, but there's another way of doing it, where you don't need to change
anything in the navigation area...you can use the body tag to target the class
of the current page's nav link...can't seem to get it to work though

I figured this out in case anyone is interested.

The navigation has to be in an unordered list.

View source on the pages of this site:

http://asiabackpacker.com/ai-resource/

I'm setting the active nav link using an id tag in the body tag. You can view
the CSS file to see how it all works.

Very simple code, and the navigation (I made this a SSI) can be reused on
every page without changing anything.

Have not seen the rest of this thread, but just fyi, in general it is
not necessary that highlighting the current location via css be only
with unordered lists. With our divaGPS ANY menu can be used:

http://divahtml.com/products/divaGPS/current_menu_location.php


--


E. Michael Brandt

www.divaHTML.com
divaPOP : standards-compliant popup windows
divaGPS : you-are-here menu highlighting
divaFAQ : FAQ pages with pizazz

www.valleywebdesigns.com/vwd_Vdw.asp
JustSo PictureWindow
JustSo PhotoAlbum, et alia

--

asiabackpacker - I have looked at your site and I have tried to use the way
yours works in a design i'm currently doing for a friend.

Unfortunately, I can't seem to get it to work.

Is there any chance you could take a look and see what you think the problem
is?

http://www.jgslimited.co.uk/testimonials.html - Site where code is located

http://www.jgslimited.co.uk/includes/jgs.css - CSS File.

Many thanks,

Craig

Hi Craig,

To make that work you need to give the body an ID on each page.
Example:
<body id="home">

This is because the CSS is:
#home #menu .home a
{
background-color:#ED2424;
color: #E7E63E;
}
That means color the <a> tag with the class home, inside the #menu container,
inside the #home container which is the body.
Without giving the body an ID, there is no "home" container so the CSS doesn't
apply to anything.

Another way to do this, and just as easy (also a very informatiove tutorial)
is:

http://projectseven.com/tutorials/css/uberlinks/index.htm

Take care,
Tim

Thanks again Tim.

If I want to go with the route of giving the body an id, how can I do that?

just add
id="home"
to the body tag that you already have

niceone i've done that and it appears to look fine.

one thing though, since i've done that last step you just said, in design view
in dreamweaver, all i see if the background! nothing else at all!

but if i upload, they appear fine in browser!

how can i sort this out?