list bullets

[maximar]

Someone told me that you can use CSS to change the browser standard bullets for lists into your own image. Is this true? How does it work?

[maximumedge]

yes, you can indeed do that, with the help of style sheets. try this code:

<UL STYLE="list-style-image: url(http://www.yoursite.com/bullet.gif)">
<LI>Bullet 1</LI> 
<LI>Bullet 2</LI>
</UL>

hope this helps,

Jason Weinstein
webmaster@MaximumEdge.com
http://www.MaximumEdge.com/

[maximar]

Thanks! That was exactly what I was looking for...

[cokeman]

Sorry about the digression, but along the lines of bullets, lists and styles, how can I get the text of a bullet to stay left-aligned if the text wraps to the next line?

[creole]

not sure what you mean Cokeman...can you post an example?

[maximar]

I think he wants to have:

*   Bla bla bla bla
Bla bla bla

Instead of:

*   Bla bla bla bla
     Bla bla bla bla

I think he wants to get rid of the indent. I don't know how to do that. Perhaps set indent on a negative value with CSS?

[maximumedge]

this isn't really considered proper html, but if you omit the <ul> it seems to do the trick:

<li>bullet 1</li>
<li>buller 2</li>

hope this helps,

Jason Weinstein
webmaster@MaximumEdge.com
http://www.MaximumEdge.com/

[cokeman]

*sigh* These are the times I feel like an absolute moron -- The page I was given to work with didn't have the <ul></ul> tags, so I was getting what was in maximar's first example, while I wanted what was in the second example.

To try not feeling so dumb, here's a follow-up question -- When I use the <ul><li></li></ul> lists, is there a way to get the list to not have the indent on the left side (between the margin and the bullets)?

|*
^^
|bullet
margin

instead of 

|     *
^     ^
|     bullet
margin

[creole]

I don't think so...however, you can get that effect using tables. Take a look at this page.

http://www.booksamillion.com/ncom/bo...3638462&help=1

Look at the Frequently Asked Questions section.

"I purchased a Millionaire's Club card in a store. Can I use it to get my discount online?"

it wraps just like you are looking for. It's easy to do too.

[cokeman]

Sometimes things are just so obvious when you think about it Maybe I just need more coke to wake up or something!

[shane]

You can change the margin of the list with css, just be careful that you don't chop the bullets out as well by setting the margin too narrow.

<style type="text/css">
  ul {margin-left: 20px}
</style>

[lynlimz]

Shane's application is correct. Using the Margin attribute.

But warning, Netscape 4 isn't good with negative values for margins, which in this case requires just that.

The result/outcome in Netscape 4 would be the first few characters of the first word overlapping the bullet.

My suggestion would be not to use Bullets if you want that result.

I have a nifty workaround, which is to use:
'&#0183' as the bullet item.

If you view my web site, I use that everywhere.

[Pat Burroughs]

Originally posted by cokeman
To try not feeling so dumb, here's a follow-up question -- When I use the <ul><li></li></ul> lists, is there a way to get the list to not have the indent on the left side (between the margin and the bullets)?

|*
^^
|bullet
margin

instead of 

|     *
^     ^
|     bullet
margin

Instead of using the usual <ul><li></li></ul>, you can simply put

<pre>&149;</pre>

(minus the pre tags) before each piece of text you want to bullet. This will give you a bullet without it being a list per se.

[maximar]

That doesn't work on Macs. I recommend using a small gif image and setting the vspace and hspace to something like 5