homepage Welcome to WebmasterWorld Guest from 54.237.184.242
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
li class to control images
oldcode




msg:4366167
 5:16 am on Sep 23, 2011 (gmt 0)

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




msg:4366207
 7:15 am on Sep 23, 2011 (gmt 0)

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




msg:4366258
 10:06 am on Sep 23, 2011 (gmt 0)

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




msg:4366400
 4:58 pm on Sep 23, 2011 (gmt 0)

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




msg:4368187
 10:53 am on Sep 28, 2011 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved