CODEWITHSUNDEEP
htmlcss
svk
svk

Reputation: 4553

unordered list image appeared slightly up to the starting position of the text?

I am using the sprite image to make the bullet for unordered list. It works fine but that image is showing slightly upper to the starting position of the text. The text and image should be in the same line. How can I do that?

body
    {
        font-family:Arial;
        font-size:16px;
    }
    div
    {
        width:30%;
        float:left;

    }
    .bullet {
        list-style-type: none;
        margin:0; 
        padding:0;
    }

    .magenta li 
    {
        background-image: url(images/css-sprite.png);
        background-repeat:no-repeat;
        padding-left:20px;
        background-position: 0px -2036px;

    }

and the html 

<div>
    <p>Magenta</p>
    <ul class="magenta bullet">
        <li>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nulla sapien, varius id dignissim sit amet, luctus elementum nulla. Mauris hendrerit tincidunt nunc condimentum accumsan. Donec semper hendrerit ligula non blandit. Nullam tellus lacus, dictum quis sodales id, consectetur posuere nunc. Maecenas massa nibh, sagittis quis hendrerit ornare, interdum sit amet tellus. Proin lectus neque, posuere at interdum vitae, eleifend id dui. Mauris eget eros magna, sed gravida quam.
        </li>
        <li>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nulla sapien, varius id dignissim sit amet, luctus elementum nulla. Mauris hendrerit tincidunt nunc condimentum accumsan. Donec semper hendrerit ligula non blandit. Nullam tellus lacus, dictum quis sodales id, consectetur posuere nunc. Maecenas massa nibh, sagittis quis hendrerit ornare, interdum sit amet tellus. Proin lectus neque, posuere at interdum vitae, eleifend id dui. Mauris eget eros magna, sed gravida quam. 
        </li>

    </ul>
</div>

Upvotes: 2

Views: 38

Answers (2)

Wex
Wex

Reputation: 15715

It's very tough to accomplish this with sprites. If the image was by itself, the obvious solution would be to do:

.magenta li { background-position: 0 50%; }

However, if you're set on keeping the sprites, I encourage you to actually include another element to show the image:

<li>
    <em></em>
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nulla sapien, varius id dignissim sit amet, luctus elementum nulla. Mauris hendrerit tincidunt nunc condimentum accumsan. Donec semper hendrerit ligula non blandit. Nullam tellus lacus, dictum quis sodales id, consectetur posuere nunc. Maecenas massa nibh, sagittis quis hendrerit ornare, interdum sit amet tellus. Proin lectus neque, posuere at interdum vitae, eleifend id dui. Mauris eget eros magna, sed gravida quam.</span>
</li>

Then you can use absolute positioning:

.bullet li {
    position: relative;
    padding: 0 0 25px; }
.bullet em {
    background: url(images/css-sprite.png) 0px -2036px no-repeat;
    position: absolute;
    top: 50%;
    left: 0;
    width: 20px;
    height: 20px;
    margin: -10px 0 0; }

http://jsfiddle.net/BeCQy/

Upvotes: 0

ASertacAkkaya
ASertacAkkaya

Reputation: 661

Make your container the same height for your background image portion. And then you can use line-height to align your text to appear centerized vertically to your image.

Upvotes: 1

Related Questions