Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Hugo Costa
Hugo Costa
2,334 Points

CSS Help

Hey guys,

Hope you are all doing well.

I am after some help with CSS. I am trying to integrate a template into business Catalyst (CMS)

This is the original code: edit: posted at the end as could not emebd in this location in hte post for some reason.

The CMS has a menu module and outputs some code too by the looks of it not all the css selectors are used. This the above really bloated? ie why does it need to use .lnstead of being dropmenu a, should it not be dropmenu li a? as the 'a' is only within the 'li'?

<div id="dropmenu"><script type="text/javascript" src="/CatalystScripts/Java_DynMenusSelectedCSS.js"></script><!-- Dynamic Menu Begin CSS Output -->
<div id="cat_1422035_divs">
    <ul id="nav_1422035">
    <li><a href="/index.html">Home</a></li>
    <li><a href="/company.html">Who we are</a></li>
    <li style="width:120px;height:20px;"><a href="#" onClick="return false;">Services</a></li>
    <li style="width:120px;height:20px;"><a href="#" onClick="return false;">Support</a></li>
    <li style="width:120px;height:20px;"><a href="#" onClick="return false;">Consultancy</a></li>
    <li style="width:120px;height:20px;"><a href="#" onClick="return false;">Contact</a></li>
    </ul>
</div>
<script type="text/javascript">catSetSelectedCSSItem('nav_1422035');</script><!-- Dynamic Menu End CSS Output --></div>

Any ideas guys, im starting to think this is a badly coded template?

Thanks

/* main menu - jquery dropmenu */ #dropmenu {
float: right;
height: 100px;
}
#dropmenu .active {
color: #a5c762;
text-decoration: none;
}
#dropmenu .active a, #dropmenu .active a:hover {
color: #a5c762;
text-decoration: none;
}
#dropmenu {
float: right;
text-align: right;
}
#dropmenu {
height: 100px;
margin: 0;
padding: 0;
list-style-type: none;
list-style-position: outside;
position: relative;
z-index: 300;
}
#dropmenu a {
height: 55px;
padding-top: 45px;
padding-bottom: 0px;
padding-left: 16px;
padding-right: 16px;
display: block;
color: #ffffff;
background: url(images/menu-divider.png) right no-repeat;
background-position: 0 50%;
text-decoration: none;
}
#dropmenu a:hover {
color: #a5c762;
}
#dropmenu li {
float: left;
position: relative;
text-transform: uppercase;
text-align: center;
font-size: 14px;
}
#dropmenu ul {
position: absolute;
display: none;
width: 184px;
top: 70px;
left: -1px;
background: url(images/nav-child-top.gif) no-repeat top center;
padding-top: 7px;
}
#dropmenu ul li {
font-size: 14px;
text-transform: capitalize;
text-align: left;
line-height: 18px;
white-space: nowrap;
}
#dropmenu ul a {
background: transparent url(images/nav-child-bg.png);
padding-top: 10px;
padding-bottom: 10px;
border-left: 1px solid #7ba63d;
border-right: 1px solid #7ba63d;
border-bottom: 1px solid #7ba63d;
}
#dropmenu li ul a {
width: 150px;
height: auto;
float: left;
}
#dropmenu ul ul {
top: auto;
background: transparent url(images/nav-grandchild-top.gif) repeat-x;
padding-top: 1px;
}
#dropmenu li ul ul {
top: -1px;
left: 183px;
margin: 0px 0 0 0px;
}
#dropmenu li:hover ul ul, #dropmenu li:hover ul ul ul, #dropmenu li:hover ul ul ul ul {
display: none;
}
#dropmenu li:hover ul, #dropmenu li li:hover ul, #dropmenu li li li:hover ul, #dropmenu li li li li:hover ul {
display: block;
}
#dropmenu .first a {
background: transparent;
}
#dropmenu li.active li a {
color: #ffffff !important;
}
#dropmenu li.active li a:hover {
color: #a5c762 !important;
}

2 Answers

Steve Monsen
Steve Monsen
5,207 Points
Steve Monsen
Steve Monsen
5,207 Points

"why does it need to use . lnstead of being #dropmenu a, should it not be dropmenu li a? as the 'a' is only within the 'li'?"

It can be either one... those are simply two different ways of selecting elements. For example, #dropmenu a targets any a that is nested at any depth within the #dropmenu div.

So the only reason you might want to use #dropmenu li a is if you wanted to be more specific in order to style other a elements differently at different nesting levels.

Example:

  • #dropmenu a - Selects all a elements below #dropmenu

  • #dropmenu ul a - Selects all a elements below the first nested ul within the #dropmenu div.

  • #dropmenu li a - Selects only those a elements that are within an li, which are themselves anywhere within the #dropmenu div.

  • #dropmenu li li - Selects only a elements that are nested two levels deep in a group of nested lists within the #dropmenu div.

Actually, what I would be more concerned about if I was refactoring the code are the inline css styles, onClick javascript code and multiple inline JS includes.

That looks like legacy code. It's not wrong... it works, but it doesn't maintain much separation between the logic and presentation code (i.e. HTML, CSS and Javascript).

But, naturally, the developers that wrote BusinessCatalyst have their own internal decision making process and constraints, so it's obviously up to them how these things are approached. Especially since there are plenty of potential selectors available for designers to override certain presentation elements if necessary.

Hugo Costa
Hugo Costa
2,334 Points
Hugo Costa
Hugo Costa
2,334 Points

Hi Steve,

That makes more sense, for for a great explanation, so in simple terms I should be able to clean up the code?

I forgot to add that the tempalte is jsut a standard HTML/CSS not actually provided by business catalyst, I have added templates to Business Catalyst before without this issues.