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!

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 Amnike Lashley
Amnike Lashley
Courses Plus Student 276 Points

Positioning navigation

How can I position this navigation http://www.midnightpencils.com/menu.jpg

I want to move it to the left alittle more also remove it to the bottom alittle more. my does as it is right now:

HTML: <nav class="navarea"> <div id=top> <header> <img src="img/logo.png"> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> </div>

CSS:

http://codepen.io/anon/pen/azMZJB

2 Answers

Shaun Kelly
Shaun Kelly
35,560 Points
Shaun Kelly
Shaun Kelly
35,560 Points

Hi Amnike,

From looking at your code you need to add margin-right to the ul in order to move the nav more to the left. Also add an alt attribute to the img tag to pass w3c validation.

Amnike Lashley
Amnike Lashley
Courses Plus Student 276 Points

When i do that it's moving other elements on the page here's the code: http://codepen.io/anon/pen/RNdRLJ

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,228 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,228 Points

Hi there Amnike,

You could move it with a right: 30px; position property on your CSS making sure you target your unordered-list ul element.

Another way to move the element would be to use a margin property to move the outside of the element so the content shifts. You can achieve these using

ul{
  position: relative;
  right: 30px;
}

ul{
  margin-right: 30px;
}

Good luck. :-)

Amnike Lashley
Amnike Lashley
Courses Plus Student 276 Points

When i do that it's moving other elements on the page here's the code: http://codepen.io/anon/pen/RNdRLJ

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,228 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,228 Points

It's odd that it should do that but I think it's because elements are overlapping each other. Remember the size of elements depends on how much border, margin and padding they have, not just the content.

Do you use Google Chrome browser? You can see how the elements are interacting with each other using Chrome DevTools and the "elements" tag.