I’m trying to wrap my mind around how to make “pill capsules” behind links (active and hover). Of course using UL and LI’s I know how to make a menu and I even know how to have a background image show up in the CSS under the active link. But I’m trying to have a left and right (start and finish of the capsule) so that no matter how big the text the effect will have the same amount of space on both sides (centering the text between the ends).
This is what I have so far:
<div id="menu1">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
#menu1{
height:25px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#menu1 ul{
margin:0;
padding:0;
list-style-type:none;
}
#menu1 ul li{
display:inline;
}
#menu1 ul li a{
text-decoration:none;
float:left;
height:25;
margin:12px 0;
padding:15px;
width:65px;
text-align:center;
}
#menu1 a:link, #menu1 a:visited{
color:#fff;
background-image:url(images/link.gif);
background-repeat:repeat-x;
background-position:center;
}
#menu1 a:hover, #menu1 a:active{
color:#000;
background-image:url(images/hover.gif);
background-repeat:repeat-x;
background-position:center;
}
Please help!!!