Active Page when linking from Page includes (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

Avick -> Active Page when linking from Page includes (9/6/2006 11:00:41)

Just a question I have been curious about.

When designing with style sheets is it possible to show a page as active if the link is coming from a page include.

Example:
Link 1 Link2 Link3

I want to change the style on Link2 when the visitor is on that page. As the pages are coming from a page include, I have nothing on the actual page to mark with a tag such as id=active

Can this be done using just CSS or is it just out of the question!



Tailslide -> RE: Active Page when linking from Page includes (9/6/2006 11:33:36)

Easiest thing to do is to assign an id to every page within the body element e.g. 

<body id="home">


Then in your include, add an id to every nav item like this: 

<ul>
<li><a href="whatever.html" id="nav-home">Home</a></li>
<li><a href="whatever1.html" id="nav-contact">Contact</a></li>
</ul>


Then you can specify a rule within your stylesheet to apply only to the particular nav item id when you're on a page with a certain id like this: 
#home #nav-home, #contact #nav-contact {font-weight:bold;}



caz -> RE: Active Page when linking from Page includes (9/6/2006 11:59:34)

As far as I am aware tailslide's solution is the best one to use to make FP do what you want. It works for me. [;)]



Avick -> RE: Active Page when linking from Page includes (9/6/2006 15:26:27)

Thanks Tailslide,
Took me a bit to get my head around but I got there in the end.

Just to make sure I understand what I am trying to do,
Each page is looking for not one but to unique identifiers before it will apply the style???

The first (#home) sets up the boundry for when the second tag comes along (#nav-home)
Similar to the effect if I put a p inside a class like so:

.box p {}
any paragraph under the box style will get the formats set out in the specified p style.

I hope I have it right, otherwise I got a headache for nothing [:D]



Tailslide -> RE: Active Page when linking from Page includes (9/6/2006 16:16:18)

That sounds about right to me - it's all about specificity - the rules only apply when you've got both ids together on a page. That way you don't need to worry about trying to set up different classes on each active page - a single include with all your nav in it is all you need - just be sure that you give all the pages a specific id.

The only thing I ever find is a problem is remembering to write out the CSS rule properly - bearing in mind that it can get quite long - inevitably I leave off a hash somewhere down the line!



Avick -> RE: Active Page when linking from Page includes (9/7/2006 5:27:11)

I now have two different sets of styles for two different types of menus

I have been tinkering around with the layout to see if I could make it a bit easer to find what I am looking for when editing the tags. I stacked the tags on top of each other and it worked quite well and it validated. 

#home #nav-home, 
#portfolio #nav-portfolio, 
#services #nav-services, 
#standards #nav-standards, 
#sitemap #nav-sitemap
{color: #006; border-bottom: 2px solid #006;}


I find this just makes it a little easer to read!



Tailslide -> RE: Active Page when linking from Page includes (9/7/2006 6:59:45)

You're probably right. For reasons I can't quite explain I started writing all my CSS rules out on one line. I find it easier to read but everyone else in the world finds it confusing and difficult to read... so obviously I'm right and everyone else in the world is wrong! [:D]



Avick -> RE: Active Page when linking from Page includes (9/7/2006 7:04:48)

LOL [:D]




Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.0625