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
Austin Liang
865 PointsSmells Like Bakin' Cupcakes positions are off
My final product of the html page does not look like the final product shown at the end of the video. I typed exactly as Nick did in the video, but I don't know why it doesn't look the same. For example, my "Inside the kitchen" is at the top of the page. Any help is appreciated. Thank you for taking the time to read this!
4 Answers
Austin Liang
865 Points<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 & 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 desserts.
</h1>
<p><a href="#" class="btn">Browse Our Cupcakes</a></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 Chocolate Cupcake</a>. Its 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="#">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>
<div class="grid_O7">
<h2>
Inside the Kitchen
</h2>
<p>
Smells Like Bakin' started out in teh garage of the husband wife duo Allison & 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' 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 & Twitter, and even take requests!
</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>
© 2012 Smells Like Bakin' Cupcake Company. All Rights Reserved.
</p>
</div>
</div>
</body>
I honestly don't know where the problem is...
christo
3,525 Points<div class="grid_O7">
<h2>
Inside the Kitchen
</h2>
<p>
Smells Like Bakin' started out in teh garage of the husband wife duo Allison & 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>
Change <div class="grid_O7"> to <div class="grid_7">
A typo like that will definitely push the "Inside the Kitchen" section to the top as it not longer lies within the grid system. What else is out of place?
It's possible you may not have typed everything as precisely as you thought. It's really easy to make a typo and have everything look weird. To the right of the tutorial page, there's a section called Downloads, where you can download the completed project file. You should go through that to see where the code differs.
Good luck!
Austin Liang
865 PointsThank you so much Christopher! I really appreciate it! Yes, next time I need to go back and do a triple check.
How do I unlink my copyright paragraph? It links to twitter along with the twitter sign. And I noticed that there is a small space between the pictures "Bacon Me Crazy" and "Jalapeno So Spicy". How do i create that small space?
Again, thank you so much for your help!
christo
3,525 PointsNo prob. As far as the space goes, I'm not sure what you're referring to. The way the tutorial is done, the two images are stacked on top of each other, not side by side. If you did want to remove the space between two displayed images and have them touching, perhaps you can play around with the margin in CSS, but I don't think that's done in this tutorial.
Austin Liang
865 PointsThanks for you time Chriso! I'm going to play around with the spacing for more practice, and also making sure I avoid careless mistakes in the future.
Nicole H
2,981 PointsHi Austin,
It looks like you need to add the closing tag for the image tag right after the alt attribute to fix the issue with the copyright paragraph being linked:
<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>
Austin Liang
865 PointsThank you very much Nicole. You're right, I was missing the closing brackets after img. I'll be more careful next time!
Nicole H
2,981 PointsNot a problem Austin! It is so easy to miss the slightest detail - I completely understand! I am glad I could help.
christo
3,525 Pointschristo
3,525 PointsHi Austin,
Could you post some of your HTML/CSS so we can see where the problem might be?