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 Abe Layee
Abe Layee
8,378 Points

Css Navigation

I have been trying to understand the process of building a nav menu with logo on the left and nav on the right while they both take up the full viewport width. I am really lost with building a nav menu. I watched the Css Layout course and it still didn't help me out to build my navigation the way I want it to be. Also, I am trying to find out why some elements set inline-block or block like the a tag. Any tips for mastering how to build a solid nav. Here is my code. Please share tips on how to build a nav menu because this is stressing me out. I have been searching the web for couple of days now and yet, I can't figure it out. I understand most of the css properties,but I have difficulty laying out the navigation. I am trying to build nav menusimilar to this one. Please comment out the process of building this please. I'll really appreciate it and god bless you. http://pavelhuza.com/

 <div id="wrapper">   
      <header id="header">
          <div id="main-logo"><a href="">Logo</a></div>
         <nav>
             <ul id="main-nav">
                <li><a href="#home" title="Home">Home</a></li>
                <li><a href="#portfolio" title="Portfolio">Portfolio</a></li>
                <li><a href="#about" title="About">About</a></li>
                <li><a href="#contact" title="Contact">Contact</a></li>
             </ul>
         </nav>
   </header>
   </div>

*{
 -webkit-box-sizing:border-box;
 -ms-box-sizing:border-box;
 -moz-box-sizing:border-box;
  box-sizing:border-box;
}


body {

    margin:0;
    padding:0;
    font-size:100%;
    font-family: 'Playfair Display', serif;
}

/***************************************************************
                   page:Wrapper;
****************************************************************/

#wrapper {
     width:100%;
     max-width:1356px;
     margin: 0 auto;
     background:crimson;
}




/***************************************************************
                   page:Logo,nav,
****************************************************************/

#header {

}

#main-logo,#main-nav,#main-nav li {
                   display:inline-block; /*elements sit  next to each other*/
}

#main-nav li, #main-logo {
    border-radius:5px;
}

#main-logo {
    margin-top:0;
    margin-bottom:0;

}

#main-nav li {
    margin-right:10px;
    margin-top:15px;
}

#main-logo a,#main-nav a {
    display:block;
    text-align:center
    color:#fff;
}
Jason Regier
Jason Regier
4,326 Points

Maybe missing float?

7 Answers

Chris Bennett
Chris Bennett
7,499 Points

I just rechecked the code you need to do a overflow:auto; on the elements parent, so the #header.

This makes the header conform to the size/shape of the child elements that are floated.

Hope that helps Abe

Chris Bennett
Chris Bennett
7,499 Points
Chris Bennett
Chris Bennett
7,499 Points

You have the right idea just do a:

#main-nav{
  float: right;
}
Abe Layee
Abe Layee
8,378 Points
Abe Layee
Abe Layee
8,378 Points

Now the menu is taken out of the header when floated right.

Jason Regier
Jason Regier
4,326 Points
Jason Regier
Jason Regier
4,326 Points

That work?? I am still new, looks like you are farther than I am in this...hope that helped.

Jason Regier
Jason Regier
4,326 Points
Jason Regier
Jason Regier
4,326 Points

Boxsizing?? Just guessing away here.. only been at it a couple weeks now.

Abe Layee
Abe Layee
8,378 Points
Abe Layee
Abe Layee
8,378 Points

Box-sizing simply used to calculate widths and heights of an element. You don't have to worry about calculating the the padding or margin when set to border-box. I apprecaite you help.

Abe Layee
Abe Layee
8,378 Points
Abe Layee
Abe Layee
8,378 Points

Thank Chris and Jason for helping out.