ansaurus

Question

link with image

Answer 1

+1 A:

Use CSS to suppress the existing list bullets (list-style:none) then specify your own image using background, as in this snippet:

li {
 list-style: none;
 background: url(16-heart-red-xxs.png) no-repeat left center;
 ...

For more information, see: http://webdesign.about.com/od/css/a/aa012907.htm

EDIT:

See below for new source code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
    <title>Untitled Page</title>
    <style type="text/css">
    li
    {
        list-style: none;
        background: url(/images/servers.png);
        background-repeat: no-repeat;
        background-position: left;
    }
    </style>
</head>
<body>
    <ul>
        <li><a href="http://trading-it.ru/Category/1--.aspx"&gt;??????? ? ????????? ????????????</a></li>
        <li><a href="http://trading-it.ru/Category/2--.aspx"&gt;????? ??? ????????</a></li>
        <li><a href="http://trading-it.ru/Category/3--.aspx"&gt;??????????, ????????</a></li>

        <li><a href="http://trading-it.ru/Category/4--apple.aspx"&gt;????????? Apple</a></li>
        <li><a href="http://trading-it.ru/Category/10--.aspx"&gt;??????????? ???????????</a></li>
        <li><a href="http://trading-it.ru/Category/11--.aspx"&gt;???????????? ?????????????</a></li>
        <li><a href="http://trading-it.ru/Category/12--.aspx"&gt;????????? ? ??????? ???????</a></li>
        <li><a href="http://trading-it.ru/Category/13--.aspx"&gt;????????? ?????????</a></li>
        <li><a href="http://trading-it.ru/Category/14-.aspx"&gt;?????????&lt;/a&gt;&lt;/li&gt;

        <li><a href="http://trading-it.ru/Category/15--.aspx"&gt;?????????? ? ??????</a></li>
        <li><a href="http://trading-it.ru/Category/16--.aspx"&gt;??????????????? ????????????</a></li>
        <li><a href="http://trading-it.ru/Category/17--.aspx"&gt;??????? ????????????</a></li>
        <li><a href="http://trading-it.ru/Category/21-111.aspx"&gt;111&lt;/a&gt;&lt;/li&gt;
    </ul>
</body>
</html>

JYelton 2010-06-09 21:24:13

http://trading-it.ru/1.htm something not work

kusanagi 2010-06-09 21:39:26

The style is only applied to the last `li` element, it needs to be applied to all that you want to have an image on. I suggest adding a `<style>...</style>` section to your document to simplify and centralize.

JYelton 2010-06-09 21:49:56

yes, but i do it for small test. in any case you sample not work, see the page http://trading-it.ru/1.htm

kusanagi 2010-06-09 21:58:44

Answer 2

+1 A:

rlb.usa 2010-06-09 21:24:29

no, i simply want to add an image left side on each link, no matter will be bullet or not. images can be different

kusanagi 2010-06-09 21:26:43

can you say where is error- http://trading-it.ru/1.htm ?

kusanagi 2010-06-09 21:42:29

Answer 3

+1 A:

You can also use the list-style-image property for that:

li {
    list-style-image: url("/images/servers.png");
}

This will add the image and not a circle, square etc. to each element of the list.

Kau-Boy 2010-06-09 21:56:28

ansaurus

tags:

views:

answers:

link with image

related questions