Seeming simple question about HTML lists.
August 10, 2010 7:13 PM   Subscribe

I want to use a different image for each bullet in a list, but I'm stuck.

I'm slowly learning HTML in my spare time, and I'm trying to do something that seems simple in my head, but I can't figure out how to do it. I have a navigation list in a column on the left side, and for each entry I want to use a PNG as a bullet. But I don't want to use the same PNG for each bullet. I want to use a different PNG for each bullet.

So far I've tried using an image as a background piece, but I can only define one image for the background. I've defined different bullets in the css like so:

.bulletb {
list-style-image: url(images/spotb.png);}

and then called them in the list like so (i'm using brackets instead of carets so the code shows up):
[ul class="bulletb"] [li][a href="abouts.html"]about[/a][/li][/ul]

I'm sure I'm missing something obvious, but I'm very new and can't figure out where to go from here. Any help (even to good code resources, books, boards etc..) is greatly appreciated.
posted by gofargogo to Computers & Internet (10 answers total) 6 users marked this as a favorite
 
I'm not aware of a way to do this in CSS, since I believe the bullet gets defined at the UL level (i.e. can't be defined as li class="whatever"). Me, I would do it old-school,

[img src="bullet1.jpg"] about
[img src="bullet2.jpg"] archives
[img src="bullet3.jpg"] categories

But I often get cruelly mocked for this kind of thing by The Cool Kids, so maybe someone will have a spiffier solution!
posted by ErikaB at 7:24 PM on August 10, 2010


Best answer: Using images as bullets tends to be frustrating anyway, since each browser is inclined to place them just a little differently and there's no way to nudge them one way or another. What I usually wind up doing is setting the <ul> to 'list-style-type:none' and then styling <li> to display the bullet graphic as a background image, with padding to keep the content from overlapping it. So for example, if you had a series of bullet graphics that were each 20px wide, you could do something like this to have different bullet images...

Your CSS would look like:
ul.fancy {
  list-style-type:none;
}

li.bulleta {
  background-image:url(/path/to/bulleta.png);
  background-position: top left;
  background-repeat: no-repeat;
  padding-left:25px;
}

li.bulletb {
  background-image:url(/path/to/bulletb.png);
  background-position: top left;
  background-repeat: no-repeat;
  padding-left:25px;
}

li.bulletc {
  background-image:url(/path/to/bulletc.png);
  background-position: top left;
  background-repeat: no-repeat;
  padding-left:25px;
}
And your HTML would look like:
<ul class="fancy">
  <li class="bulleta">Foo</li>
  <li class="bulletb">Bar</li>
  <li class="bulletc">Bat</li>
</ul>
(Also: angle brackets, along with quotation marks, apostrophes, and ampersands, should be encoded in your document as HTML entities so that browsers don't try to process them literally, which was the problem you ran into - for example, I was able to include the 'less than' and 'greater than' symbols in the example code because I entered them in entity form:

&lt;

and

&gt;)

Good luck, and a big thumbs up for learning to do this stuff "longhand"!
posted by usonian at 7:34 PM on August 10, 2010


Best answer: what usonian said, except that i would break out the common part of each class into a different class:

.fancyBullet
{
background-position: top left;
background-repeat: no-repeat;
padding-left:25px;
}

li.bulleta {
background-image:url(/path/to/bulleta.png);
}

li.bulletb {
background-image:url(/path/to/bulleta.png);
}


<ul class="fancy">
<li class="fancyBullet bulleta">Foo</li>
<li class="fancyBullet bulletb">Bar</li>
<li class="fancyBullet bulletc">Bat</li>
</ul>

it's a little cleaner, easier to adjust
posted by pyro979 at 7:41 PM on August 10, 2010


what usonian wrote is exactly how it could be done with CSS. you can also consolidate the code a bit by combing the background properties:
li.bulleta {
  background:url('/path/to/bulleta.png') no-repeat top left;
  padding-left:25px;
}
and for all things lists, I've found the Listamatic to be a great resource.
posted by wundermint at 7:49 PM on August 10, 2010 [3 favorites]


Response by poster: Wow. This is fantastic! Thanks so much.
posted by gofargogo at 7:57 PM on August 10, 2010


Another approach:
<style type="text/css">
.li-1  { list-style-image: url(http://lab.artlung.com/form-image-background/amiga_os_small.gif); }
.li-2  { list-style-image: url(http://lab.artlung.com/form-image-background/apple_logo_small.gif); }
.li-3  { list-style-image: url(http://lab.artlung.com/form-image-background/be_os_small.gif); }
.li-4  { list-style-image: url(http://lab.artlung.com/form-image-background/dos_small.gif); }
.li-5  { list-style-image: url(http://lab.artlung.com/form-image-background/freebsd_os_small.gif); }
.li-6  { list-style-image: url(http://lab.artlung.com/form-image-background/linux_os_small.gif); }
.li-7  { list-style-image: url(http://lab.artlung.com/form-image-background/mac_os_small.gif); }
.li-8  { list-style-image: url(http://lab.artlung.com/form-image-background/next_os_small.gif); }
.li-9  { list-style-image: url(http://lab.artlung.com/form-image-background/sun_os_small.gif); }
.li-10 { list-style-image: url(http://lab.artlung.com/form-image-background/windows_os_small.gif); }
</style>
<ul>
<li class="li-1">The</a></li>
<li class="li-2">quick</a></li>
<li class="li-3">brown</a></li>
<li class="li-4">fox</a></li>
<li class="li-5">jumped</a></li>
<li class="li-6">over</a></li>
<li class="li-7">the</a></li>
<li class="li-8">lazy</a></li>
<li class="li-9">dog,</a></li>
<li class="li-10">Sir!</a></li>
<li class="li-10">hello</a></li>
</ul>

posted by artlung at 6:10 AM on August 11, 2010


The clean way to do this is with the CSS3 :nth-child pseudo-class, which means you can just write your lists as regular <li>s without having to give each one a different class. The bad news is that only relatively new browsers support CSS3 selectors.
posted by Rhomboid at 8:01 AM on August 11, 2010


*mortified*

Remove the "</a>"'s from my code. Oops!
posted by artlung at 8:47 AM on August 11, 2010


yeah, nth-child is great if it's an option for you. If not, this cleans up pyro979's CSS a bit:

ul.fancy
{
background-position: top left;
background-repeat: no-repeat;
padding-left:25px;
}

ul.fancy li.lia {
background-image:url(/path/to/lia.png);
}

ul.fancy li.lib {
background-image:url(/path/to/lib.png);
}

ul.fancy li.lic {
background-image:url(/path/to/lic.png);
}

<ul class="fancy">
<li class="lia">Foo</li>
<li class="lib">Bar</li>
<li class="lic">Bat</li>
</ul>
posted by Chris4d at 8:52 AM on August 11, 2010


Another option would be to use :nth-child with a jquery fallback implementation for browsers that don't support CSS3. Of course, the only reason to go to that level would be if you wanted to remain semantically pure and stick to a strict separation of content and layout.
posted by Rhomboid at 9:41 AM on August 11, 2010


« Older Are there any wines from 1970 worth...   |   Sorting through the junkyard of movie memories Newer »
This thread is closed to new comments.