Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML Build a Simple Website Creating a Website Structure Using Classes

can't move on with the second task in Step 3

after adding div and class container and clear fix in the first task, it says that it seems Task 1 can't not pass when I add class grid_5 and omega in Task 2. Help!!!!

19 Answers

Bertan Ulusoy
Bertan Ulusoy
18,047 Points

You need to update code like this.

  <div class="container clearfix">
  <div id="featured-cupcake" class="grid_5 omega">
    <h2>Cupcake of the Week</h2>
    <img src="img/featured-cupcake.jpg">
  </div>
  </div>

thx a bunch, mate!!!!

:) looks like u r very active in treehouse. I just started to put my hand on this website last night. The video tutorial is AMAZING!

Bertan Ulusoy
Bertan Ulusoy
18,047 Points

Yes :) Another amazing thing is, you test yourself after that amazing videos. I learnt lots of things from these great people and there are many titles to learn. They are working like a bee.

Yeah, I can see that. I'm so excited about the following stages. Looking forward to discussing more things with you. :)

Bertan Ulusoy
Bertan Ulusoy
18,047 Points

Of course Ian. Whenever you want...

hi, I got a problem with the grid.css file. I can't see all the codes of the last line in the grid.css file presented in the video. All I have now is .clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;} There should be some more words after font-size:0 :(

/Users/zhaoian/Desktop/Screen Shot 2014-03-03 at 10.56.48 PM.png The bold words wouldn't come down to the next row

alt text

Build a Simple Website video

Bertan Ulusoy
Bertan Ulusoy
18,047 Points

I think this is what you want. I found it from my computer :)

/* Width: 1000px # Columns : 12 Column width: 65px Gutter : 20px

*/ .grid_1 { width: 65px; } .grid_2 { width: 150px; } .grid_3 { width: 235px; } .grid_4 { width: 320px; } .grid_5 { width: 405px; } .grid_6 { width: 490px; } .grid_7 { width: 575px; } .grid_8 { width: 660px; } .grid_9 { width: 745px; } .grid_10 { width: 830px; } .grid_11 { width: 915px; } .grid_12 { width: 1000px; }

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 { margin: 0 20px 10px 0; float: left; display: block; }

.alpha{margin-left:0px;} .omega{margin-right:0px;}

.container{ width: 1000px; margin: auto; }

.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1}

thx, but I still can't get the title to the next row. Do u mind if I send u my codes and files for you to check?

Bertan Ulusoy
Bertan Ulusoy
18,047 Points

Ok. Send me your codes and if you explain in detail, I can help you.

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset-utf-8"/> <title>Hello Ian</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/style.css" type="text/css" media="screen"> </head>

<body> <div class="container"> <div> <div class="grid_4"> <img src="img/logo.gif" alt="Ian"> </div>

    <div class"grid_8 omega">
        <ul class="nav">
            <li><a href="http://www.apple.com">About</a></li>
            <li><a href="#">Hiking</a></li>
            <li class="last"><a href="#">Contact Us</a></li>
            <li class="last"><a href="#">Contact Us</a></li>
        </ul>
    </div>
</div>

<div id="intro" class"grid_9">
    <h1>
        With a mountainbike and a tent, you can take full advantage of the coming Spring time by riding around, living with the nature and relaxing.
    </h1>
    <p><a href="#" class="butt">Browse All The Gears</a></p>
</div>

<div class="grid_3 omega">
    <img src="img/fly.jpg" alt="Fly">
</div>

<div id="mountainbikes" class="grid_9">
    <h2>
        Ride on
    </h2>
    <p> With all these <a href="#">amazing and fancy mountain bikes</a>, you can go anywhere you like.</p>
    <img src="img/bike.jpg" alt="bike">
</div>

<div id="tents" class="grid_7 omega">
    <h2>Live around</h2>
    <p>These <a href="#">amazing tents</a> are specifically designed to suit mountainbike lovers.</p>
    <img src="img/tent.jpg" alt="Latest tents">
</div>

<div class="grid_5">
    <h2>Why go out</h2>
    <p>Imagine a greenland with sunshine all around. The breeze is in the air. The temperture is just fine. Which would you prefer to do, sitting in your apartment watching TV and going out and get wet? </p>
    <p><a href="#">Read more.</a></p>
</div>

<div class="grid_7 omega">
<h2>Contact Us</h2>
<div id="contact">
    <p>
        Call us: <span>13812616201</span><br>
        Email us: <a href="ian.zhao@icloud.com">ian.zhao@icloud.com</a>
    </p>
</div>

</div>

<div class="grid_12">
    <p>&copy; Ian Mountain Bike &amp; Tent Company. All Rights Reserved.</p>
</div>

</div>

</body> </html>

I'm not sure how to send u am image. Do u have an email box I can send my images to u?

Bertan Ulusoy
Bertan Ulusoy
18,047 Points

Where is your equal signs in front of your class attributes?

opps, well. I've added the equal signs but still the page is not displaying properly. I'm sending u an image and my file for you to test for me. Thx a bunch buddy.