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 How to Make a Website Creating HTML Content Use the Navigation Element

subash maharjan
subash maharjan
2,506 Points
Posted by subash maharjan
subash maharjan
2,506 Points

My unordered list is showing on a the same horizontal line as oppose to bulleted vertical list on the tutorial. Why?

I wrote the same code as in the tutorial but on the nav part, my list are shown in the same horizontal line whereas on the tutorial, they are shown as bulleted list and are on different line. This is strange because i thought, to be shown in the same line, i have apply some css to the nav. But my nav is doing it automatically without any css. Am i missing something here?

<!doctype html>

<p>
<html>
<head>
  <meta charset="utf-8">
  <title>Subash Maharjan | Designer</title>
</head>

<body>
  <header>
    <a href="index.html">
      <h1>subash maharjan</h1>
      <h2>Designer</h2>
    </a>
  </header>

  <nav>
    <ul>
      <a href="index.html">Portfolio</a>
      <a href="index.html">About</a>
      <a href="index.html">Contact</a>
    </ul>
  </nav>

  <section>
    <p>Gallery will go here</p>
  </section>

  <footer>
    <p>&copy; 2014 subash maharjan</p>
  </footer>
</body>
</html>
</p>
Marcus Parsons
Marcus Parsons
15,719 Points

Can you please attach your code to this question so that we can help you further? Please separate the HTML and CSS if they are in separate pages by using the code method outlined in the Markdown Cheatsheet surrounding each block of code as so:

<p>code for html</p>

#cssCode {}
subash maharjan
subash maharjan
2,506 Points
subash maharjan
subash maharjan
2,506 Points 
<!doctype html>

<html>
<head>
  <meta charset="utf-8">
  <title>Subash Maharjan | Designer</title>
</head>

<body>
  <header>
    <a href="index.html">
      <h1>subash maharjan</h1>
      <h2>Designer</h2>
    </a>
  </header>

  <nav>
    <ul>
      <a href="index.html">Portfolio</a>
      <a href="index.html">About</a>
      <a href="index.html">Contact</a>
    </ul>
  </nav>

  <section>
    <p>Gallery will go here</p>
  </section>

  <footer>
    <p>&copy; 2014 subash maharjan</p>
  </footer>
</body>
</html>
Marcus Parsons
Marcus Parsons
15,719 Points

It doesn't look like you've copied and pasted the entire code or some part of it has gotten lost. Please highlight all lines of code and paste them into the respective code blocks. And when you're using code blocks, it is best to add space around the code blocks like so:

'''html HTML CODE HERE '''

'''css CSS CODE HERE '''

EDIT: There are hard returns between '''html and HTML CODE HERE and the following ''' but they are not rendering correctly.

But, using ` instead of ' of course so that it will render correctly.

subash maharjan
subash maharjan
2,506 Points
subash maharjan
subash maharjan
2,506 Points

i didn't know there was character named back tick! thanks for your assistance. i think the code is showing now! Hope you can sort it out.

2 Answers

Marcus Parsons
Marcus Parsons
15,719 Points

The first error that I see is that DOCTYPE always has to be capitalized. Although this won't effect any styling; it's only for document parsing :P

But, the real error I see is that you don't have any CSS attached to the page at all. The CSS can be applied to a page in one of three ways:

  • 1) using the <link> element in the <head> section of the page and setting the href attribute of <link> to the CSS file and the other appropriate attributes correctly like so:
<link href="styles.css" rel="stylesheet" type="text/css">
  • 2) using the <style> element in the <head> section of the page and putting all CSS code within that element like so:
<style>
#myDiv {
color: blue;
}
</style>
  • 3) or using the style attribute on individual elements like so:
<p style="color: gray;">This text is gray</p>

The first method is the most commonly used method as it allows for more dynamic editing of CSS than the following two methods.

subash maharjan
subash maharjan
2,506 Points
subash maharjan
subash maharjan
2,506 Points

Thank you for your answer. I am really at the beginning of my tutorials. They haven't taught me to use css (inline / separate file) at this moment. I was typing whatever they were teaching. But i am surprised to see the different result. I have done list before and i have never seen aligned horizontally before without using css.

Below is my link for my result

(http://1drv.ms/1yYGmGz)

Marcus Parsons
Marcus Parsons
15,719 Points

Ah, I also now noticed that you don't have each link as its own line item or <li>. Your nav section should look like this in order to get the vertical, bulleted effect:

<nav>
  <ul>
    <li><a href="index.html">Portfolio</a></li>
    <li><a href="index.html">About</a></li>
    <li><a href="index.html">Contact</a></li>
  </ul>
</nav>

Notice how I wrapped each line item in its own <li> and </li> tags? I've watched the video again at that point to make sure, but Nick does include the <li> as part of his demonstration. :P

If that solved your problem, please mark my answer as "Best Answer" if you don't mind :)

subash maharjan
subash maharjan
2,506 Points
subash maharjan
subash maharjan
2,506 Points

my bad! my bad! Thats a horrible mistake lol! I have marked your answer as a best answer. Cheers mate!

Marcus Parsons
Marcus Parsons
15,719 Points
Marcus Parsons
Marcus Parsons
15,719 Points

Hahaha it happens to all of us, my friend. Good luck in your future endeavors! :)