nav: how do i show what page the viewer is on?

cat · October 3rd, 2004, 04:24 AM

i've learned a lot from this forum in the past couple of weeks, and now i have to whip up a very small site asap.

i've got the basics done, just need to put the css in that will change the colour of the nav on the page the viewer is on before i expand into the other pages.

i have several books that mention how to do it, but the suggestions are not working for me. not their fault, it's mine. i can't make the leap from where they have theirs [td] and where i need mine [navBar].

iv'e stuck it in the code like dear old eric says to do [in the page itself], and not the linked css, but it's just sitting there.

here's the url -->> http://www.fastcoconut.com/

also, if no one has the time but has a url explaining what i need, that'll work too [or not :-]

regards,

cat

joefawcett · October 3rd, 2004, 04:38 AM

Your selectors look wrong, what are trying to style using navBar#home?

--

Joe

cat · October 3rd, 2004, 04:43 AM

i'm trying to put css in each of the pages that will change the nav colour to show the visitor which page they are on.

richard.york · October 3rd, 2004, 01:49 PM

The best way that I've seen using only CSS to style a link based on where the user is, is to put the name of the page in an id on the <body> tag. With this you have a way of styling the current page's link from CSS. For instance, considering you have an 'index', 'faq' and 'contact-us' page, you add unique ids to the <body> tag of each of those pages:

<body id='index'>

<body id='faq'>

<body id='contact-us'>

Then in the style sheet, do something like this:

body#index a[href='index.htm'],
body#faq a[href='faq.html'],
body#contact-us a[href='contact.html'] {
font-weight: bold;
}

The preceding selects the anchor tag based on the value of the href attribute. Unfortunately IE does not support attribute selectors. Alternatively you could give each anchor tag a unique id as well for IE compatibility.

body#index a#nav-index,
body#faq a#nav-faq,
body#contact-us a#nav-contact-us {
font-weight: bold;
}

I appended the 'nav-' prefex on those id names because every id name must be unique.

HTH!

Regards,
Rich

--
[http://www.smilingsouls.net]
[http://pear.php.net/Mail_IMAP] A PHP/C-Client/PEAR solution for webmail

cat · October 3rd, 2004, 09:24 PM

edited, i found it at -->> http://www.hicksdesign.co.uk/journal...-page-with-css

cat · October 3rd, 2004, 10:53 PM

boy talk about taking BABY steps ... but WHHHOOOHHOOOO!

http://www.fastcoconut.com/index1.htm

[ahhh hemm ....]

thanks rich. again. :-)

Gilly Rogers · July 4th, 2005, 08:25 AM

Hi folkes,

Im very new to CSS and was wondering if this approach would work if the nav links where in a frame?

http://www.rogersdistinctivewebdesig...tentPage-4.htm

(dont worry about the package link - its off limits at the mo

The style sheets are here as follows:
http://www.rogersdistinctivewebdesig...frameStyle.css
http://www.rogersdistinctivewebdesig...frameStyle.css
http://www.rogersdistinctivewebdesig...pagestyles.css

kind regards

Gilly

richard.york · July 6th, 2005, 08:11 AM

The CSS method won't work between frames. You don't have anyway of going into the other frame to know what's loaded from CSS. The previous example here works by assigning an id to the <body> or <html> element of every page, as well as to the link for that page (which must appear on the same page), which provides a way to select the link of the current page. It's quite verbose, IMO, if you're not using a server-side language to process markup it's the best way of doing it. But even the server-side method won't work in your case because of the frames. I guess it might work doing something with server-side sessions, but I think the best way would be to not use frames at all. But since you are using frames, that leaves JavaScript. You can communicate between frames using javascript to determine what page has loaded and highlight the link for that page appropriately.

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design

Gilly Rogers · July 6th, 2005, 03:20 PM

Thanks Richard,

I thought that may be the case. I've dumped the frames now and totally re-designed - which actually looks alot better. But on the way I learnt hell of a lot with CSS with the help of your book.

Thank you again

Gilly