PDA

Click to See Complete Forum and Search --> : [RESOLVED] Color Bullets

CreativeMind
01-17-2009, 01:39 PM
Hi all!

Is there a way to create a list of color bullets without using a graphic image? I have attached an example to look at. Also, I am using DIV and external CSS to create this list of yellow square bullets.

Thanks!
Fang
01-17-2009, 02:18 PM
As text<ul style="list-style:none;">
<li><span style="color:#fc0;">&#9632;</span> Enjoy easy access ...</li>
<li><span style="color:#fc0;">&#9632;</span> Maintain a clear ...</li>
</ul>
CreativeMind
01-17-2009, 02:27 PM
Thank Fang!

Is there a way to center each bullet so it is center to the first letter?

I have attached an image to show you the bullets are laying on the bottom.

Thanks!
Fang
01-17-2009, 03:00 PM
<style type="text/css">
ul {list-style:none;}
li {color:#fc0;line-height:1;}
li span {color:#000; display:inline-block; vertical-align:middle;}
</style>

</head>
<body>
<ul>
<li>&#9632; <span>Enjoy easy access ...</span></li>
<li>&#9632; <span>Maintain a clear ...</span></li>
</ul>
CreativeMind
01-17-2009, 03:17 PM
Excellent Fang!

Now I just need to put your style on an external CSS. Here is what I have but it does not work on the external sheet:

#list1 {

font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
font-weight: normal;
left:186px;
top: 110px;
position:absolute;

ul {list-style:none;}
li {color:#fc0;line-height:1;}
li span {color:#000; display:inline-block; vertical-align:middle; padding-left: 4px;}


}

Something is not looking correctly on the external CSS.
Fang
01-17-2009, 03:20 PM
Does it work embedded?
CreativeMind
01-17-2009, 03:32 PM
Yes, very nicely!

I just can not get it to work on an external CSS sheet.
Fang
01-17-2009, 03:36 PM
Any other code added to the external sheet? Did you leave the style tags in?
CreativeMind
01-17-2009, 03:40 PM
Here is what I have in the HTML page:

<div id="list1">

<ul>
<li>■<span> Create the reports you need when you need them - within the system!</span></li>
<li>■<span> Enjoy easy access to data for more efficient tracking and reporting.</span></li>
<li>■<span> Maintain a clear audit trail for greater accountability.</span></li>
</ul>

</div>

Here is what I have in the external CSS:


#list1 {

font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
font-weight: normal;
left:186px;
top: 110px;
position:absolute;

ul {list-style:none;}
li {color:#fc0;line-height:1.2;}
li span {color:#000; display:inline-block; vertical-align:middle; padding-left: 4px;}

}
Fang
01-17-2009, 03:52 PM
#list1 {

font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
font-weight: normal;
left:186px;
top: 110px;
position:absolute;
}
ul {list-style:none;}
li {color:#fc0;line-height:1.2;}
li span {color:#000; display:inline-block; vertical-align:middle; padding-left: 4px;}

}
CreativeMind
01-17-2009, 03:59 PM
I took out the BLUE and the RED brackets out but still does not work. Maybe I will have to keep the style embedded within the HTML page.
Fang
01-18-2009, 04:12 AM
No, the blue one was missing and the red one is not required.