Hello World,
I wish to make a horizontal unordered list, in which each li has a
background image. I am having trouble getting the image to display
properly, and I was wondering if you guys could lend a hand.
Below is the html and css I used for the unordered list. I have no
idea if it is valid or anything else like that. That will only be a
concern after I get it working how I want it too.
HTML:
<div id="navigation">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
CSS:
#navigation {
position: absolute;
margin-top: 160px;
margin-left: 176px;
margin-bottom: 9px;
}
#navlist li
{
display: inline;
list-style-type: none;
line-height: 26px;
padding-right: 20px;
background: transparent url(../images/button_07.gif);
background-repeat:no-repeat;
}
An example of what I am after, is on this page:
http://www.chiefcodemonkey.com/awbn/index.html
The buttons that say, "The Forum; The FAQ; The F,F,F,F". I wish to
have the white text over that background image.
A copy if the image can be found here:
http://www.chiefcodemonkey.com/awbn/images/button_07.gif
Any help would be much appreciated.
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
