Styling <li> with background images in an <ul>

Question

I'm setting up a footer for a site and using an unordered list with three list items as follows:

<ul id="socialnav">
    <li id="facebook"></li>
    <li id="twitter"></li>
    <li id="googleplus"></li>
</ul>

I am trying to use background images for the list items to display the social media icons and then I would like to apply a hover state to the list item for the button's 'on-state'. However, my three icons won't appear horizontally in the list. Here is my css:

#socialnav {
display: inline;
line-height: 42px;
}

#facebook {
background-image: url("images/fb.png");
background-repeat: no-repeat;
list-style-type: none;
height: 42px;
}

#twitter {
background-image: url("images/twt.png");
background-repeat: no-repeat;
list-style-type: none;
height: 42px;
}

#googleplus {
background-image: url("images/gplus.png");
background-repeat: no-repeat;
list-style-type: none;
height: 42px;
}

Two questions - why is this not working? And is there a better/easier way to do this?

Answer 1

To make your li elements appear in a horizontal fashion, you can make two changes.

First, remove the display: inline from the ul :

#socialnav {
    line-height: 42px;
}

Second, style the li elements to float and use display: block :

#socialnav li {
    display: block;
    float: left;
}

Note that the width and border directives were added to allow the elements to appear on the page which the images are unavailable. You can remove them as needed.

JSFiddle here .

Answer 2

1. Probably you don't see images because your list-items are empty so they're not wide enough to see images, or the path to the images is incorrect.

2. Use classes instead of id's. So you can re-use the icons again in the same page if needed. Use also list-style : none once, applied to <ul> element and background-position: no-repeat; height: 42px; background-position: no-repeat; height: 42px; once, applied to every <li> . Another improvement could be using a sprite image, containing all the icons in a single file (so to avoid too many server requests and reduce the overall image size)

Answer 3

For a start I'd make sure your CSS is looking for images in the right place. The url needs to be relative to the CSS file, not the site root.

Secondly I'd put a   in your <li> tags to make sure they're not seens as being empty.

The code works otherwise.

 #facebook {
     background-image: url("http://www.moifacebook.ru/wp-content/themes/atenta12/sections/branding/facebook.png");
     background-repeat: no-repeat;
     list-style-type: none;
     height: 42px;
}  

<ul id="socialnav">
        <li id="facebook">&nbsp;</li>
        <li id="twitter">&nbsp;</li>
        <li id="googleplus">&nbsp;</li>
    </ul>​

http://jsfiddle.net/spacebeers/yQzDy/

Answer 4

Update your code as below

<ul id="socialnav">
<li id="facebook">&nbsp;</li>
<li id="twitter">&nbsp;</li>
<li id="googleplus">&nbsp;</li>
</ul>​

Change CSS to

#socialnav {
display: inline;
 line-height: 42px;
   }

  #facebook {
  background: url("images/fb.png") no-repeat;
  list-style-type: none;
   height: 42px;
    }

   #twitter {
   background: url("images/twt.png") no-repeat;
  list-style-type: none;
   height: 42px;
   }

 #googleplus {
  background: url("images/gplus.png") no-repeat;
  list-style-type: none;
  height: 42px;
  }

Answer 5

First of all not sure why you are making #socialnav display:inline... that really makes no sense.

Second of all you should place an anchor inside your li's to make these social links clickable. Then you should make those anchors display:block and use them as a way to handle the sizing of the icons.

Make sure there is some width specified!