CSS: Moving the text down a few pixels but keeping the background still?
Solution 1
Use the line-height
CSS property.
Solution 2
Use the following style for link:
#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;
}
In :hover
and :visited
define only what you want to change (background
, font-size
, etc.).
#nav a:hover {
background: #f000f0 url(Images/Button%20Hover.png);
}
In your code links have different size:
a
- height:28px; width:130px;
,
a:hover
height:34px; width:140px;
,
a:visited
- height:34px; width:140px;
),
That's why you getting different size, position (in a
you use margin:auto
- 0px), but for a:hover
margin has change, so your link also change position.
Solution 3
If you want to move the text down, use padding-top.
Solution 4
line-height can work depending on your situation.
Problem with line-height can be if you have a background color and then it will also expand.
For something I was doing, I'm nesting some divs
I used position:relative; top:20px;
<div class="col-lg-11">
<div style="position:relative; top:20px;">CR</div>
</div>
This inline style is ONLY TEMPORARY
Aaron
Updated on January 08, 2021Comments
-
Aaron over 3 years
I have some CSS buttons that are bigger when hovered over. I have also made the text bigger however I would like to move the text down a few px without messing with the background image being used.
help?
my code looks like this:
<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; }