Log in

View Full Version : Need help with css id



comaiwat
06-15-2009, 02:06 PM
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.
<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".

#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.

X96 Web Design
06-18-2009, 09:30 PM
The space separates the two classes, so you can assign moe than one class to an object. class="class1 class2"

Hope this helps,

// X96 \\

C55inator
06-23-2009, 08:00 PM
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.