Question

I have done a simple tab layout by using html <ul><li> with some CSS, my code example is here on 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;
}

After you looked at my code, you saw I tried to have a image on top of the text on each tab, in my current code, I only did it on the first tab, but it looks urgly, so, I start to doubt am I using a good way to do it? Could some one give some suggestions on the correct way to have a image above tab text as each tab’s content based on my code ?

P.S. What I mean urgly on my current implementation is that there is a big gap between image and text on the tab.

Answer 1

I prefer that 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;
}