CSS List Help; is this even possible?

Discussion in 'Web Design and Development' started by jdl8422, Apr 23, 2008.

  1. jdl8422 macrumors 6502

    jdl8422

    Joined:
    Jul 5, 2006
    Location:
    Louisiana
    #1
    I am doing a website and I have a list that I am coding. I know how to do a list and have it highlight when I hover over it, but I want something a little different. I have a numbered list, and I want it to highlight just the number with a transparent circle. I attached a pic of it to get a better idea.
     

    Attached Files:

  2. InLikeALion macrumors 6502a

    Joined:
    Jul 18, 2007
    Location:
    Greener places than I used to live
    #2
    could you give each <li> a specific id, then under the a:hover state rule, change the list-style-image to a gif of the number with circle highlight? It doesn't need to be transparent.
     
  3. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #3
    Similar to the above post, you could have the circle image without a number in it and use it as a background image for the li tag during a hover (a:hover). This would allow the numbering of the ol to be present on top. The only trouble might be to get it to align properly, and wouldn't necessarily stay where it needs to if the user resizes the text. You at least would only have to create one graphic though.
     

Share This Page