CODEWITHSUNDEEP
csshtml-lists
stulk
stulk

Reputation: 105

How do I create an unordered list with inline images replacing the text

I'm trying to set up two logos side-by-side (i.e. inline) from an unordered list. The logo images should replace the text links. 

<footer>
<ul id="footer-social" class="pull-right">
    <li class="footer-facebook"><a href="#">Become a Facebook Fan</a></li>
    <li class="footer-twitter"><a href="#">Follow us on Twitter</a></li>
</ul>
</footer>

http://jsfiddle.net/KKd6K/1/

Any help would be appreciated.

Upvotes: 0

Views: 3683

Answers (2)

Horen
Horen

Reputation: 11382

Use display: inline or display: inline-block on your list item li:

li{
   display: inline;
}

In case you want to keep on using background-images go with display: inline-block as it works partly as a block element and you can set width and height as well:

li{
   display: inline-block;
   width: 30px; /* set to width of background-image */
   height: 30px; /* set to height of background-image */
}

Upvotes: 0

Eli Gassert
Eli Gassert

Reputation: 9763

http://jsfiddle.net/KKd6K/2/

Relevant changes: set li to block so I could set a width/height to the size of the background image; set the anchors to block as well to allow for text-indent; set background on li instead of a.

#footer-social li {
    display: block;
    float: left;
    width: 30px;
    height: 30px;
    overflow: hidden;
}

#footer-social li a {
    display: block;
    text-indent: -99999px;
}

#footer-social li.footer-facebook {
    background: url("http://s14.postimg.org/lszvw6dwd/facebook_logo.png") no-repeat;
}

#footer-social li.footer-twitter {
    background: url("http://s12.postimg.org/m5agrq8ah/twitter_logo.png") no-repeat;
}

Upvotes: 1

Related Questions