I put 5 li with an image for each a link within Li . After that, I put a :hover on Li so that the image would change over the mouse, but it happens that width is 100% , and I can not change it because my div does not would be centralized in the case.
Does anyone have a solution?
Exemplifying:% button% is width and 184px width is in hover (entire page), follow image and code:
//Ranking
#ranking{
width:100%;
margin-top:1155px;
position: absolute;
margin-left:-388px;
}
#ranking ul{
width:100%;
text-align: center;
padding:0px;
margin:0px;
list-style: none;
}
#ranking ul li {
width:100%;
background:url(../imagens/button.png) no-repeat center;
padding:10px;
margin:0px;
}
#ranking ul li a{
height:27px;
width:184px;
font-family: "Myriad Pro";
font-size: 14px;
text-align: center;
text-decoration: none;
color:#E4E4E4;
}
#ranking li a:hover{
}
#ranking ul li:hover{
background:url(../imagens/buttonhover.png) center no-repeat;
}<!-- Index.php -->
<div id="ranking">
<ul>
<li><a href="#">Top PvP</a></li>
<li><a href="#">Top PK</a></li>
<li><a href="#">Top Clan</a></li>
<li><a href="#">Top Online</a></li>
<li><a href="#">Boss Online</a></li>
</ul>
</div>