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

Posted by Nelson Heard
Nelson Heard
5,153 Points

Unordered List not appearing in browser

i've got this so far and it's identical to the instruction as far as i can tell, but when i save and refresh browser, no list appears...

 <ul class="nav">
    <li><a href="#">About</a></li>
    <li><a href="#">Cupcakes & Prices</a></li>
    <li><a href="#">Locations</a></li>
    <li class="last"><a href="#">Contact Us</a></li>
  </ul>

5 Answers

Chase Lee
Chase Lee
29,275 Points
Chase Lee
Chase Lee
29,275 Points

Nelson Heard and Michael Arends I reformatted you code. You can find out how I did it here.

I can't see why your code wouldn't work, maybe try refreshing the page. Also try changing the & character in:

<li><a href="#">Cupcakes & Prices</a></li>

To &amp;. Like this:

<li><a href="#">Cupcakes &amp; Prices</a></li>
Michael Arends
Michael Arends
27,513 Points

Thank you Chase James. That was a very helpful link.

Michael Arends
Michael Arends
27,513 Points
Michael Arends
Michael Arends
27,513 Points

I am new to this forum so maybe I'm not seeing it right but do you have the code? Using view page source shows "About Cupcakes & Prices Locations Contact Us" only in a 'p' tag. You need to use the ul tag with li tags listed within. I am not sure if this answer will escape the html but I'll give you an example both ways below.

<html>
<body>
<p>
<ul>
<li>Your</li>
<li>list</li>
</ul>
</p>

&lt; ul &gt;
&lt; li &gt; Your &lt; /li &gt; <br>
&lt; li &gt; List &lt; /li &gt; <br>
&lt; /ul &gt;
</body>
</html>

*EDIT My code isn't showing up on the forum correctly either. I'm not sure if it is a team treehouse issue or not.

michaelfritch
michaelfritch
8,216 Points
michaelfritch
michaelfritch
8,216 Points

Although you should replace '&' with '&amp;' as Chase (and the lesson itself) recommend, the lesson also stated that modern browsers should render fine regardless.

If the entire element is not showing up the problem may lie elsewhere in your index.html (or a css) file.Could you show us the code for the entire index.html page so we can have a look?

Also, even before posting here, you may want to go over your code line-by-line aside the example code and see if anything is amiss. Let us know if you get it worked out. It's probably just a typo...

Edit: I just tested with that lesson and '&' still renders fine, so problem would seem to lie elsewhere in your code (or you have a really funky browser). :)

Nelson Heard
Nelson Heard
5,153 Points
Nelson Heard
Nelson Heard
5,153 Points

here is my entire index.html file at this point. i'm using google chrome. the "Smells Like Bakin" image is appearing, but no list, still even after changing the ampersand. i'm guessing it is just a very small typo, although i'm at a loss at this point as to what it may be. thanks for yall's help!

<!DOCTYPE HTML> 
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Smells Like Bakin' Cupcake Company</title>
</head>
<body>
  <img src="img/logo.gif" alt="Smells Like Bakin'">
  <p>
  <ul class="nav">
  <li><a href="#">About</a></li>
  <li><a href="#">Cupcakes &amp; Prices</a></li>
  <li><a href="#">Locations</a></li>
  <li class="last"><a href="#">Contact Us</a></li>
  </ul>
  </p>
  <div id="intro">
    <h1>Opposites really do attract, especially in our kitchen! We combine unexpected flavors that melt together to create ironically delicious desserts.</h1>
    <p><a href="#" class"btn">Browse Our Cupcakes</a></p>
  </div>

  <img src="img/you-bake-me-blush.gif" alt="You Bake Me Blush">
</body>
</html>
michaelfritch
michaelfritch
8,216 Points

Please wrap your pasted code as Chase outlined <a href="https://teamtreehouse.com/forum/how-to-type-code-in-the-forum">here</a> so we can see it all. Thanks!

michaelfritch
michaelfritch
8,216 Points

Make that: https://teamtreehouse.com/forum/how-to-type-code-in-the-forum

Nelson Heard
Nelson Heard
5,153 Points

my mistake! literally my second day on here. learning lots, but feeling very stupid right now, haha! let's see if this works...

<!DOCTYPE HTML> 
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Smells Like Bakin' Cupcake Company</title>
  </head>
<body>
  <img src="img/logo.gif" alt="Smells Like Bakin'">
  <p>
  <ul class="nav">
  <li><a href="#">About</a></li>
  <li><a href="#">Cupcakes &amp; Prices</a></li>
  <li><a href="#">Locations</a></li>
  <li class="last"><a href="#">Contact Us</a></li>
  </ul>
  </p>
  <div id="intro">
    <h1>Opposites really do attract, especially in our kitchen! We combine unexpected flavors that melt together to create ironically delicious desserts.</h1>
    <p><a href="#" class"btn">Browse Our Cupcakes</a></p>
   </div>

 <img src="img/you-bake-me-blush.gif" alt="You Bake Me Blush">

 <div id="featured-cupcake">
   <h2>Cupcake of the Week</h2>
   <p>This week's featured cupcake is the <a href="#">Avocado Chocolate Cupcake</a>. Its strange combo of flavors will kick your tastebuds into fiesta mode!</p>
   <img src="img/featured-cupcake.jpg" alt="Avocado Chocolate Cupcake">
 </div>

 <div id=new-cupcakes">
   <h2>Fresh Out The Oven</h2>
   <p>Our newest cupcakes are <a href="#">Bacon Me Crazy</a> and <a href="#">Jalapeno So Spicy<a/>. </p>
   <img src="img/new-cupcake-bacon.jpg" alt="Bacon Me Crazy">
   <img src="img/new-cupcake-jalapeno.jpg" alt="Jalapeno So Spicy">
 </div>
michaelfritch
michaelfritch
8,216 Points

Don't feel dumb, we're all students here :)

notice the red highlighting on class"btn" (should be class="btn")

also I don't know if they are just missing from your forum post or your code, but make sure you have closing </body> & </html> tags.

Let me know if any of that does the trick?

Nelson Heard
Nelson Heard
5,153 Points

i've got the closing html and body tags, and i did make the correction on the "class btn", but that still has not resolved anything yet. all that's appearing in my browser when i refresh is the Smells Like Bakin' picture, not even any of the text or other images i've coded in.

michaelfritch
michaelfritch
8,216 Points
michaelfritch
michaelfritch
8,216 Points

That's odd. I pasted your code onto my desktop and everything showed fine in the current versions of IE and Chrome.

Perhaps this is a browser issue of some kind? Maybe try installing (or reinstalling) a different browser with no plugins and see what happens...