- This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
Viewing 6 posts - 1 through 6 (of 6 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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.
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.
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.
Thank you wolf! That is amazing.
Where’s the buy you a beer button :-)
I was thinking of images for backwards compatibility however the pen above seems to have it nailed.
Thanks for the replies guys!
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.