How to make a selection of the necessary elements from the list <ul> on multiple traits and drawing icon sets of traits?

L

leshik2011-04-18 19:19:46

css

leshik, 2011-04-18 19:19:46

How to make a selection of the necessary elements from the list

A colleague made a rating of collaboration products . I would like to add functionality to select products according to functionality:
<ul id="ranking">
<li class="ipr d"><a href=" www.attask.com ">@task</a></li>
< li class="i d"><a href=" www.alfresco.com ">Alfresco</a></li>
<li class="ipr d"><a href=" www.assembla.com ">Assembla </a></li>
<li class="r d"><a href=" basecamphq.com ">Basecamp</a></li>
<li class="isp d"><a href="
At the same time, draw the corresponding icons in accordance with the classes i, p, r, .... Does not work. If we write the following CSS, only one icon from the set is drawn - the next background overwrites the previous one. How to do? There was an idea to put a common background with all the icons, and draw white blotches on top, but it's still not clear how. The difference from the recently popular layouts with overlaying backgrounds is that several backgrounds are combined with a comma in one background-image; no one promised that this is equivalent to overlaying multiple classes. :-(

#ranking li {
  padding: 0 0 0 144px;
  height: 24px;
  margin: 0;
  background-color: transparent;
  background-repeat: no-repeat;
}

#ranking .i {
  background-image: url(http://lh5.googleusercontent.com/_aUeHSbJneFc/TaWtMRe2sTI/AAAAAAAADN8/lUN_k4d9agU/s800/issue.png);
  background-position: 0 0;
}

&lt;/style&gt;

display: none;

Reply

Answer the question

In order to leave comments, you need to log in

3 answer(s)

V

VladislavGH, 2011-04-18
@VladislavGH

It is possible from without javascript. True, I can imagine how to do it in PHP.
PS Why didn't you like javascript?

Q

qrazydraqon, 2011-04-18
@qrazydraqon

Not the most elegant and not very convenient extensible solution: put a bunch of divs with the corresponding classes in each li, write something like this in CSS:

#ranking li div { float: left; display: none;}
#ranking li div.r {background-image: ...}

And enable them to display when li has the required class:

#ranking li.r div.r { display: block; }