Styling List Buttons - html

Question

Using a list, I want to create a list of links as in the image
<div id="toolbarbottom" class="toolbar" style="position: fixed; clear: both; overflow: visible; bottom: 0px; left: 0px; width: 100%;">
<ul>
<li id="active"><span><a id="current" href="#add" class="button">News</a></span></li>
<li><span> Updates</span> </li>
<li><span>Contact Us</span></li>
<li><span>Website </span></li>
<li><span>Refresh</span> </li>
</ul>
</div>
I am kind of stuck on the CSS (button) and probably the spacing between the list elements. to make the list appear in this form. Anyone with an idea of how I can tackle this please?

Answer 1

or another way is to use floats, and make the ul display: inline-block to contain the floated li's
you need to slightly change the HTML so the span is inside the a - this is so you can hide the spanned text, but keep the image background and clickable area for the a elements, also I'd give each link a unique reference (class or ID) so the backgrounds can be applied separately.
example HTML:
<div id="toolbarbottom" class="toolbar" style="position: fixed; top: 0px; left: 0px; width: 100%;">
<ul>
<li class="active"><span>News</span></li>
<li><span> Updates</span></li>
<li><span>Contact Us</span></li>
<li><span>Website </span></li>
<li><span>Refresh</span> </li>
</ul>
</div>
you can then put the whole background on the ul and put the individual images on each link.
#toolbarbottom ul {
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
width: 100%;
background: #ff0;
}
#toolbarbottom li {
float: left;
width: 80px;
height: 80px;
border: 1px solid #000; /* not required, just to show where individual links are */
}
#toolbarbottom li a { /* make link fill the li element */
display: block;
height: 80px;
}
#toolbarbottom li span { /* hide the text */
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
clip: rect (1px 1px 1px 1px);
}
/* couple examples of where to put individual backgrounds */
#toolbarbottom #mupdates {background: #dad;}
#toolbarbottom #mcontact {background: #0f0;}

Answer 2

fiddle: http://jsfiddle.net/YaS9J/
css
#toolbarbottom li {
display:inline-block;
padding:0 10px;
}
/* if you have one */
#toolbarbottom li img {
display:block;
}

Answer 3

You should first set up your css as an external style sheet rather than hard code it into your html. (See http://www.w3.org/TR/html4/present/styles.html for more on this). To add spacing between the li elements you can use the css cascade to add some bottom padding as follows:
#toolbarbottom ul li {
padding-bottom:4px;
}
To make the list appear inline you would use:
#toolbarbottom ul{
list-style: none;
display: inline;
padding-left: 0;
margin-left: 0;
}
Those button look like images, so to achieve that you'd just include them within each li element:
<li><img src="/path/to/image.jpg"></li>