Advice on how to show what page a visitor is on?

MrAlex2You

New Member
I'm building a website, and I'm not entirely sure how to show what page the person is on, like a header.

Example: I'm on an 'About Us' page, there is large 'About Us' text above the entire page, indicating clearly that I'm on the 'About Us' page.

Pretty easy, but I'm not sure how or where to do that on my website.

Here is the website: http://72.52.142.21/~stlpcfix/

It's a website for my computer repair business. I'm still waiting for the domain to propagate, so I only have that URL. Hope it works.

Any suggestions would be greatly appreciated!
 

MrAlex2You

New Member
What he's talking about it called breadcrumbs. Here's a pretty good link

Breadcrumbs


didn't read too thoroughly so if it's not a good link I apologize :p It looked good though

That is a good link. It provides excellent examples. I was thinking of doing something like that, but I wasn't sure that's quite what I wanted to do. I've always done this, so I was looking for something a little different. But, I may just end up doing that with the link at the top, as that seems to be the convention.
 

mellowyellow

New Member
You mean like

Code:
<h1>Header</h1>

?

Haha, not sure if I totally understand the question. But in looking at the website (very nice by the way - smooth, clean look), what I would do is put a 2px solid color underline (let's say a dark red to match the theme of the page) under the appropriate list element of the navigation.

For example, the nav bar is constant on all the pages, so if the user is on about.php, then the 'About' link in the navbar will be highlighted with a border-bottom. Or however else you want to do it. The border thing would be my style, but you could do a background color or whatever.

Anyway, the best way to go about doing this is to give every page's BODY tag a unique id. That is:

Code:
<body id="about">

And id="home", "services", etc. Similarly, every link element in your navbar should have a unique class.

Code:
<li><a href="#" class="about">...</a></li>
<li><a href="#" class="services">...</a></li>

And so on.

Then for your css...

Code:
#home .home, #about.about, #services. services {
//whatever styles you want for the 'active' look
}

Hope that's what you were asking for!
 
Top