jdanielp Posted June 21, 2006 Share Posted June 21, 2006 Just wondering if anyone knows of a straightforward way in which to use CSS to include both an image and a number indicating the order before each element in a basic HTML list?It would seem that setting a 'list-style-image' simply over-rides any 'list-style-type' that may have been defined, but ideally I would like to display both, preferably so that each list item is preceeded by a common image followed by a number indicating its position.Thanks in advance if anyone is able to help! Link to comment Share on other sites More sharing options...
vchris Posted June 21, 2006 Share Posted June 21, 2006 Actually there is a way!Create your list normaly with numbers. With css simply add the image as a background for each <li>. Place the background image on the left. Link to comment Share on other sites More sharing options...
scott100 Posted June 21, 2006 Share Posted June 21, 2006 Actually there is a way!Create your list normaly with numbers. With css simply add the image as a background for each <li>. Place the background image on the left.<{POST_SNAPBACK}> Are you sure this works, If i add the background image to the ul then i have to add repeat-y which doesn't match up the pic and textIf i wrote it as li then the image covers the text. Link to comment Share on other sites More sharing options...
jdanielp Posted June 24, 2006 Author Share Posted June 24, 2006 I tried it for the li element and it kind of works, but puts the image between the normal list numbering and the list text, rather than before the numbering as I had been hoping for. I can't seem to fix it by means of altering the background image positioning either... Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now