J'ai quelques boutons CSS qui sont plus gros lorsque survolé. J'ai également agrandi le texte, mais j'aimerais déplacer le texte de quelques pixels sans toucher à l'image d'arrière-plan utilisée.
aidez-moi?
mon code ressemble à ceci:
<div id="nav">
<a href="index.php">Home</a>
<a id="headrush">Beer Bongs</a>
<a id="thabto">Novelty</a>
</div>
#nav a {
background: url(Images/Button.png);
height: 28px;
width: 130px;
font-family: "Book Antiqua";
font-size: 12px;
text-align: center;
vertical-align: bottom;
color: #C60;
text-decoration: none;
background-position: center;
margin: auto;
display: block;
position: relative;
}
#nav a:hover {
background: url(Images/Button%20Hover.png);
height: 34px;
width: 140px;
font-family: "Book Antiqua";
font-size: 16px;
text-align: center;
color: #C60;
text-decoration: none;
margin: -3px;
z-index: 2;
}
#nav a:active {
background: url(Images/Button%20Hover.png);
height: 34px;
width: 140px;
font-family: "Book Antiqua";
font-size: 14px;
text-align: center;
color: #862902;
text-decoration: none;
margin: 0 -3px;
z-index: 2;
}
Utilisez la propriété CSS line-height
.
Utilisez le style suivant pour le lien:
#nav a:link {
background: #ff00ff url(Images/Button.png);
height:28px;
width:130px;
font-family:"Book Antiqua";
font-size:12px;
text-align:center;
vertical-align:bottom;
color:#C60;
text-decoration:none;
background-position:center;
display:block;
position:relative;
}
Dans :hover
et :visited
, définissez uniquement ce que vous souhaitez modifier (background
, font-size
, etc.).
#nav a:hover {
background: #f000f0 url(Images/Button%20Hover.png);
}
Dans votre code, les liens ont une taille différente:a
- height:28px; width:130px;
,a:hover
height:34px; width:140px;
,a:visited
- height:34px; width:140px;
),
C'est pourquoi vous obtenez une taille et une position différentes (dans a
, vous utilisez margin:auto
- 0px), mais pour a:hover
, la marge a été modifiée, de sorte que votre lien change également de position.
Si vous souhaitez déplacer le texte vers le bas, utilisez padding-top.
line-height peut fonctionner selon votre situation.
Le problème avec la hauteur de ligne peut être si vous avez une couleur d'arrière-plan qui se développera également.
Pour quelque chose que je faisais, je niche quelque divs
J'ai utilisé position:relative; top:20px;
<div class="col-lg-11">
<div style="position:relative; top:20px;">CR</div>
</div>
Ce style en ligne est seulement temporaire