li class to control images

[oldcode]

Happy late night to you all. Thanks again for doing what you do here :)

The thought behind the code I've written is to add several images into a list structure and make it easily updated. Everything works great without a li class and a single image. Is there a better way to define several different images in a list? Adding a li class (shown below) doesn't solve the problem.

.col5{
float:left;
margin-left:28px;
}
ul{
list-style-type:none;
padding:0;
margin:0;
}
li.gold{
background-image:url(images/gold.png);
background-repeat:no-repeat;
width:125px;
height:35px;
text-align:center;
padding:10px 0 0 0;
margin:0 0 15px 0;
}

li.blue{
background-image:url(images/blue.png);
background-repeat:no-repeat;
width:125px;
height:35px;
text-align:center;
padding:10px 0 0 0;
margin:0 0 15px 0;
}

<div class="col5">
<ul>
<li class="gold"><a href="something.html">Main Topic</a></li>
<li class="gold"><a href="somethingelse.html">subtopics</a></li>
<li class="blue"><a href="something2.html">Main Topic</a></li>
<li class="blue"><a href="somethingelse2.html">subtopics</a></li>
</ul>
</div>

[Paul_o_b]

Hi,

You didn't mention what the problem was as the above code should work for you.

You dont need to repeat all the same styles though for each item. Do it more succincntly like this:

.col5{
float:left;
margin-left:28px;
}
.col5 ul{
list-style-type:none;
padding:0;
margin:0;
}
.col5 li{
background:url(images/gold.png) no-repeat 0 0;
width:125px;
height:35px;
text-align:center;
padding:10px 0 0 0;
margin:0 0 15px 0;
}
li.gold{background-image:url(images/gold.png);}/* don't really need this first one as we have already applied it above*/
li.blue{background-image:url(images/blue.png);} 
li.red{background-image:url(images/red.png);} 
li.yellow{background-image:url(images/yellow.png);} 
li.green{background-image:url(images/green.png);} 

[alt131]

Hi oldcode - and a belated welcome to WebmasterWorld :)

Like paul I can't see a "problem" with the code - but this:

there a better way to define several different images in a list?

made me wonder if you were looking for a way to apply the images without using classes. If so - and depending on browsers/versions being supported, you may want to check out the css3 structural selectors [w3.org]. Either of nth-of-type (or maybe a combination of the *-child) should allow you to apply different images without needed to class each <li>

[oldcode]

Thank you both. All the images showing were gold while none of the blue images appeared. A space in li" ".blue {}; selector was the culprit. When I created the post I also eliminated that space. Now it works great!

@alt131 As you mentioned the use of css which may not be supported in all browsers, what's a good rule of thumb on using it? When is a brower version sufficiently old or browser itself too insignificant to be coded for?

[alt131]

Hi oldcode, pleased the solution was that easy :)

the use of css which may not be supported in all browsers, what's a good rule of thumb on using it? When is a brower version sufficiently old or browser itself too insignificant to be coded for?

I believe coders have to decide that question for themselves.

One way is to cease explictly thinking about any user agent that has less than a certain % of the target user market. 5% was a common number for some time - but then I believe pages should pass colour contrast tests to accommodate user vision issues, and should provide for non-visual user agents (especially assistive devices) which are both usually smaller than 5% - so when I've applied that "rule of thumb" I've immediately ignored it in relation to certain user groups. ;)

Another approach is to code from the perspective of "progressive enhancement" or "graceful degradation". That also requires a decision about which browsers to cease explicitly supporting - a search will bring up lots of discussion about the issues involved with making that decision.

For me though, the important thing is to keep checking against your target user group: Alhough we code for browsers, the sole purpose is to deliver content to users.