Menu
I wrote some CSS that displays a simple list item navigation with a hover over color effect. No images. I need the list items to be 149px wide and 33px high. I have that all set, but I cannot seem to align the text in the “middle”. I want each of my navigation items centered in the boxes. I need each item to all align to the left together so they’re uniform, but be perfectly centered. I can’t get this to work. I’ve tried different things. I’m sure the answer is very simple. Can someone help?
Here is what’s in my CSS file:
#leftmenu {
width: 149px;
}
#leftMenu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#leftMenu li {
margin: 5px 0 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#leftMenu a {
display: block;
width:149px;
height: 33px;
padding: 2px 2px 2px 10px;
border: none;
background: #2A2930;
text-decoration: none;
text-align: left;
}
#leftMenu a:link, #leftMenu a:active, #leftMenu a:visited {
color: #FFFFFF;
}
#leftMenu a:hover {
border: none;
background: #A5B268;
color: #ffffff;
}
==============================
Here’s what’s in my HTML page:
<div id=”leftMenu”>
<ul>
<li><a href=”program-details.htm”>Program Details</a></li>
<li><a href=”why-copper.htm”>Why Copper</a></li>
<li><a href=”research.htm”>Resarch</a></li>
<li><a href=”why-coop.hm”>Why .coop</a></li>
<li><a href=”copper-team.htm”>The Copper Team</a></li>
</ul>
</div>