Web Design Forums

pauravi · 12-04-2005, 08:54

Hi,

My problem is that I'm working on this huge site and I need to apply a certain style to the navigation.

Will give you an example:
Say I have 4 pages to the site -

Home
About
Our Work
Contact

Now for this navigation, I have styles for active, hover, link and visited.

The problem: If I'm on the page "About", how do I highlight that particular link?

I have been doing this manually in the code by having a seperate style. I want to know how is it possible without adding anything manually to code. My site is huge and I can't possible go to each individual page to add the style.

Please advise. It's pretty urgent!!

Alex · 12-04-2005, 08:57

just use some basic php - this article explains it all very simply.

http://www.alistapart.com/articles/keepingcurrent/

I use it all the time

pauravi · 12-04-2005, 09:13

Hi there!
Thanks for your super-fast reply! But I don't know a word of PHP. I am a pure design person :-(

Take a look at this site:

http://mambo.mamboforge.net/demo/

And see its CSS here:
http://mambo.mamboforge.net/demo/tem...mplate_css.css

I can't understand how they've gone about doing it.

pgo · 12-04-2005, 09:20

If your site is static HTML pages, you'll need to do it manually.

The only way to do it dynamically/automatically would be to use a scripting language like PHP.

In other words, there's no way to do it with pure CSS, since CSS is static and what you want is for the site to "know" which page you're on without having to apply a class to the current page/link - that requires dynamic funtionality that's only provided by scripting languages like PHP.

pauravi · 12-04-2005, 09:43

Thanks for the replies.

PHP is the way to go and I call on the proggies:-)

smallbeer · 12-04-2005, 10:44

no php needed.

so you have 4 pages...

Home
About
Our Work
Contact

You want to differentiate between them in your css so first off give them each a unique id in the body tag of your (x)html.

For example, home page...

<body id="home">

about page...

<body id="about">

Right. Now you want to give each of your navigation links a unique id, so presuming you've used a list, you'd do...

<ul>
<li id="home-on"><a href="#">Home</a></li>
<li id="about-on"><a href="#">About</a></li>
<li id="work-on"><a href="#">Our Work</a></li>
<li id="contact-on"><a href="#">Contact</a></li>
</ul>

And then in your css, to give the appearance say of bold text when you are on that particular page, you'd do...

For the home page
===============
#home #home-on a {
font-weight: bold;
}

For the about page
================
#about #about-on a {
font-weight: bold;
}

Geddit?

pgo · 13-04-2005, 03:16

Yes, but I believe he said he had many pages. However, you make a good point that Home, About, Our Work, and Contact are only four pages and should only need 4 "current" states.

The way I do it is the following...

Code:

<ul id="nav">
<li><a id="current" href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Our Work</a></li>
<li><a href="#">Contact</a></li>
</ul>

The CSS...

Code:

#nav {
font-weight: normal;
}

#nav #current {
font-weight: bold;
}

Or however you need it to be. Just change the location of the 'class="current"' in the (X)HTML on each of the four pages...other pages will have no 'current' since you aren't at those pages anyway.

That's how I do it, at least for static XHTML.

weldo · 13-04-2005, 12:42

I managed to get a site accidentally doing what he wants a while ago using just CSS - remembering the last clicked link and highlighting it (at least until you click on the page again) - but even when i go back to the same CSS it never seems to work for me again ???

Annoying ??
I should say so !!

But it seems to be available here :
http://css.maxdesign.com.au/listamat...izontal10.htm#

Brown · 14-04-2005, 06:34

listen to smallbeer. id/class your body tag.

12-04-2005, 08:54	#1 (permalink)
pauravi PeaBee Join Date: Dec 2004 Location: India Posts: 63	CSS - showing link as selected on particular page Hi, My problem is that I'm working on this huge site and I need to apply a certain style to the navigation. Will give you an example: Say I have 4 pages to the site - Home About Our Work Contact Now for this navigation, I have styles for active, hover, link and visited. The problem: If I'm on the page "About", how do I highlight that particular link? I have been doing this manually in the code by having a seperate style. I want to know how is it possible without adding anything manually to code. My site is huge and I can't possible go to each individual page to add the style. Please advise. It's pretty urgent!!

