2 Replies Latest reply on Feb 25, 2010 2:37 PM by Nancy OShea

    Templates and CSS classes

    mhollis55 Level 4

      I am trying to create a template from an existing site so that I can easily edit navigation (once and have it update). Part of the design of the page is to create the look of tabs across the top of the content that shows where you are. If you are on the "home" page, the tab looks like it's "in front" If you are on the "Services" page, it looks like that's in front and so on.


      Best example of this page (without a template) is my Crittersitters client.


      The code in question is:


      <div id="navigation">

        <ul>

              <li><a href="index.html">Home</a></li>

            <li><a href="services.html">Services</a></li>

           <li><a href="about.html">About</a></li>

            <li><a href="contact.php">Contact</a></li>

              <li><a href="testimony.html">Testimonials</a></li>

              <li><a href="links.html">Links</a></li>

          </ul>

        </div>


      For each page that is the current page, I do this:

      <div id="navigation">
        <ul>
              <li class="currentTab"><a href="index.html">Home</a></li>
            <li><a href="services.html">Services</a></li>
           <li><a href="about.html">About</a></li>
            <li><a href="contact.php">Contact</a></li>
              <li><a href="testimony.html">Testimonials</a></li>
              <li><a href="links.html">Links</a></li>
          </ul>
        </div>

      I define the class in CSS:

      .oneColFixCtrHdr #navigation {
      padding: 5px;
      border-bottom: 1px solid #000; /*create a solid line across the bottom of the navigation container spanning the entire column*/
      margin-bottom: 25px;
      }

      .oneColFixCtrHdr #navigation ul {
      margin-left: 0;
      padding-left: 0;
      display: inline; /* removes the vertical space normally accompanying a list and places it into the flow of the rest of the document */
      }

      .oneColFixCtrHdr #navigation ul li {
      margin-left: 0;
      margin-bottom: 0;
      padding: 2px 15px 5px;
      border: 1px solid #000; /*create a solid line around each individual list item*/
      list-style: none; /*eliminate the bullet, box, circle, etc. that normally preceeds a list item */
      display: inline; /* turn the normal vertically positioned list items into horizontal items in line with the rest of the document text */
      background-color: #3399FF;
      }

      .oneColFixCtrHdr #container #navigation li.currentTab {
      background-color: #66ccFF;
      border-bottom-width: 1px;
      border-bottom-style: solid;
      border-bottom-color: #FFFFFF;
      }

      Is there a way to template the "currentTab" class so that I get what I want though the template? Would I have to resort to some kind of JavaScript Rollover or Active property?

      Thanks!