Horizontal Nav Bar with Images + Text in CSS

Question

I feel like a moron having to ask this, but I have always evaded CSS at all costs, and as I now find myself needing it again, I have been scavenging Google for an example with no luck.

Basically I have icons specific to each category, and would like to create a horizontal nav bar in CSS/HTML using these, but also displaying a text link under them as well. I have found snippets for doing one or the other, but every time I try and combine the two together, the entire page seems to breakdown.

Can anyone provide an example of how this can be done? If it helps, it would basically look like...

[-IMAGE-]     [-IMAGE-]     [-IMAGE-]
[-TEXT-]      [-TEXT-]      [-TEXT-]

Answer 1

The effect can be easily get through background-position in CSS with proper padding-top applied to the li elements:

background-position: top;
padding-top: 50px; /* Height of image */

Here is an example fiddle.

Update:

Here is the more descriptive fiddle with different images on different li elements.

Answer 2

http://jsfiddle.net/LajUZ/2/

HTML:

<ul class="nav">
    <li class="navitem">
         <div class="icon">
              [icon]
         </div>
         <div class="text">
               [text]
         </div>
    </li>
    <li class="navitem">
         <div class="icon">
              [icon]
         </div>
         <div class="text">
               [text]
         </div>
    </li>
</ul>​

CSS:

.navitem
{
    float: left;
}​