I am building up my protifilio and have never really done CSS before. I am creating this menu and the problem I get with it is that it keeps on sticking gaps inbetween each option like so:
The CSS code is like this:
#navigation{
font-size:11px;
}
#navigation ul{
list-style:none;
margin:0px;
padding:0px;
padding-top:1em;
}
#navigation li{
display:inline;
padding:0px;
}
#navigation a:link, #navigation a:visited{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
padding:0.2em 10px 0.2em 1.4em;
color:#ffffff;
background-image:url(arrow.gif);
background-repeat:no-repeat;
background-position:left center;
background-color:#383838;
text-decoration:none;
border:1px solid #383838;
}
#navigation a:hover{
font-family:Verdana, Arial, Helvetica, sans-serif;
padding:0.2em 10px 0.2em 1.4em;
background-image:url(downArrow.gif);
background-repeat:no-repeat;
background-position:left center;
color:#ffffff;
background-color:#383838;
}
and the html:
<div>
<ul id="navigation">
<li><a href="home.htm">Home</a></li>
<li><a href="option 1.htm">option 1</a></li>
<li><a href="option 2.htm">option 2</a></li>
<li><a href="option 3.htm">option 3</a></li>
<li><a href="option 4.htm">option 4</a></li>
<li><a href="option 5.htm">option 5</a></li>
</ul>
</div>
How do I get rid of the gaps and also make it a set width like 700px?
Thanks for any help.
