| | |
|
|
|
secondary bullet image |
|---|
| message from abidingweb on 21 Jul 2004 |
Is there a way to add a secondary bullet image to a list? After you hit enter and then indent, I would like a different bullet. Right now it uses the same image as the first bullet.
|
| ~Flash~ replied to abidingweb on 21 Jul 2004 |
<UL STYLE="list-style-image: url(redball.gif)">
<LI>Bullet 1</LI>
<LI>Bullet 2</LI>
</UL>
This technique uses the CSS property "list-style-image," which defines the URL
where our GIF image is located.
Unfortunately, as with a lot of things under CSS, the syntax for defining the
image's location is a little different from what you're probably used to.
Instead of placing the image URL inside quote marks, you have to place the URL
inside a set of parentheses. Other than that, the rules for defining the URL
are the same as those used in the A HREF and IMG tags. For example, if you
wanted to define the location of our GIF using an absolute URL, you would write
the UL tag like this:
<UL STYLE="list-style-
images: urlhttp://www.netmechanic.com/
news/vol3/redball.gif)">
there's at least one disadvantage to using custom bullets like this: you
can't define HEIGHT and WIDTH attributes for the image. That's alright, though.
Since the bullet images are small, they shouldn't have much impact on your page
load time.
This technique works only under version 4 and 5 of Microsoft Internet
Explorer, and under version 3 of Opera. The effect degrades gracefully, so
browsers that don't understand this style sheet property just display the
standard list bullet.
Flash
|
| Kindler Chase replied to ~Flash~ on 21 Jul 2004 |
Eh? Why would not defining the w/h be a disadvantage???
And why would being able to define the w/h impact a page's total load
time???
Huh? list-style-image *only* works on IE 4 and 5 and Opera 3??? What about
IE 5.5, IE6, NN6, NN7, Moz, etc...????
|
| Joe Makowiec replied to abidingweb on 22 Jul 2004 |
Flash is about half right. What you need to do in CSS:
ul { list-style-image : url(redbullet.jpg); }
ul ul { list-style-image : url(bluebullet.jpg); }
The first style will pick up all unordered lists (<ul>), except that
the second one will style an unordered list inside an unordered list.
<html xmlns="http://www.w3.org/1999/xhtml"
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
ul { list-style-image : url(redbullet.gif); }
ul ul { list-style-image : url(bluebullet.gif); }
|
|
Archived message: secondary bullet image (Macromedia Dreamweaver)
