Results 1 to 3 of 3

Thread: Need help with css id

  1. #1
    Join Date
    Mar 2006
    Location
    Kansas City
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Need help with css id

    This is a piece of code I took for the main navigation that have the reference to the second block of code below. I don't understand the css for class as show below. For example class level-1 and leve-2 is define but what relevant does a space current or link and for level-2 dropdown-item define? I can take out the dropdown-item and it still works fine. But link and current I need to define to make the main heading (home) is selected.
    Code:
    <ul id="nav-main">
    <li class="level-1 current"> <a href="../index.html" class="level-1 home">Home</a> </li>
    <li class="level-1 link"> <a href="../aboutus.html" class="level-1 aboutus">About Us</a>
    <ul class="dropdown" style="display: none;">
    <li class="level-2 dropdown-item"><a href="#"><span>&raquo;</span> Mission / Core Values</a></li>
    <li class="level-2 dropdown-item"><a href="#"><span>&raquo;</span> History</a></li>
    <li class="level-2 dropdown-item"><a href="#"><span>&raquo;</span> National Board of Trustees</a></li>
    <li class="level-2 dropdown-item"><a href="#"><span>&raquo;</span> National Staff</a></li>
    <li class="level-2 dropdown-item"><a href="#"><span>&raquo;</span> FAQ's</a></li>
    <li class="level-2 dropdown-item"><a href="#"><span>&raquo;</span> Partners</a></li>	
    <li class="level-2 dropdown-item"><a href="#"><span>&raquo;</span> Contact Us</a></li>			</ul>
    </li>
    </ul>
    Here you see that only current is define so that it can highlight or select the main item. What about link? How does css know that it's not link but a "current".
    Code:
    #nav-main li a.home {
    	width: 108px;
    }
    
    #nav-main li a.home:hover {
    	background-position: left -30px;
    }
    
    #nav-main li.section a.home,
    #nav-main li.current a.home {
    	background-position: left -60px;
    }
    
    #nav-main li a.aboutus {
    	width: 147px;
    	background-position: -108px 0px;
    }
    
    #nav-main li a.aboutus:hover {
    	background-position: -108px -30px;
    }
    
    #nav-main li.section a.aboutus,
    #nav-main li.current a.aboutus {
    	background-position: -108px -60px;
    }
    If you would like to see the work in progress check out this test site at http://www.campfireusasite.org

    Thanks.

  2. #2
    Join Date
    Feb 2009
    Posts
    303
    Thanks
    18
    Thanked 36 Times in 36 Posts

    Default

    The space separates the two classes, so you can assign moe than one class to an object. class="class1 class2"

    Hope this helps,

    // X96 \\
    Alex Blackie, X96 Design
    My Website
    I specialize in: HTML5, CSS3, PHP, Ruby on Rails, MySQL, MongoDB, Linux Server Administration

  3. #3
    Join Date
    Jun 2009
    Location
    Laputa
    Posts
    43
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    I would love to help, but I cannot understand what you're saying. Try fixing your grammar. If this is because you are a denmarkian using an online translator, I can't help you.

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
  •