0

Trying to move some Nav Bar links around within a div, and they are not responding. Can anyone please offer any assistance on this? margin-top seems to be doing nothing. New to CSS.

CSS

#nav {
    height: 70px;
    vw: 100%;
    background-color: hsla(0, 0%, 83%, .7);
    margin-left: -10px;
    margin-top: -16px;
    margin-right: -10px;
    border-bottom: 1px black solid;
}

li {
    list-style-type: none;
    display: inline;
    font-family: Helvetica, sans-serif;
    font-size: 20px;
    padding-right: 20px;
    color: hsl(0, 0%, 50%);
    margin-top: 10px;
}

li:hover {
    color: white;
}

HTML

<header>
   <div id="nav">
      <ul>
         <li>About</li>
      </ul>
   </div>
   <h1>Hi. This is my playground.</h1>
</header>
<div id="me">
   <img src="dp.jpg">
</div>
Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
Zack
  • 661
  • 2
  • 11
  • 27

2 Answers2

4

The margin property doesn't affect inline elements, therefore it doesn't work.

Margin properties specify the width of the margin area of a box. The 'margin' shorthand property sets the margin for all four sides while the other margin properties only set their respective side. These properties apply to all elements, but vertical margins will not have any effect on non-replaced inline elements. http://www.w3.org/TR/CSS21/box.html#margin-properties

Also see this answer as to why dimensions cannot be set on inline elements.

To solve this, you can either change li to display:inline-block. (example) - it works.

Alternaetively, you could also float the li elements, having the same desired effect. (example)

Community
  • 1
  • 1
Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
0

In the #nav you have a typo:

vw: 100%;

Alexnho
  • 136
  • 3
  • 1
    Correct me if I'm wrong but vw is an acceptable attribute with CSS3, viewport width? – Zack Nov 12 '13 at 18:41
  • vw it's a unit like px, em as far as I know. (ex: width:100vw ) Edit: http://dev.w3.org/csswg/css-values/#viewport-relative-lengths – Alexnho Nov 12 '13 at 18:46