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
Ian Zhao
734 Pointscan'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
18,047 PointsYou 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>
Ian Zhao
734 Pointsthx a bunch, mate!!!!
Bertan Ulusoy
18,047 Pointsyou're welcome Ian.
Ian Zhao
734 Points:) 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
18,047 PointsYes :) 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.
Ian Zhao
734 PointsYeah, I can see that. I'm so excited about the following stages. Looking forward to discussing more things with you. :)
Bertan Ulusoy
18,047 PointsOf course Ian. Whenever you want...
Ian Zhao
734 Pointshi, 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 :(
Ian Zhao
734 Points/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
Ian Zhao
734 Points
Bertan Ulusoy
18,047 PointsWhich video Ian?
Ian Zhao
734 PointsBuild a Simple Website video
Bertan Ulusoy
18,047 PointsI 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}
Ian Zhao
734 Pointsthx, 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
18,047 PointsOk. Send me your codes and if you explain in detail, I can help you.
Ian Zhao
734 Points<!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>© Ian Mountain Bike & Tent Company. All Rights Reserved.</p>
</div>
</div>
</body> </html>
Ian Zhao
734 PointsI'm not sure how to send u am image. Do u have an email box I can send my images to u?
Bertan Ulusoy
18,047 PointsWhere is your equal signs in front of your class attributes?
Ian Zhao
734 Pointsopps, 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.