Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Jordan Bailey
Jordan Bailey
121 Points

Some help with positioning

Hi guys, I'm having some trouble with joining my section to my navigation. I mean it works if I use margin-top: -20px; but somehow I dont believe thats the best practice. If someone would kindly point me in the right direction and show me where I've gone wrong I'd be forever greatful.

Also if you would check out my navigation links and see if they're all correct, I had to use line-height to center my logo and again I think thats incorrect.

I've put my code below for you

HTML: http://pastebin.com/aRq8MJGH CSS: http://pastebin.com/qzvjS0P9

3 Answers

Erwin Meesters
Erwin Meesters
15,088 Points

Your html:

<body>
  <header>
    <nav> 
      <ul>
        <a href="" class="logo"><span class="dk">G</span>amerscoin</a> 
        <li><a href="">Universal</a></li>
        <li><a href="">Artists</a></li>
        <li><a href="">Albums</a></li>
        <li><a href="">Events</a></li>
        <li><a href="">Contact</a></li>                       
      </ul>
    </nav>
  </header>

  <section>
    <div id="content">
      <p>content here...</p>                                
    </div>
  </section> 

  <footer></footer>
</body>
  • put only list items inside a list (so only li inside a ul), either place your logo outside the ul, or put it in a li.
  • instead of putting the first letter of Gamerscoin inside a span element for alternate styling purposes you can also use the ::first-letter selector in css.
  • you can use div inside section elements, but semantically it has no meaning. With sections you are already grouping content.
  • I would build my css from generic to specific, from top to bottom. (cascading). So first the rules which apply to the body and tags in general (like a, h1 t/m h6 etc) and further down the html structure using inheritance.
Jordan Bailey
Jordan Bailey
121 Points

You sir are a real champ, are you available for some work? I need someone I can go to as and when a problem occurs. Paid of course.

I've wanted to learn front end development for a long time now and I benefit most from speaking to someone directly

Jordan Bailey
Jordan Bailey
121 Points

You sir are a real champ, are you available for some work? I need someone I can go to as and when a problem occurs. Paid of course. I've wanted to learn front end development for a long time now and I benefit most from speaking to someone directly

Jonathan Watson
PLUS
Jonathan Watson
Courses Plus Student 2,451 Points
Jonathan Watson
Jonathan Watson
Courses Plus Student 2,451 Points

If your html file is in the same folder as your css file you don't need the forward slash.

Example here: http://www.w3schools.com/tags/tag_link.asp

Delete the '/' before main.css in your html file and it should load properly! :)

<link rel="stylesheet" type="text/css" href="main.css">
Jordan Bailey
Jordan Bailey
121 Points

Thanks just changed it :) still having an issue though with fixing my section to my navigation

Jordan Bailey
Jordan Bailey
121 Points

Thanks just changed it :) still having an issue though with fixing my section to my navigation

Jonathan Watson
Jonathan Watson
Courses Plus Student 2,451 Points

Aha! Yes!

 

Sorry, that'll teach me to read the full question! XD

 

The reason it's not joining with the navigation is because of the default paragraph margins:

 

http://www.w3.org/TR/html-markup/p.html#p-display

 

Usually the top margin is manually set to 0.

 

Try setting it to something like:

 

p {
margin: 0 0 22px 0;
}
Jordan Bailey
Jordan Bailey
121 Points
Jordan Bailey
Jordan Bailey
121 Points

Thanks a lot Jonathan! Works a charm :) Does my current code look valid and good practice? I feel like I messed up somewhere on the navigation logo haha