0

I was wondering - when making my website - how i can put a bottom margin that lifts an a-tag up.

CSS:

.navbar a {
    background-color: #494949;
    border: 1px solid #ffffff;
    font-family: sans-serif;
    font-weight: bold;
    padding: 5px 10px;
    text-decoration: none;
}
.navbar a:hover {
    text-decoration: none;
    font-family: sans-serif;
    font-weight: bold;
    color: #494949;
    padding: 10px 10px;
    border: 1px #494949 solid;
    background-color: #67E727;
}

And here's also my html:

<div class="navbar">
            <a href="#">Home</a>
            <a href="#">Info</a>
            <a href="#">Doneren</a>
            <a href="#">Gallerij</a>
            <a href="#">Contact</a>
</div>

I really hope you can help me out :)

greetings form the Netherlands!

4
  • So you want the link text to move up when hovered on? Or ? Jun 18, 2014 at 17:37
  • 1
    Can you make a fiddle? And what are you doing here? Go watch the game
    – TheBokiya
    Jun 18, 2014 at 17:38
  • set display:inline-block to <a> , so it can behave more like a box
    – G-Cyrillus
    Jun 18, 2014 at 17:39
  • you need to describe the desired effect. Jun 18, 2014 at 17:39

2 Answers 2

1

You do not have to repeat all properties in hover state, only those you want to change. a tag is a inline element, see how box model works. To push it top on hover you can't use margin, you can use something like this:

.navbar a:hover {
  position: relative;
  top: -10px;
}
0

Is something like this what you're looking for? It moves the whole nav bar down a bit so the highlighting doesn't get cut off, and it moves the text up on hover. Here is the changed parts:

.navbar{
        margin-top:20px;
}

.navbar a:hover {
    position: relative;
    top: -5px;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.