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

CSS

Posted by Ross Rowe
Ross Rowe
Courses Plus Student 1,300 Points

Working with grids

My page isn't formatted or rendering as Nick's does in the example and I can't figure out why.

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Smells Like Bakin' Cupcake Company</title>
  <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
  <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
</head>
<body>
  <div class="container clearfix">
    <div class="grid_4">
      <img src="img/logo.gif" alt="Smells Like Bakin">
    </grid>
    <div class="grid_8 omega">
      <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>
    </div>
    <div id="intro" class="grid_9">
        <h1>Opposites really do attract, especially in our kitchens! We combine unexpected flavors that melt together to create ironically delicious desserts.</h1>
        <p><a href="#" class="btn">Browse Our Cupcakes</a></p>
    </div>
    <div class="grid_3">
      <img src="img/you-bake-me-blush.gif" alt="You Bake Me Blush"
    </div>

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

    <div id="new-cupcakes class="grid_5 omega">
        <h2>Fresh Out the Oven</h2>
        <p>Our newest cupcakes are <a href="#">Bacon Me Crazy</a> and <a href="#">Jalapeño 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>

    <h2>Inside the Kitchen</h2>
    <p>Smells Like Bakin' started out in the garage of the husband wife duo Allison &amp; Joseph. Allison is the baker, and Joseph found a way for them to make a business out of her tasty treats. Flash forward to today and they have a successful store, catering business and cupcake truck. </p>
    <p><a href="#" class="btn-small">Read More</a></p>


    <h2>Get Bakin' with Us</h2>

    <div id="contact">
        <p>Call us: <span>1-555-CUP-CAKE</span><br>
            Email us: <a href="#">bakeon@smellslikebakin.com</a></p>
    </div>  


    <p>We announce all of our new flavors first through Facebook &amp; Twitter, and even take requests!</p>
    <a href="http://www.facebook.com/SmellsLikeBakin"><img src="img/facebook.gif" alt="Facebook"></a>
    <a href="https://www.twitter.com/#!/SmellsLikeBakin"><img src="img/twitter.gif" alt="Twitter"></a>

    <div id="copyright">
        <p>&copy; 2012 Smells Like Bakin' Cupcake Company. All Rights Reserved.</p>
    </div>  

  </div>
</body>
</html>

3 Answers

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Sounds like you've got a file path issue with your <link> tag.

Here's an example:

file directory structure example

Does that help?

If not, you can read up about absolute vs relative paths

Ross Rowe
Ross Rowe
Courses Plus Student 1,300 Points

Not this issue but thanks for that info. I'm sure I may run into that at some point. As for this, I figured out part of the problem. I closed a tag with </grid> instead of </div>. I'm guessing the rest of my problems are probably similar. I'm going to go back over it and see what I may have missed. Thanks for the assist James.

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Ross,

You have a few img tags that are not closed, you also have at least 1 id=" with no " at the end before you have a class element & check the content of your meta tag.

If you sort out these you should be able to narrow things down a bit .

Ross Rowe
Ross Rowe
Courses Plus Student 1,300 Points

Thanks Wayne, i'll go back over it.

Ross Rowe
PLUS
Ross Rowe
Courses Plus Student 1,300 Points
Ross Rowe
Ross Rowe
Courses Plus Student 1,300 Points

Not this issue but thanks for that info. I'm sure I may run into that at some point. As for this, I figured out part of the problem. I closed a tag with </grid> instead of </div>. I'm guessing the rest of my problems are probably similar. I'm going to go back over it and see what I may have missed. Thanks for the assist James.

Miguel de Luis Espinosa
Miguel de Luis Espinosa
41,279 Points

Most of the time, a small typo would make you think you can't code

Ross Rowe
Ross Rowe
Courses Plus Student 1,300 Points

I'm learning this. Finding those errors was a lesson too.