Why will this not drop my anchor from the top?

Discussion in 'Web Design' started by Glenn, Jan 1, 2013.

to remove all ads.
  1. Glenn

    Glenn Member

    Messages:
    192
    .nav-bar a {
    margin: 4px 0px 0px 4px;
    color: #004890;
    font-size: 13px;
    text-decoration: none;
    font-weight: bold;
    }
     
  2. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,639
    Errmmm??

    The 'top' of what?
     
  3. Glenn

    Glenn Member

    Messages:
    192
    Here's all I have right now until I get it to work. I have tried using margin-top but it does not work either.

    <div class="nav-bar">
    <a href="/">Home</a>

    </div>

    Here's all that my nav-bar has right now.

    .nav-bar {
    background-image: url('images/Nav-bg.jpg');
    height: 31px;
    width: 100%;
    }
     
  4. benjamin.morgan

    benjamin.morgan New Member

    Messages:
    269
    Are you trying to center it or what? If you are trying to center it you can use line-height to make it centered.

    http://codepen.io/benjaminmorgan/pen/gqiHo

    Otherwise, since it is a div, you would need to display it inline-block since you only have a height of 31 on the div. Just click on the link and look over the code, if you have any questions just ask.
     
  5. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,639
    Are there any rules that cascade to nav-bar?
     
  6. Glenn

    Glenn Member

    Messages:
    192
    I'm not trying to center it, unless you mean center it vertically. I'm just trying to keep it from being up next to the top of the nav bar I have created.
     
  7. Glenn

    Glenn Member

    Messages:
    192
    Only what I put above so far.
     
  8. benjamin.morgan

    benjamin.morgan New Member

    Messages:
    269
    That is what I meant Glenn, If you viewed the code, adding inline-block made the margin-top work. If you want it perfectly centered vertically, use line-height: 31px;
     
  9. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,639
    For that you should apply top-padding to the parent container.
     

Share This Page