SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist sitedesigner's Avatar
    Join Date
    May 2005
    Location
    On the Computer
    Posts
    436
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Site LAYOUT HELP!

    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
    █ [o] Programmer? PM me!
    █ [o] Getting back into the Business
    █ [o] Sitedesigner

  2. #2
    SitePoint Zealot c.t.c.'s Avatar
    Join Date
    Apr 2007
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Evangelist sitedesigner's Avatar
    Join Date
    May 2005
    Location
    On the Computer
    Posts
    436
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    █ [o] Programmer? PM me!
    █ [o] Getting back into the Business
    █ [o] Sitedesigner

  4. #4
    SitePoint Enthusiast ydesignsx™'s Avatar
    Join Date
    Dec 2007
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Last edited by ydesignsx™; Jun 18, 2008 at 20:05.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •