CODEWITHSUNDEEP
cssimage
nowayyy
nowayyy

Reputation: 917

list images pushes content down

When I use images in <li>, the content pushes down. It's suppose to be aligned with the images. http://jsbin.com/epayo5

 .services-info ul li {
    background: #fff;
    margin: 39px 0;
    width: 266px;
    padding: 15px;
    -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.services-info ul li:nth-of-type(1) {
    list-style-image: url(http://dl.dropbox.com/u/31659128/fb-icon.png);
}

.services-info ul li:nth-of-type(2) {
    list-style-image: url(http://dl.dropbox.com/u/31659128/twitter-icon.png);
}

.services-info ul li:nth-of-type(3) {
    list-style-image: url(http://dl.dropbox.com/u/31659128/yt-icon.png);
}

Upvotes: 0

Views: 823

Answers (2)

melhosseiny
melhosseiny

Reputation: 10154

Use background-image instead of list-style-image. For example:

.services-info ul li:nth-of-type(1) {
    list-style-type: none;
    background-image: url(http://dl.dropbox.com/u/31659128/fb-icon.png);
    background-repeat: no-repeat;
}

Then add left padding to the list item:

.services-info ul li {
    padding-left: 120px;
}

See updated bin.

Upvotes: 4

Dave
Dave

Reputation: 29141

You'll want to use the background-image for your list items, and set their padding to allow space for the background image.

Here is a jsfiddle showing how to do it.

CSS:

#social_network li {
    height: 95px;
    padding-left: 100px;
    background-position: top left;
    background-repeat: no-repeat;
}
li.fb {
    background-image: url('http://dl.dropbox.com/u/31659128/fb-icon.png');
}
li.twitter {
    background-image: url('http://dl.dropbox.com/u/31659128/twitter-icon.png');
}
li.yt {
    background-image: url('http://dl.dropbox.com/u/31659128/yt-icon.png');
}

HTML: 

<ul id="social_network">
    <li class="fb">
            text text text text text text text text text text text text text text text     text
            text text text text text text text text text text text text text text text     text
    </li>

    <li class="twitter">
            text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text
    </li>

    <li class="yt">
            text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text
    </li>
</ul>

Upvotes: 1

Related Questions