css ?
- Started
- Last post
- 25 Responses
- flyingnowhere
Ok let's say I've got a list with an id.
<ul id="idname">
<li>content 1</li>
<li>content 2</li>
<li>content 3</li>
</ul>All of the <li>'s are dynamically created. So, i cannot put individual id's on them. But, I want each one to have a different color bg. Any way to do this with css?
- poolio0
hmmm.. don't think so.
- DeSiard0
inline styles?
- Stugoo0
#idname li{background-color:red; }
#idname li+li{background-color:blue; }
#idname li+li+li{background-color:green; }etc.
dont think it works on ie6 tho.- http://stugoo.co.uk/…Stugoo
- hmm, well i say screw anyone using ie6 anyhow, this may workflyingnowhere
- we have a winner - never seen it done like that before tho.. is it valid?poolio
- yes :P
http://jigsaw.w3.org…Stugoo - 1/3 of the population still use ie6,Stugoo
- moth0
dynamically created how?
Most languages (php/asp) should allow you to add in a class on every even or odd iteration....
- rafalski0
Can you add classes to the <li>'s? You could give them a name ending with an increasing number.
Other than that, adding colours with jquery would be easiest.
- bulletfactory0
might be able to wrap the li content in a span with a class name
- mistermik0
ask skt
- Stugoo0
have a look at this...
http://stugoo.co.uk/testbed/list…however you should be able to use the row number or the output id to create a class specific using the language thats being dynamically created..
- jonatne0
javascript
- D_Dot0
- thats also a good idea.Stugoo
- fixed bg -position?flyingnowhere
- heavyt0
i'd agree with the javascript route. Easiest solution available
- zenmasterfoo0
how are you dynamically generating the list items? Is this Java? If so you should be able to modify each id for whatever css values you want.
- flyingnowhere0
they are generated through ruby script, i cannot change that script because many other sites are using it
- amullins0
for css you'd need to output a className for each li on the server side
js solution:
http://76.12.164.165/temp.htm- this exmaple uses jquery. it could be easily done without a lib.amullins
- i get that, but it's not an optionflyingnowhere
- Stugoo0
and if JS is disabled? will it work?
- moth0
Using javascript/jquery for this is a preposterous idea and makes me think this amatuer week.
What's generating your code flyingnowhere?
- some ruby script, which i cannot change because it is being used in many other placesflyingnowhere
- the only thing i can change is the cssflyingnowhere
- excuse me for trying to help! he said he can't generate the code so you have to improvise.amullins
- It's always amateur week on qbn when it comes to coding questionsmhr
- flyingnowhere0
D_Dot
using a background like that, wouldn't i have to set the background-position as a different integer for each <li>?
- therefore, creating the same issue i have nowflyingnowhere
- amullins0
css3 (works for safari):
ul#idname li:nth-child(odd) { background-color: #cccccc; }
- moth0
Some day soon....
http://www.zorked.com/css/altern…
- rafalski0
Hahaha moth.. In ideal world, Stugoo's CSS would do. In order to be IE6 compliant, I'd place the styles for IE6 in jQuery. Something lin the lines of:
$(function(){
$("ul#idname>li:eq(1)").css("bac...
$("ul#idname>li:eq(2)").css("bac...
})