[Solved] List Styling – each li to get a different colour

[joshlindsay]

Hi there,

I’m having to style a slightly different than I’m used to list for a project this weekend and have no idea where to start.

I have an image for each of the 26x26px colours but I need to get the text lining up as per the sample.

Here is an example of the list: http://pbs.twimg.com/media/Bn0HyZTCYAAmSSY.png

Any ideas on where I can get started?
Should it even be an unordered list?

Thanks for your time.

[Paulie_D]

Arguably yo could use a table here….but it depends on your particular requirements.

You may have to use display:table-cell on the list anyway to get the alignment you are looking for so I’d say it’s 50/50.

I’ll have a think but perhaps you could try it both ways and see which you prefer.

[ckubs]

Pardon me for being a little offtopic but why do you need those colored squares as images? For a web project they’ll look cooler made in css only.

For your problem as far as my knowledge goes( I’m no expert at all) the Paulie_D solution is the one to go with, table cells. I also found this but it’s about aligning li’s horizontally not vertically. Maybe you can make something of it too.

[joshlindsay]

Thank you wolf! That is amazing.
Where’s the buy you a beer button :-)

[joshlindsay]

I was thinking of images for backwards compatibility however the pen above seems to have it nailed.

Thanks for the replies guys!

[joshlindsay]

Just a quick update. I got the project up but the boxes weren’t working in IE8.
Here is a pen with the updated code which is working in IE8.

[Author]

Posts