Comment ajouter une image sur mon <ul> <li> onglet dans mon cas?

J'ai fait un simple onglet de mise en page à l'aide de html <ul><li> avec certains CSS, mon exemple de code est ici, sur jsfiddle .
HTML:

<div>
    <ul>
        <li><a href="#"><img src="http://www.sizzledcore.com/wp-content/themes/SizzledCore-7.0/images/facebook.png" alt="Icon" /></image></br>One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">three</a></li>
    </ul>
</div>

CSS:

li{
   float: left;
}

a{

  color: #ffffff;
  background-color: #003300;

  padding-right: 32px;
  padding-left: 32px;
  display: block;
  line-height: 50px;
  text-decoration: none; 

}

a:hover {
  color: #ffffff;
  background-color: #990000;
}

Après avoir regardé mon code, vous avez vu, j'ai essayé d'avoir une image sur le texte sur chaque onglet, dans mon code, j'ai fait ça sur le premier onglet, mais il semble urgly, donc, je commence à douter suis-je utiliser un bon moyen de le faire? Peut-on donner quelques suggestions sur la façon correcte de ont une image au-dessus de l'onglet texte comme chaque onglet de contenu basé sur mon code ?

P. S. Ce que je veux dire urgly sur mon implémentation actuelle est qu'il y a un gros décalage entre l'image et le texte sur l'onglet.

de quoi avez-vous besoin de toute façon? peut-être que vous pouvez fixer l'image dans la li arrière-plan.
bitsMix, thank u pour vous réponse, en fait je ne sais pas ce que je dois faire, c'est pourquoi je poste ma question ici, car je suis un débutant en CSS, j'ai essayé quelque chose mais pas sûr que je suis bon ou pas. Je suis à la recherche d'une meilleure approche.

OriginalL'auteur Leem.fin | 2011-10-17

  1. 3

    Je préfère cette solution:

    http://jsfiddle.net/Pq7LC/13/

    HTML: 

    <div>
    <ul>
        <li class="facebook"><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">three</a></li>
    </ul>
</div>

    CSS: 

    li
{
    float: left;
    background-color: #003300;
}

li:hover
{
    background-color: #990000;
}

a
{         
    color: #ffffff;
    padding: 35px 32px 7px;
    display: block;
    text-decoration: none;
}

a:hover
{
    color: #ffffff;
}

.facebook
{
    background-image: url('http://www.sizzledcore.com/wp-content/themes/SizzledCore-7.0/images/facebook.png');
    background-repeat: no-repeat;
    background-position: 50% 10px;
}
    hey! est beaucoup mieux que ma mise en œuvre. Merci!!!! J'ai appris.
    Si c'est votre réponse, veuillez marquer ici que répondre 😉 🙂
    Merianos, bien sûr! bien sûr!
    Par ailleurs, si je veux changer l'image de l'onglet sélectionné, j'ai pensé qu'il doit être fait avec javascript. Mais est-il une astuce css peut également être utilisé à cette fin?? Et comment le changement de l'image lorsque la souris survole l'onglet?
    Voici ce que vous pouvez faire avec CSS : jsfiddle.net/Pq7LC/20

    OriginalL'auteur Merianos Nikos

  2. 0
        li{
   float: left;


}

a{ 
  width:60px; 

  color: #ffffff;
  background-color: #003300;

  padding-right: 32px;
  padding-left: 32px;
  display: block;
  line-height: 50px;
  text-decoration: none;

  text-align:center;
}

a:hover {
  color: #ffffff;
  background-color: #990000;
}

    OriginalL'auteur mohana rao

  3. 0

    Vous avez voulu comme ça?

    Je viens de faire un rapide exemple

    http://jsfiddle.net/Pq7LC/18/

    HTML: 

    <div>
    <ul>
        <li><a href="#"><span class='face'>One</span></a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">three</a></li>
    </ul>
</div>

    CSS: 

    li{
   float: left;
}

li a {

  color: #ffffff;
  background-color: #003300;

  padding-right: 32px;
  padding-left: 32px;
  display: block;
  line-height: 60px;
  text-decoration: none; 

}

a:hover {
  color: #ffffff;
  background-color: #990000;
}

.face {
        background: url("http://www.sizzledcore.com/wp-content/themes/SizzledCore-7.0/images/facebook.png") no-repeat 0px -3px;
    display: block;
}

    (mise à jour de votre code)

    OriginalL'auteur Side