12-04-2005, 08:57	#2 (permalink)
Alex div Join Date: Feb 2004 Location: Leeds Posts: 646	just use some basic php - this article explains it all very simply. http://www.alistapart.com/articles/keepingcurrent/ I use it all the time __________________ Engage Interactive - Web design Harrogate \| Kustard

12-04-2005, 09:13	#3 (permalink)
pauravi PeaBee Join Date: Dec 2004 Location: India Posts: 63	How does one do this? Hi there! Thanks for your super-fast reply! But I don't know a word of PHP. I am a pure design person :-( Take a look at this site: http://mambo.mamboforge.net/demo/ And see its CSS here: http://mambo.mamboforge.net/demo/tem...mplate_css.css I can't understand how they've gone about doing it.

12-04-2005, 09:43	#5 (permalink)
pauravi PeaBee Join Date: Dec 2004 Location: India Posts: 63	Gotcha! Thanks for the replies. PHP is the way to go and I call on the proggies:-) Last edited by pauravi : 12-04-2005 at 09:54.

13-04-2005, 03:16	#7 (permalink)
pgo Senior Member Join Date: Jan 2005 Posts: 12,340	Yes, but I believe he said he had many pages. However, you make a good point that Home, About, Our Work, and Contact are only four pages and should only need 4 "current" states. The way I do it is the following... Code: <ul id="nav"> <li><a id="current" href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Our Work</a></li> <li><a href="#">Contact</a></li> </ul> The CSS... Code: #nav { font-weight: normal; } #nav #current { font-weight: bold; } Or however you need it to be. Just change the location of the 'class="current"' in the (X)HTML on each of the four pages...other pages will have no 'current' since you aren't at those pages anyway. That's how I do it, at least for static XHTML.

12-04-2005, 09:20	#4 (permalink)
pgo Senior Member Join Date: Jan 2005 Posts: 12,340	If your site is static HTML pages, you'll need to do it manually. The only way to do it dynamically/automatically would be to use a scripting language like PHP. In other words, there's no way to do it with pure CSS, since CSS is static and what you want is for the site to "know" which page you're on without having to apply a class to the current page/link - that requires dynamic funtionality that's only provided by scripting languages like PHP.

12-04-2005, 10:44	#6 (permalink)
smallbeer I Ain't Losing Any Sleep™ Join Date: Apr 2003 Posts: 5,202	no php needed. so you have 4 pages... Home About Our Work Contact You want to differentiate between them in your css so first off give them each a unique id in the body tag of your (x)html. For example, home page... <body id="home"> about page... <body id="about"> Right. Now you want to give each of your navigation links a unique id, so presuming you've used a list, you'd do... <ul> <li id="home-on"><a href="#">Home</a></li> <li id="about-on"><a href="#">About</a></li> <li id="work-on"><a href="#">Our Work</a></li> <li id="contact-on"><a href="#">Contact</a></li> </ul> And then in your css, to give the appearance say of bold text when you are on that particular page, you'd do... For the home page =============== #home #home-on a { font-weight: bold; } For the about page ================ #about #about-on a { font-weight: bold; } Geddit?

13-04-2005, 12:42	#8 (permalink)
weldo now with added beard Join Date: Mar 2004 Location: Liverpool Posts: 5,549	I managed to get a site accidentally doing what he wants a while ago using just CSS - remembering the last clicked link and highlighting it (at least until you click on the page again) - but even when i go back to the same CSS it never seems to work for me again ??? Annoying ?? I should say so !! But it seems to be available here : http://css.maxdesign.com.au/listamat...izontal10.htm# __________________ fuck signatures

14-04-2005, 06:34	#9 (permalink)
Brown volkswagen yellow & gold Join Date: Apr 2003 Location: london, england. Posts: 6,147	listen to smallbeer. id/class your body tag.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search