CSS image d'arrière-plan sur le vol stationnaire / menu actif a diminué
J'ai un menu comme ceci:
<div id="header">
<div id="nav">
<ul>
<li><a href="/home/"><img src="/images/icons/home.png" alt="Home" /></a></li>
<li><a href="/tool/"><img src="/images/icons/tool.png" alt="Tool" /></a></li>
<li><a href="/lists/"><img src="/images/icons/tags.png" alt="Lists" /></a></li>
</ul>
</div>
</div>
Je voudrais un rectangle de l'image sur le vol stationnaire /état actif. Le problème est que peu importe la taille de mes images sont ils toujours a diminué.
Mes icônes sont 30px x 30px. Mes images de fond sont 69px x 34px (ils se serrent près de 30x30).
Voici mon CSS:
#header {
color : #cccccc;
font-size : 1.0em;
padding : 0;
min-height : 37px;
background : #2d2d2d;
vertical-align: middle;
}
#nav {
font-size : 1.1em;
display : inline;
}
#nav ul {
padding : 0;
margin-left : 270px;
margin-bottom : auto;
margin-top : auto;
float : left;
vertical-align : middle;
list-style : none;
position : relative;
display : inline-table;
height : 37px;
line-height : 37px;
}
#nav li {
float : left;
list-style : none;
padding : 0px 35px 3px 0px;
display : inline;
vertical-align : middle;
}
#nav li img {
top: 100%;
vertical-align : middle;
}
#nav a:hover {
background: url('../images/icons/overtop.png') no-repeat;
border: 0;
background-size: 100%;
background-size: 69px 34px;
width:69px;
height:34px;
}
#nav a.active {
background: url('../images/icons/backtop.png') no-repeat;
border: 0;
background-size: 100%;
background-size: 69px 34px;
width:69px;
height:34px;
}
- Créer un violon, je vais essayer 😉
- Ici, vous allez: jsfiddle.net/vizalizer/bhzrM
InformationsquelleAutor Diego Sarmiento | 2012-11-20
Vous devez vous connecter pour publier un commentaire.
Juste quelques choses, j'ai remarqué que le premier coup d'œil:
Vous devez essayer d'utiliser le background-image:url('lien/vers/le /votre/de l'image.png').
Vous pouvez également essayer d'omettre le background-size: 100% parce que c'est redondant.
Juste pour donner des précisions (je ne peux pas poster des commentaires à cause de ma réputation d'être faible) que vous essayez d'indiquer à l'utilisateur que la page qu'ils sont actuellement sur/au sujet de cliquer avec un indice visuel comme une barre noire sur l'icône, correct?
MODIFIER
Essayez de référencer les éléments de la liste au lieu de la balise d'ancrage sur le vol stationnaire comme:
Il résout le problème de taille, mais les images ne sont pas centrées dans l'arrière-plan.
Essayer comme ceci :