SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2005
    Posts
    163
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    modifying one item of a list.

    Ok, I'm working on my navigation in css and I have it setup using an unordered list and have it working with a hover on each button, however I've hit a new snag. Since its a tab based system, I need to have the hover state on all the time after the user has made their selection. This means that I need to have just one item in the list with a constant hover state while the rest will act normally. This is what I have so far

    CSS for the navigation:
    Code:
    #navigation ul {
    	display: inline;
    	width: 95px;
    	height: 30px;
    }
    
    #navigation li {
    	display: inline;
    	width: 95px;
    }
    
    #navigation li a {
    	background-image: url(/images/btn_bg.jpg);
    	background-repeat: repeat-x;
    	color: #000000;
    	text-decoration: none;
    	font-size: 10px;
    	font-family: Verdana;
    	font-weight: bold;
    	padding-top: 8px;
    	padding-bottom: 8px;
    	display: block;
    	float: left;
    	text-align: center;
    	border-right-width: 1px;
    	border-right-style: solid;
    	border-right-color: #000000;
    	width: 93.8px;
    	letter-spacing: .1em;
    }
    
    #navigation li a:hover {
    	background-image: url(/images/btn_bg_black.gif);
    	background-repeat: repeat;
    	color: #FFCC00;
    	width: 93.8px;
    }
    
    .selected {
    	background-image: url(/images/btn_bg_black.gif);
    	background-repeat: repeat;
    	color: #FFCC00;
    }
    As you can see, I have a selected entry which is for the one item that needs to have a constant hover effect. Here is the html portion:

    HTML Code:
    <div id="navigation">
         <ul>
             <li><a href="/">Home</a></li>
             <li><a href="#">Products</a></li>
             <li class="selected"><a href="#">Services</a></li>
             <li><a href="#">Links</a></li>
             <li><a href="#">About</a></li>
             <li><a href="#">Contact</a></li>
         </ul>
    </div>
    The above doesnt work since the 'Services' button looks like the others when it should have the hover state constatly on. Is it even possible to apply the style to one single list item only like above? Or is there even a way to get this to work the way I want it to?

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    #navigation li a:hover, #navigation li.selected a {
     	background-image: url(/images/btn_bg_black.gif);
     	background-repeat: repeat;
     	color: #FFCC00;
     }

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2005
    Posts
    163
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that. If possible could you please explain how/why that works, instead of the way I was trying?

  4. #4
    Avid Logophile silver trophy
    ParkinT's Avatar
    Join Date
    May 2006
    Location
    Central Florida
    Posts
    2,343
    Mentioned
    192 Post(s)
    Tagged
    4 Thread(s)
    It is a matter of "specificity".
    In your solution the #navigation id is more specific and takes precedence over the .selected class properties.
    Anyone else, correct me if I am wrong.

    THOM
    Don't be yourself. Be someone a little nicer. -Mignon McLaughlin, journalist and author (1913-1983)


    Git is for EVERYONE
    Literally, the best app for readers.
    Make Your P@ssw0rd Secure
    Leveraging SubDomains

  5. #5
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I also combined the two rules because they were the same. You don't have to do it, but you've saved another four lines of code and made your CSS file a bit smaller.


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
  •