treehouse : what would you like to learn today?
Web Design Web Development iOS Development

problem with

  • Hello everyone,
    I followed the tutuorial about converting a photoshop mockup into a webpage (#1,#2,#3).
    Everthing go's great, with one slight exeption.
    I'm not shore how to discribe this, but the image speaks for itself.
    I just cant understand why the text isn't in the boxes.

    Here is a piece of the code:

    XHTML:
    <ul id="nav">
    <li><a href="#">Music</a></li>
    <li><a href="#">Disign</a></li>
    <li><a href="#">Sport</a></li>
    </ul>

    CSS:
    ul#nav li a {
    display: block;
    width: 140px;
    float: left;
    margin-top: 168px;
    color: black;
    font-weight: bold;
    text-decoration: none;
    }

    I hope that you guys can help me out
    Thanks,
    Matt
  • it's because you';re applying float and margins to your <a> element which is an inline element, Apply your float and margin to the parent <li>.