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

Kristina Millikan
Kristina Millikan
588 Points
Posted by Kristina Millikan
Kristina Millikan
588 Points

Rookie stuck on the grid tutorial

Hello all. I'm new to web developing and I'm working my way through the HTML and CSS tutorials which so far have been very clear and helpful. But I'm stuck in the grid tutorial. As far as I can tell I've applied all the grid classes exactly as instructed and my page doesn't look like it's supposed to. When I've tried removing the coding for normalize or the grid the page changes, so I know the files are loaded properly, but after my logo and navigation everything is being laid out single file down the page. I keep checking the coding over and over again but I can't find any discrepancies. Would anybody be kind enough to look over what I've done and figure out why things won't lay side-by-side like they're supposed to? I'd be most grateful. BTW I've tried in internet explorer and google chrome and it looks the same in both so I don't think it's a browser issue.

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf=8"/>
    <title> Smells Like Bakin' Cupcake Company</title>
    <link rel="stylesheet" href="C:\Users\Kristina\Documents\HTML\Resources\css\normalize.css" type="text/css" media="screen">
    <link rel="stylesheet" href="C:\Users\Kristina\Documents\HTML\Resources\css\grid.css" type="text/css" media="screen">
</head>
<body>
    <div class="container clearfix">
        <div class="grid_4">
            <img src="C:\Users\Kristina\Documents\HTML\Images\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! We combine unexpected flavors that melt together to create ironically delicious deserts.</h1>
            <p> <a href="#" class="btn"> Browse Our Cupcakes</a></p>
        </div>
        <div class="grid_3">
            <img src="C:\Users\Kristina\Documents\HTML\Images\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 combination of flavors will kick your tastebuds into fiesta mode!</P>
                <img src="C:\Users\Kristina\Documents\HTML\Images\featured-cupcake.jpg" alt="Avocado Chocolate Cupcake">
        </div>
        <div id="New Cupcakes" class="grid_5 omega">
            <h2>Fresh out of the Oven</h2>
            <p>Our newest cupcakes are <a href="#"> Bacon Me Crazy</a> and <a href="#"> Jalapen&#771;o So Spicy</a></p>
            <img src="C:\Users\Kristina\Documents\HTML\Images\new-cupcake-bacon.jpg" alt="bacon me crazy">
            <img src="C:\Users\Kristina\Documents\HTML\Images\new-cupcake-jalapeno.jpg" alt="jalapeno so spicy">
        </div>
        <div class="grid_7">
            <h2>Inside the Kitchen</h2>
            <p>Smells Like Bakin' started in the garage of the husband wife duo Allison &amp; Joseph. Allison is the baker, and Joseph found a way to make a business from 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' 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>
                </p>
            </div>
            <p>We announce al of our new flavors first through Facebook &amp; Twitter, and even take requests!</P>
            <a href="http://www.facebook.com/SmellsLikeBakin"><img src="C:\Users\Kristina\Documents\HTML\Images\facebook.gif" alt="facebook"</a>
            <a href="http://www.twitter.com/SmellsLikeBakin"><img src="C:\Users\Kristina\Documents\HTML\Images\twitter.gif" alt="twitter"></a>
        </div>
    <div id="copyright" class="grid_12">
        <p>&copy; 2012 Smells Like Bakin' Company. All rights reserved.</p>
    </div>
</div>
</body>
</html>

8 Answers

Keith Kelly
Keith Kelly
21,326 Points
Keith Kelly
Keith Kelly
21,326 Points

I see a couple syntax errors that may be causing your problem.

  1. The image inside grid_3 for "You Bake Me Blush" is not closed properly. You need to add the ending ">".
  2. The div with id contact does not have an equals sign between id and "contact". Instead it looks like you may have accidentally typed a '.

I would correct those couple typos and see if that corrects your issue.

Kristina Millikan
Kristina Millikan
588 Points
Kristina Millikan
Kristina Millikan
588 Points

Shoot- I guess first can someone tell me why the forum didn't post my code as I typed it? #frustrated :(

Keith Kelly
Keith Kelly
21,326 Points
Keith Kelly
Keith Kelly
21,326 Points

Make sure you have the markdown formatted properly. Here is a post for posting code to the forum that explains the markdown.

Jeff Busch
Jeff Busch
19,287 Points
Jeff Busch
Jeff Busch
19,287 Points

Hi Kristina,

If you look to the bottom right of the text box you will see something that says Markdown Cheetsheet. Also, there is a post here titled: Posting Code to the Forum by Dave McFarland. If you don't understand that maybe this will make sense: How to display code at Treehouse.

Jeff

Kristina Millikan
Kristina Millikan
588 Points
Kristina Millikan
Kristina Millikan
588 Points

Thanks for the responses. Did the tic thing and got the code to display. Is there some way to keep it from getting cut off or do I have to hit return in the middle of every line of code? That seems rather cumbersome...

Keith Kelly
Keith Kelly
21,326 Points
Keith Kelly
Keith Kelly
21,326 Points

The code is still there. It just needs to be scrolled. There is no line wrapping when posting code using the markdown.

Kristina Millikan
Kristina Millikan
588 Points
Kristina Millikan
Kristina Millikan
588 Points

Haha I totally didn't see the scroll bar- thanks Keith! Now that the code is posted properly I hope somebody can make sense of what I'm doing wrong because I'm completely stumped. Thanks to everyone so far for helping me!!

Jeff Busch
Jeff Busch
19,287 Points
Jeff Busch
Jeff Busch
19,287 Points

Kristina, before I ask you to show your css we are going to fix you file paths. First, you have replace the forward-slashes (/) with back-slashes (**). Then remove the drive designation (C:). Also, you don't need absolute paths. For example if your **index.html is in Resources directory like this: Resources/index.html and your grid.css is in Resources/css/grid.css, then your link in your head should look like

<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">

Go over the index and fix all the paths. Try this first.

Kristina Millikan
Kristina Millikan
588 Points
Kristina Millikan
Kristina Millikan
588 Points

Thank you for your response, but when I changed the file names as you described they stopped loading properly. Hopefully there is no detriment to typing the file names as I described because it is the only way they seem to load on my computer. Fortunately I've fixed the syntax and the issue has been resolved, so thank you for reading and responding to my inquiry it is much appreciated.

Kristina Millikan
Kristina Millikan
588 Points
Kristina Millikan
Kristina Millikan
588 Points

Thank you Keith- that was it!! So funny how one little bracket can mess up an entire page like that. You're the best- thanks for getting me back on track!!! :D

Keith Kelly
Keith Kelly
21,326 Points
Keith Kelly
Keith Kelly
21,326 Points

No problem, glad I could help! Those type of issues are easier to spot if you look at the syntax highlighting. Something that is oddly colored tends to indicate that something just before it may be off.