Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

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

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>

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

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.

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). :)

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>

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!

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>

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?

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.

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...