Help with CSS CLASS vs ID override

Discussion in 'Website Reviews' started by lectric, Sep 24, 2008.

to remove all ads.
  1. lectric

    lectric New Member

    Messages:
    4
    Hi friends,

    Please take a look at my in-progress web re-design at http://www.jessestern.com/newsite

    Please view using Firefox, because I have not yet even begun to debug with IE.

    My question: In the nav menu, I am using PHP to set a class ="currentpage" to the current page's <li> tag. I am using id's in the <li> tags to load the background images, and i need to access the currentpage to move the background-position. Basically, a 3-way switch, but I can't get the code to listen to .currentpage.

    I probably have the wrong understanding of how classes override id's, or how the whole hierarchy thing works in css, so any pointers would be most appreciated.

    Code:
    <li id=about<?php if ($this_page=="About")
                echo " class=\"currentpage\""; ?>>
       <a href="index.html">
          <span>
             <em>About</em>
          </span>
       </a>
    </li>
    
    and
    Code:
    #menu li a { 
       display:block; 
       height:25px; width:120px; 
       background-position:center -28px; 
       cursor:pointer; 
    }
    
    /* I want the next line to override the background-position 
    of the previous line, forcing the top of the image to show 
    (instead of the image at -28px) */
    
    #menu li .currentpage a { 
       background-position:center top;
    }
    
    #menu li a:hover span { 
       display: block; 
       position: relative; 
       width:180px; 
       height:48px; 
       left:-34px; 
       top:-8px; 
       z-index: 1; 
       background-position:center bottom;
    }
    
    #menu li#about a, #menu li#about a:hover span { 
    background-image:url(about.png); 
    }
    
    And since this is a review thread, I welcome any feeback on my site's humble design....

    Oh, and if it helps, here are the source files in question:
    http://www.jessestern.com/newsite/index.html
    http://www.jessestern.com/newsite/style/style.css
    http://www.jessestern.com/newsite/style/about.png
     
    Last edited: Sep 24, 2008
  2. jnjc

    jnjc New Member

    Messages:
    493
    Try removing the space between 'li' and '.currentpage' like this:



    Code:
    #menu li.currentpage a { 
       background-position:center top;
    }
    
    HTH,
    JC
     
  3. lectric

    lectric New Member

    Messages:
    4
    Cha-ching!

    I removed the space, and it did exactly what I wanted.

    Thanks for the easy fix!

    js
     

Share This Page