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 India Abraham
India Abraham
2,826 Points

Creating A Website Structure...Code not looking like the example in video

Hi Everyone,

New to treehouse and so far I'm loving it! However, I've run into a bit of a problem, I'm currently working through the Build a Simple Website Badge, under the Creating a Website Structure section and my site is not looking like the example especially after adding grid classes, I'm refreshing the page and everything....please help. I've attached my code here...maybe a fresh pair of eyes can be of help.

Editor: Dreamweaver Folder Organization: Web - (root folder) contains index.html, img folder, and css folder- CSS (folder inside web folder) contains grid.css and normalize.css and img folder

Code: 

<title>Smells Like Bakin' Cupcake Company</title>
    <link rel="stylesheet" href="web/css/normalize.css" type="text/css" media="screen">
    <link rel="stylesheet" href="web/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">
      </div>
      <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 kitchen combing ingreidents</h1>
            <p><a href="#" class="btn">Browse Our Cupcakecakes</p>
        </div>
        <div class="grid_3 omega">
            <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 Choocolate Cupcake</a>.Its strange indeed</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="#">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 Spick">
            </div>
<div class="grid_7">
            <h2>Inside The Kitchen</h2>
            <p>It all started in a gargae in a kitchen, I'm a baker and he's all about business</p>
        <p><a href="#" class="btn-small">Read More</a></p>
    </div>
            <div class="grid_5 omega">
            <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 new flavors first through facebook and twitter and take request</p>
            <a href="http://www.facebook.com/smellslikebakin"><img src="img/facebook.gif" alt="facebook"></a>
            <a href="http://www.twitter.com/#!/smellslikebakin"><img src="img/twitter.gif" alt="twitter"></a>
            </div>
            <div id="copyright" class="grid_12">
                <p>&copy; 2012 Smells Like Bakin' Cupcake Company. All Rights Reserved </p>
            </div>

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

2 Answers

India Abraham
India Abraham
2,826 Points

Figured it out...there was an error in the normalize and grid.css files I downloaded originally from github

Tommy Morgan
STAFF
Tommy Morgan
Treehouse Guest Teacher
Tommy Morgan
Tommy Morgan
Treehouse Guest Teacher

Hey India Abraham -

Just a hunch, but based on your description I think your CSS paths might be wrong - try removing the web/ part (so css/normalize.css and css/grid.css).

Relative paths like that are defined from the context of your root folder, which in this case seems to be the web folder - so the fact that you mention the web folder in that relative path is probably confusing the browser :)

India Abraham
India Abraham
2,826 Points

@duwanis that didn't make a difference in the problem