2
Hi, new hear and just starting out in CSS so I'm sure this is something simple.
I'm trying to build a horizontal menu bar with 5 different headings: home, process, policies and proceedures, clients, and contacts.
The bar is 20px high, and 818px long. The first and last menu items must reach each end, and there needs to be a white space 11px wide separating each item.
These are the styles I've come up with so far:
.menuwrapper {
background: #ff0000;
border-left: 20px solid #666;
border-right: 20px solid #666;
text-align: left;
font-size: 100%;
height: 20px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
padding-top: 1px;
font-size: 125%;
width: 818px;
}
li { display: inline;}
a {
text-decoration: none;
color: #000000;
font-weight: bold;
text-align: center;
background-color: #fff;
padding-left:10px;
padding-right:10px;
}
.menuspacer {
width: 11px;
height:20px;
background-color: #00ff00;
float:left;
}
and this is the code:
<div class="menuwrapper">
<ul>
<li class="active"><a href="home.htm">HOME</a></li><div class="menuspacer"> </div>
<li><a href="profile.htm">PROFILE</a></li>
<li class="wide"><a href="policies.htm">POLICIES AND PROCEEDURES</a></li>
<li><a href="clients.htm">CLIENTS</a></li>
<li><a href="contact.htm">CONTACT</a></li></ul></div>
So far it just ain't working!...
I'm guessing there's something relatively straightforward I'm doing wrong here (first time at trying this sort of thing). I guess I could put a one row table in there, but I really wanted to get this done with CSS...
Thanks for any help!
Jon
