ansaurus

Question

CSS to recreate LI with bullet, but without using a LI

Answer 1

A:

you could use span as alternative

<span><img src="">text</img></span>

or you could use default ul but with different images for each li

<ul>
<li><img src="image1">text1</img></li>
<li><img src="image2">text2</img></li>
</ul>

then align the margin of each image on li using css

li img{margin-left: 5px}

yeah something like that

Dels 2009-07-14 04:17:20

Answer 2

+3 A:

You can use CSS classes to do that:

<HTML>
  <HEAD>
    <STYLE>
      LI.circle { list-style: circle }
      LI.square { list-style: square }
    </STYLE>
  </HEAD>
  <BODY>
    <UL>
      <LI class="circle">Circle</LI>
      <LI class="square">Square</LI>
      <LI>Third</LI>
  </BODY>       
</HTML>

And if you need an arbitrary image, go like LI.whatever { list-style: url(myimage.png) }

GreenReign 2009-07-14 04:18:18

http://jsbin.com/exopu as an example.

Stobor 2009-07-14 04:20:24

Well I'm an idiot... but thank you :) CSS isn't my normal skill set, and I guess it shows. If you want a license to TaskPaper (a Mac app) please email me jesse at hogbaysoftware com.

Jesse Grosjean 2009-07-14 04:25:13

I believe IE has problems with the above - if this is the case use the image replace method someone posted below.

Meep3D 2009-07-14 12:20:52

Answer 3

A:

<ul>
<li style="list-style:disc;">Foo</li>
<li style="list-style:square;">Bar</li>

tsmango 2009-07-14 04:18:24

Answer 4

+1 A:

You also can use list-style-type: none; and then use background image

DroidIn.net 2009-07-14 04:31:26

ansaurus

tags:

views:

answers:

CSS to recreate LI with bullet, but without using a LI

related questions