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 Sherri Hill
Sherri Hill
Courses Plus Student 1,111 Points

Smells Like Bakin Tutorial

I followed along with the tutorial and I have a few mistakes and I can't seem to find what I did wrong would like someone to help me with it if they could.. my page is not lined up the the example and my facebook and twitter logos have borers around them.. I have tried several things to see if I could see why this was happening but not very good at this sort of thing.. if someone could look at the code and let me know what I did wrong I would be so thankful.

here is the html file

<!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="css/normalize.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
    <link href='http://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/styles.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! We combine unexpeted 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_7">    
              <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
              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></p><br>
             Email us:<a href="#">bakeon@smellslikebakin.com</a>
              </div>
             <p>We announce all of our new flavors first thorough Facebook &amp; Twitter, and even 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="Twiter"</a>
            </div>
        <div id="copyright" class="grid_12">
         <p>&copy; 2011 Smells Like Bakin' Cupcake Company. All Rights Reserved.</p>
        </div>
    </div>
</body>
</html>

and this is the CSS file

body {
    font-family: 'Nunito', sans-serif;
    color: #FAF3BC;
    background: #420600 url('img/bg-texture.jpg') repeat;
}

a {
    color: #4FB69F;
    text-decoration: none;
}

h1 {
    font-size: 1.750em;
    letter-spacing: -1.5px;
}

h2 {
    font-size: 1.500em;
    color: #B4C34F;
}

.btn {
    color: #FAF3BC;
    background: #4FB69F url('img/texture.png') no-repeat right top;
    padding: 15px 30px;
    margin: 40px 0px;
    border-radius: 25px;
    text-transform: uppercase;
}

.btn:hover {
    background-color: #4CC4A7;
}

ul.nav {
    margin: 120px 0 0 0;
    list-style: none;
    float: right;
}

ul.nav li {
    float: left;
    margin-right: 40px;
}

ul.nav li a {
    color: #FAF3BC;
}

#intro {
    margin: 50px 0 75px 0;
}

#new-cupcakes img {
    border: 8px solid #FAF3BC;
    margin:  0 0 20px 0;
}

#featured-cupcake img {
     border: 8px solid #FAF3BC;
}

#copyright {
    border-top: 8px solid #2A0400;
    padding:  10px 0px;
    margin:  15px 0px;
    text-align: center;
}

3 Answers

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

Your markup isn't valid. Head over to http://validator.w3.org/nu/ and fix the issues it flags with your code then you should be good to go.

shervin mashayekh
PLUS
shervin mashayekh
Courses Plus Student 11,915 Points
shervin mashayekh
shervin mashayekh
Courses Plus Student 11,915 Points

one problem that i saw in your code is you don't close the img tag in your "featured-cupcake" div your tag is look like this

<img src="img/featured-cupcake.jpg" alt="Avocado Chocolate Cupcake"

but it should look like this 

<img src="img/featured-cupcake.jpg" alt="Avocado Chocolate Cupcake">

and for your facebook and twitter logos you have the same problem your code is looking like this 

<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="Twiter"</a>

but it should looking like this 

<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="Twiter"></a>
Sherri Hill
PLUS
Sherri Hill
Courses Plus Student 1,111 Points
Sherri Hill
Sherri Hill
Courses Plus Student 1,111 Points

Thank you so much. I have been going crazy trying to fix it watching it over and over. Was about to give up thanks for your help. Can't believe by leaving out those two little > it would mess up that bad. Guess I need to pay closer attention to the code. Thanks again

shervin mashayekh
shervin mashayekh
Courses Plus Student 11,915 Points

your welcome my freind i suggest because your starting to write codes use text editors that do closing tags automaticaly for your like Sublime text for downloading it you can go to http://www.sublimetext.com/

shervin mashayekh
shervin mashayekh
Courses Plus Student 11,915 Points

your welcome my friend i suggest use some text editors that do the closing tags for u like sublime text or text mate if your in mac for sublime to can go to http://www.sublimetext.com/ and for the text mate you can use http://macromates.com/.