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

HTML

Justin Boling
Justin Boling
899 Points
Posted by Justin Boling
Justin Boling
899 Points

What do I do to keep my page heading and menu items on the same line?

I'm making a webpage for a friend. here's my code so far...

<html> <head> <title>UpDo's by Mel</title> <link rel="stylesheet" type="text/css" href="updos.css" /> </head> <body> <div class="navigation-bar"> <h1 class="page-title"> UpDo's by Mel</h1> <h3 class="menu"> Home       Testimonials       Reviews       Schedule Me </h3> </div> <img src="http://placeimg.com/600/400/tech/grayscale" class="main-img"> <h2 class="section-tite"> About Company </h2> <p class="sectio paragraph"> Information about company goes here. A few sentences describing mission of company. <ul> <li> we do this </li> <li> we do this </li> <li> list item </li> </p> </ul> </body> </html>

I also have a css page, let me know if you need that. Basically, I want the "menu" class items to be on the same line of the page as the h1 page title. Whenever I load this in my browser, it breaks a line down, and puts the "menu" items on the next line down.

Andrew Young
Andrew Young
Courses Plus Student 639 Points
Andrew Young
Andrew Young
Courses Plus Student 639 Points

Here is a beautify version

<html>
  <head>
    <title>UpDo's by Mel</title>
    <link rel="stylesheet" type="text/css" href="updos.css" />
  </head>
  <body>
    <div class="navigation-bar">
      <h1 class="page-title"> UpDo's by Mel</h1>
      <h3 class="menu"> Home       Testimonials       Reviews       Schedule Me </h3>
    </div>
    <img src="http://placeimg.com/600/400/tech/grayscale" class="main-img"> 
    <h2 class="section-tite"> About Company </h2>
    <p class="sectio paragraph"> Information about company goes here. A few sentences describing mission of company. 
    <ul>
      <li> we do this </li>
      <li> we do this </li>
      <li> list item </li>
      </p> 
    </ul>
  </body>
</html>

And sure we do need the css you're using so we can know what issue you're facing and how to fix it

Christopher De Lette
Christopher De Lette
Courses Plus Student 7,139 Points
Christopher De Lette
Christopher De Lette
Courses Plus Student 7,139 Points

Hi Justin,

If you have had little to no prior experience with HTML and moreover CSS no matter what details or advice i give to get the nav bar to display on the same line as the header will not make much sense. Keep moving forward in the HTML and CSS courses and i guarantee you will find the answer to your question.

In short there are a few ways to accomplish this task by floating elements, the display properties, and using flex containers with even more complex ways using frameworks.

Hope this helps and continue marching forward in your studies!

1 Answer

Justin Boling
Justin Boling
899 Points
Justin Boling
Justin Boling
899 Points

Thank you, will post my CSS code. I totally forgot about floating elements. I actually taught myself coding, and went to a little school for it too years ago. I taught myself again, but am just now getting really serious about it (i.e. treehouse.) So I am very rusty, but have learned a lot about CSS and HTML, and am taking the courses all over again.

here's my CSS

body { background-color: #FFFFF0; } .navigation-bar { background-color: #B76E79; } .main-img { border: solid black 5px; border-radius: 10px; } .page-title { margin-left: 30px; } .menu { text-align: right; margin-right: 30px; white-space: nowrap }

obviously, I should use a floating element? The only problem I ever ran into with those was sometimes they go too far and extend way further than I want them to.