I Need Help Figuring Out if My Syntax is Messing up the Grid

Question

I'm certain it's my syntax since the top half of my page/the grid is positioned according to the columns we assigned it and renders fine in Chrome + Firefox. It's the "Inside the Kitchen" and the copyright divs I'm having trouble with, they're still positioned to the right side of the webpage even after I coded it for grid 7, 5, and 12. I'm not sure if the indentation is off or I could just be blind and coded it wrong.

<html>
<head>
    <meta http-quiv="content-type" content="text/html; charset=utf-8"/>
    <title>Smells Like Bakin&apos;</title>
    <link rel="stylesheet" href="websitewaters-island01-stage01/css/normalize.css" type="text/css" media="screen">
    <link rel="stylesheet" href="websitewaters-island01-stage01/css/grid.css" type="text/css" media="screen">
</head>

<body>
    <div class="container clearfix">
        <div class="grid_4">
        <img src="websitewaters-island01-stage01/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, esspecially in our kitchen! We combine unexpected flavors that melt togther to create ironically delicious desserts!</h1>
        <p><a href="#" class="btn">Browse Our Cupcakes</a></p>
        </div>
        <div class="grid_3 omega">
        <img src="websitewaters-island01-stage01/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 tastebuds into fiesta mode.
        </p>
        <img src="websitewaters-island01-stage01/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="websitewaters-island01-stage01/img/new-cupcake-bacon.jpg" alt="Bacon Me Crazy" />
        <img src="websitewaters-island01-stage01/img/new-cupcake-jalapeno.jpg" alt="Jalapeno So Spicy"
        </div>

        <div class="grid_7">
        <h2>Inside the Kitchen</h2>
        <p>
        Smells Like Bakin&apos; 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 front, catering business and cupcake truck. 
        </p>
        <p>
        <a href="#" class="btn-small">Read More</a>
        </p>
        </div>

        <div class="grid_5 omega">
        <h2>
            Get Bakin&apos; With Us
        </h2>

            <div id="contact">
            <p>Call us: <span>1-55-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="websitewaters-island01-stage01/img/facebook.gif" alt="Facebook /> </a>
        <a href="http://www.twitter.com/smellslikebakin><img src="websitewaters-island01-stage01/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>

Answer 1 · 2014-01-27T23:41:08Z

January 27, 2014 11:41pm

Hi Alexandria,

It's usually something really tiny that drives us up the wall looking for it, isn't it? ;-) In your code here, it looks like the closing tag for the jalapeño image is missing. Closing that should allow the next div to go on and do its thing.

Two other finds: line 3, "http-equiv" instead of "http-quiv", and did you mean to use absolute file paths for everything, with each image and file address starting with "websitewaters-island01-stage01/"? Since the index.html file is already in the same folder, you could just use relative paths for everything, like "css/grid.css".

Hope that helps!

Answer 2 · 2014-01-28T00:35:37Z

January 28, 2014 12:35am

It worked. It's always the little stuff! I move too fast for my own good sometimes. Thanks Jeff!

Funny, when I did relative my images would not show up, so it wasn't until I used the absolute file path that the images appeared which could of been b/c I had my index file outside of the website waters folder. Is it more professional or efficient to use relative paths?

Answer 3 · 2014-01-28T01:27:50Z

January 28, 2014 1:27am

Cool beans.

Yes, since you had your index.html outside of the folder, you had to use absolute paths. Try putting it (index.html) back inside the folder and then changing the 8-9 instances of paths starting with "websitewaters-island01-stage01/"... to relative (just "css/grid.css"). People will usually expect to find your index.html inside the main folder. Glad it worked!

Welcome to the Treehouse Community

Looking to learn something new?

Alexandria Brown

Alexandria Brown

I Need Help Figuring Out if My Syntax is Messing up the Grid

3 Answers

jeff creamer

jeff creamer

Alexandria Brown

Alexandria Brown

jeff creamer

jeff creamer