SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Dec 2009
    Location
    Sperryville, Virginia (USA)
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question styling list markers (bullets) without using an image

    Trying to figure out how to change color of a bullet under <ul><li> without resorting to creating a bullet with the color I want as a jpg while leaving the color of the text in the <li> alone.

    /*stext text*/
    .stext { color : #000000; font-family: Times, serif; font-weight : normal; font-size : 14px; font-style: normal;
    letter-spacing : 0pt; text-decoration: none; line-height: 17px; margin: 0px 0px 6px 0px;}

    .stext ul li { color : #000000; font-family: Times, serif; font-weight : normal; font-size : 14px; font-style: normal;
    letter-spacing : 0pt; text-decoration: none; line-height: 17px; margin: 0px 0px 6px 0px;}


    Thanks

    sponge

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    I believe you are missing a basic concept of what an LI is. The bullet is generated 'content' ( actually is a 'marker'... but that's another issue all together) within the LI tag, so whatever you do to the LI you do to the bullet.

    So really we have two options here ( other than graphics).

    1) Wrap the content of the LI ( if not already so) and target each separately.
    Code:
    <LI> <SPAN>inline li text</span></LI>
    <LI><P> pragraph....</P><P> pragraph....</P><LI>
     li {color:red;}
    li>*{color:black;}
    OR generate the bullet yourself. This adds its own set of challenges and advantages but does give you a lot of control over the "bullet"
    Code:
    li{ list-style:none;} 
    li:before{ list-style:none; content :"*"; color:red; float: left; margin-left:-2em;}

    Hope that helps.

  3. #3
    SitePoint Member
    Join Date
    Dec 2009
    Location
    Sperryville, Virginia (USA)
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Very nice. I can make this work another time. Being that I am working in a proprietary CMS, I opted to use a Unicode for bullet and span the color selector around it. Spacing controlled, color controlled, and the text then took up the class designated for the cell I was working in.

    I like your css approach and will use it in the future.

    sponge


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •