CODEWITHSUNDEEP
htmlcsshtml-lists
Arthur Halma
Arthur Halma

Reputation: 4001

Style <li> element with CSS background, to show only a part of images

Can anyone help me with list.

I have an image: enter image description here

And now I need to build list with default bulls replaced with left side arrow (but not with whole image):

enter image description here

How I can achive it using cross-browser css?

My HTML markup is:

<ul>
    <li><a href="#">Conveniently located on Adelaide St. W, one block east of the Bathurst   and Adelaide intersection, just north of the Gardiner Expressway, downtown Toronto.</a></li>
    <li>All units are located indoors, which means they are all climate controlled.</li>
    <li>There is an indoor loading dock with four bays, two of which are large enough to accommodate up to 50' trailers.</li>
    <li>Complimentary use of on-site dollies and pallet truck.</li>
</ul>

Upvotes: 1

Views: 1242

Answers (5)

Joseph Marikle
Joseph Marikle

Reputation: 78520

Here's another method that should be cross-browser. You would need to change your sprite image, however. (I couldn't seem to open the image with Photoshop or GIMP or any thing else without it messing up, though. You would have to fix it up yourself). (fixed)

Demo

Basically it offsets the other image vertically instead of horizontally. If you have longer lists, you will have to modify how far it is offset vertically. This should work on all browsers and I tested it in IE9 with compatibility settings changed. it works even in quarks mode.

The modified image looks like this:

enter image description here

Upvotes: 0

Aniket
Aniket

Reputation: 9758

I guess this is what you were asking for.

Check out this fiddle

Here is the code

The HTML is the same.

The CSS

ul {
    list-style: disc inside none;
}

ul li:before {
    position: absolute;
    content: "";
    left: 8px;
    background: url('https://i.sstatic.net/KKMcz.png') no-repeat #fff;
    width: 8px;
    height: 14px;
}

Upvotes: 2

CBRRacer
CBRRacer

Reputation: 4659

you need to set the 

background: transparent, url(/image/sprite.png) no-repeat -XXpx -XXpx;

where the -XXpx moves the position of the element. The only problem with this is you will have to make sure the padding on the li where the bullet shows is not too wide and shows only the size of the image you want.

the other option you have is to set the list-style-type: none; and then drop a div or span at the beginning of you li elements that you want to have the image. I wouldn't recommend this but it would work,

Upvotes: 1

Curtis
Curtis

Reputation: 103348

See this question regarding using Sprite images with list style backgrounds:

use CSS sprites for list (<li>) background image

Upvotes: 5

dan360
dan360

Reputation: 359

ul {
     list-style-image: url(/xxx/xxx.gif);
}

Will give you the whole image, can't you just then split the image down the middle and use the left part?

Upvotes: 0

Related Questions