Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Sebastien Lavergne
Sebastien Lavergne
1,124 Points

Style CSS menu

Hi, I just started the tutorial for web design courses. I tried to do the menu for the page Smell Like Bakin and nothing move.

Here is my CSS code:

ul.nav {
  margin: 120px 0 0 0;
  list-style: none;
  float: right;
}

[edit] Here's my code: http://codepen.io/anon/pen/BgIab

I do the same thing in as the video showed but nothing change.

I would like to know if there was anybody with that problem before.

Thank you

Seb

James Barnett
James Barnett
39,199 Points

Create a code pen and post the link here so we can see the bigger picture.

4 Answers

James Barnett
James Barnett
39,199 Points

You forgot to close an HTML tag. To figure out which one, run your HTML through html lint

Sebastien Lavergne
Sebastien Lavergne
1,124 Points

Hi James,

Thank you very much for your help. I close it and everything is working well!! Also thank you for showing me the html lint. I added to my favorite.

Again, thank you for you help!! Love Treehouse!!

Are you including your stylesheet in your HTML?

akc
akc
11,729 Points

Perhaps "display:inline-block" is what you need.

When your element is a block element, it will take up the whole width of the parent element. Hence, you cannot align the menu items next to each other because it will push other elements down. Here is an article explaining the differences: http://www.impressivewebs.com/difference-block-inline-css/

Understanding "block", "inline", and "inline-block" should help you clear this hurdle. :)

James Barnett
James Barnett
39,199 Points

While you can use inline-block to make a horizontal nav, floats can work just fine as well.

akc
akc
11,729 Points

Thank you James! You are correct.

OP: I went back to take a look at the exercise code and it seems like there other properties listed in the ul.nav selector. Since I cannot see your original code, please download the exercise code underneath the training video and compare to yours to see if they are the same.

Sebastien Lavergne
Sebastien Lavergne
1,124 Points

Hi All,

Thank you very much for your reply.

here are my codes: http://codepen.io/anon/pen/BgIab

I can figured out why its not working even if I do the same as the tutorial one.

I had check my codes and it seems OK.

Again, thank you for your help, I really appreciate.

Seb