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

Onkar Hanumante
Onkar Hanumante
2,723 Points
Posted by Onkar Hanumante
Onkar Hanumante
2,723 Points

can't place navigation bar content in a straight line

Want to place sitename floated left and links floated right in a straight line at their respective sides.

HTML : <html> <head> <title>Homepage</title> <link rel="stylesheet" type="text/css" href="css/normalize.css"> <link rel="stylesheet" type="text/css" href="css/main.css"> </head> <body> <div class="container"> <div class="main-header clearfix"> <header> <h1 class="name">sitename</h1> <ul class="links"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact</a></li> </ul> </header> </div> </div> </body> </html>

CSS:

*{ box-sizing:border-box; } body{ padding:0px; margin:0px;

} a{ text-decoration:none; } .main-header{ background-color:#00BCD4;

} .name{ color:#fff; float:left; margin:1em; display:inline-block; }

.main-header .links{ float:right;

} .links li{ list-style-type:none; display:inline-block; float:left; margin:1em;

} .clearfix::after{ content:""; display:table; clear:both; }

Renato Gama
Renato Gama
Courses Plus Student 12,514 Points

I have just openned you project and it looks to me they are all in a straight line. What do you mean by Straight line? Centered?

3 Answers

David Brener
David Brener
3,794 Points
David Brener
David Brener
3,794 Points

You could try Flexbox to achieve what you're looking for...

The HTML

<div class="container">
  <div class="column-one">
    <img src="http://placehold.it/150x50" />
  </div>
  <div class="column-two">
    <ul class="menu-items">
      <li><a href="#">Menu Item One</a></li>
      <li><a href="#">Menu Item Two</a></li>
      <li><a href="#">Menu Item Three</a></li>
      <li><a href="#">Menu Item Four</a></li>
  </div>
</div>

The CSS

.container {
  background: #333;
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  max-width: 1920px;
  height: auto;
  padding: 15px;
}

.column-one {
  display: flex;
  flex: 1;
}

.column-two {
  display: flex;
  justify-content: center;
  flex: 2;
}

.menu-items {
  display: flex;
  list-style-type: none;
}

.menu-items li a {
  padding: 0 10px;
  color: #fff;
  font-weight: 700;
  font-size: 1.2em;
  line-height: 1.3em;
  font-family: 'Raleway', sans-serif;
  text-decoration: none;
}
Renato Gama
Renato Gama
Courses Plus Student 12,514 Points

That is for sure the best answer. Flexbox are always the best solution for websites! But i dont think he got there yet.!

Onkar Hanumante
Onkar Hanumante
2,723 Points
Onkar Hanumante
Onkar Hanumante
2,723 Points

well thnx for help. Will surely try flex layout.

Onkar Hanumante
Onkar Hanumante
2,723 Points
Onkar Hanumante
Onkar Hanumante
2,723 Points

@Renato Gama. I was looking for something like treehouse nav bar

Alex Thomas
Alex Thomas
4,247 Points
Alex Thomas
Alex Thomas
4,247 Points

Have you tried display: inline-block; ? Then set margin-left for each list item? Or, you can go back to the "Create a website" tutorial and Nick explains it pretty well.

Renato Gama
PLUS
Renato Gama
Courses Plus Student 12,514 Points
Renato Gama
Renato Gama
Courses Plus Student 12,514 Points

Try setting diferent widths. The main header should have a 100% widht. But the HEADER try giving it a width of 80%. You will have the H1 and the LI more centered. Hope I have helped.