Site LAYOUT HELP!

**sitedesigner** · Jun 18, 2008 15:23

Ok, so here's my navigation code.

HTML Code:

<li><a href="#" title="title goes here." class="current"><span>Company</span></a></li>
<li><a href="#" title="title goes here."><span>Services</span></a></li>
<li><a href="#" title="title goes here."><span>Resources</span></a></li>
<li><a href="#" title="title goes here."><span>Media</span></a></li>
<li><a href="#" title="title goes here."><span>Contact</span></a></li>
<li><a href="#" title="title goes here."><span>Careers</span></a></li>

My question is here... how can I include this on every page and based on the page name, have the "class = current" for the appropriate page?

Thanks!

-David

**c.t.c.** · Jun 18, 2008 16:27

You'd have to use a server side or client side script to do that. However, if you're using class=current for a presentational effect, you could use a different technique. Give each anchor its own unique class. Then give the body tag of each page the same class names as the corresponding anchors. Then use a descendant selector to target the "current" anchor in the navigation.

For example, if your first anchor is given the class "company" and a user is viewing the page with a body tag with the class "company", the style rule

Code:

.company .company { /*styles here*/ }

can be used to target just the first anchor, but not the others.

**sitedesigner** · Jun 18, 2008 16:53

I dont undrestand this part....

Then give the body tag of each page the same class names as the corresponding anchors. Then use a descendant selector to target the "current" anchor in the navigation.

Serverside is possible too. but I'd like to do CSS if possible. I have php too

**ydesignsx™** · Jun 18, 2008 18:31

This works for me.

First create unique id styles for the <body> tag and unique style classes for the a selector such as:

CSS

Code:

#company a.company, #services a.services, #resources a.resources, 
#media a.media, #contact a.contact, #careers a.careers {color: #rgb; background: url(pic.jpg) no-repeat; ...}

Then code the each page's <body> HTML tag such as:

HTML for company page

Code:

<body id="company">

HTML for services page

Code:

<body id="services">

And so on.

Use the following for your list:

HTML

Code:

<ul>
<li><a href="#" title="title goes here." class="company"><span>Company</span></a></li>
<li><a href="#" title="title goes here." class="services"><span>Services</span></a></li>
<li><a href="#" title="title goes here." class="resources"><span>Resources</span></a></li>
<li><a href="#" title="title goes here." class="media"><span>Media</span></a></li>
<li><a href="#" title="title goes here." class="contact"><span>Contact</span></a></li>
<li><a href="#" title="title goes here." class="careers"><span>Careers</span></a></li>
</ul>

This way on the company page, the company link will highlight that the company page is current, and so on. You can split the styles if needed and use PHP for includes.

User Tag List

Thread: Site LAYOUT HELP!

Thread Tools

Display

Site LAYOUT HELP!

Bookmarks

Bookmarks

Posting Permissions