Home :: Forums :: Downloads :: Shop
  1. Home
  2. Knowledge Base
  3. CSS
  4. List Styles

Knowledge Base Navigation

  Main :: Add Article :: New :: Popular :: Top Rated
Articles: 51 Categories: 8

KB Article: List Styles

Article:List Styles     Popular
Submitted By:Taut
Date Added:04-27-2004 8:44:01
Hits:6,914


Different ways to use the listing codes

Using images for lists to replace bullets, circle, square, dots, etc

list-style-image: url(images/GRAPHIC.gif);


Apply that to either the entire list (the
    ) or the list item (
  • )


    So now you want to change the color...you do that just the same way you'd change the color of any text:

    <ul style="color: #ff00cc;">


    If you want to just change the dot you have to apply the new color to the
  • and then change the color back. Here is how I made that list item with the dot pink and the text black:

    <ul style="color: #ff00cc;"><li><span style="color: #000000;">try me</span></ul>


    What if you want to change the style of that dot? You can change it to a square, or circle

    list-style-type: SHAPE


    Replace the "SHAPE" with the one you want.
Current rating: 7.56 by 94 users
Please take one second and rate this article...

Not a Chance 12345678910 Absolutely

Please register or sign-in to post comments.


Jump to a selected article...

  
∧