it-swarm.com.de

CSS: Verschieben Sie den Text ein paar Pixel nach unten, ohne den Hintergrund zu verändern?

Ich habe einige CSS-Schaltflächen, die größer sind, wenn Sie den Mauszeiger darüber halten. Ich habe den Text auch vergrößert, möchte ihn jedoch um einige Pixel nach unten verschieben, ohne das verwendete Hintergrundbild zu beeinträchtigen.

hilfe?

mein Code sieht so aus:

<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;
}
10
Aaron

Verwenden Sie die line-height-CSS-Eigenschaft.

15
Quantastical

Verwenden Sie den folgenden Stil für den 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 und :visited definieren Sie nur das, was Sie ändern möchten (background, font-size usw.).

#nav a:hover {
    background: #f000f0 url(Images/Button%20Hover.png);
}

In Ihrem Code haben Links unterschiedliche Größe:
a - height:28px; width:130px;,
a:hoverheight:34px; width:140px;,
a:visited - height:34px; width:140px;),

Deshalb erhalten Sie eine andere Größe, Position (in a verwenden Sie margin:auto - 0px), aber für a:hover hat sich die Marge geändert, sodass sich auch Ihre Position ändert.

2
miszczu

Wenn Sie den Text nach unten verschieben möchten, verwenden Sie Padding-Top.

2
Brian Warshaw

zeilenhöhe kann je nach Situation funktionieren.

Das Problem mit der Zeilenhöhe kann sein, wenn Sie eine Hintergrundfarbe haben und diese dann auch erweitert wird.

Für etwas, was ich tat, verschachtelte ich einige divs

Ich habe position:relative; top:20px; verwendet

<div class="col-lg-11">
   <div style="position:relative; top:20px;">CR</div>     
</div>

Dieser Inline-Stil ist NUR vorübergehend

0
Tom Stickel