Welcome to WebDesignForums.net!
You're currently viewing WDF as a guest. By registering for a free account, you'll be able to participate with other members in our friendly community. Being a member allows you to ask questions and get answers for those troublesome web development tasks!

In addition, as a member you'll be able to post your websites up for review. Using our unique website review system you can gain some amazing feedback from some of the best web developers around. This is a completely free service to all registered members.

Ready to register yet? Registration is 100% free. Click Here To Join Now!

list-style color - RESOLVED

Discussion in 'HTML and CSS Help' started by Shani, Feb 21, 2007.

  1. Offline

    Shani I Control U

    Message Count:
    1,140
    Likes Received:
    0
    Trophy Points:
    0
    Does any one know if there is a way to make the bullets of a list a different color from the text? And if yes, please give me the how-to.

    I tried putting one color on the [minicode]ul[/minicode] and a different color on the [minicode]li[/minicode]. But that does not work.


    Shani, Feb 21, 2007
    #1

  2. WDF Go Premium, Drop Ads

  3. Offline

    bfsog Coder

    Message Count:
    2,354
    Likes Received:
    0
    Trophy Points:
    0
    Location:
    UK
    Not just through the ul and li itself, I believe.

    So just wrap the text in a span class?

    HTML:
    <style type="text/css">

#navlist li { list-style-type: circle; }
.litext { color: green; }

</style>

<!-- And Then.. -->

<li><span class="litext">Item</span></li>


    bfsog, Feb 22, 2007
    #2
  4. Offline

    karinne \m/ \m/

    Message Count:
    1,607
    Likes Received:
    3
    Trophy Points:
    0
    Location:
    Aylmer QC Canada
    This works

    HTML:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
ul { color: #090; }
li span { color: #000; }
</style>
</head>

<body>
<ul>
	<li><span>list 1</span></li>
	<li><span>list 2</span></li>
</ul>

</body>
</html>
    The downside is that you have to wrap your text in a span to get it to revert to the original color (assuming here that it's black - #000)


    karinne, Feb 22, 2007
    #3
  5. Offline

    Shani I Control U

    Message Count:
    1,140
    Likes Received:
    0
    Trophy Points:
    0
    Thanks guys!


    Shani, Feb 23, 2007
    #4
(You have insufficient privileges to reply here.)

Share This Page