http://www.simplebits.com/notebook/2004/07/18/clickable.html
But stealing from that page:
How to Get There
The first step is build the unordered list, adding a unique id to each
list item. We'll use that id to assign each corresponding icon later
on.
<ul>
<li id="email"><a href="" an Email</a></li>
<li id="donate"><a href="" Money</a></li>
<li id="active"><a href="" Active</a></li>
<li id="tell"><a href="" a Friend</a></li>
<li id="vote"><a href="" to Vote</a></li>
</ul>
Next we'll add the CSS, which is rather straighforward. Disabling
default bullet styling, zero-ing out margins and padding, then
assigning a background-image to each <li> element.
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul li {
margin: 2px 0 6px 0;
padding: 0;
font-weight: bold;
line-height: 24px; /* height of icon */
background-repeat: no-repeat;
background-position: 0 50%;
}
ul li a {
padding-left: 30px; /* width of icon + whitespace */
}
#email { background-image: url(email.gif); }
#donate { background-image: url(donate.gif); }
#tell { background-image: url(tell.gif); }
#active { background-image: url(active.gif); }
#vote { background-image: url(vote.gif); }
So what we've done above is given each list item's link a padding-left
that's at least equal to the width of each icon. This will make the
clickable area "stretch" over the icon � which is actually assigned as
a background to each individual <li> element.
Also notice the line-height rule. I've found this to work out fairly
well, matching that value to the height of the icon, so as to show the
entire image, and nothing more. This doesn't seem to negatively affect
text resizing issues.
--
hth,
larry
On Tue, 28 Sep 2004 15:16:50 -0400, Duane Boudreau <[EMAIL PROTECTED]> wrote:
> Is it possible to replace the list item html element with an image? I would
> prefer to do this with a stylesheet.
>
> I've tried everything I can think of:
>
> <style ...>
> .mainContent { ..... ; list-style-image: url(/bullet.gif);}
> </style>
>
> I even tried <li type=disc">
>
> Nothing I try seems to work. Any ideas?
>
> Duane
>
>
[Todays Threads] [This Message] [Subscription] [Fast Unsubscribe] [User Settings] [Donations and Support]
