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

General Discussion

Posted by Scooter D
Scooter D
9,611 Points

div classes question

I am doing a code challenge and can't quite get this right or now what im doing wrong.

Step one of the challenges asks me to "Add a 'div' around the "featured-cupcake' element and give it the classes 'container' and 'clearfix'.

<!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">
</head>

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

I pass that one, the second part asks "Add the classes 'grid_5' and 'omega' to the featured-cupcake element.

<!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">
</head>

<body>
    <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>
</body>
</html>

I didn't think I could have two "classes" in a div id and I keep getting "It looks like Task1 is wrong" when I add the classes to the featured-cupcake div id. When I create another separate div class, it says the featured cupcake is missing classes.

How do I do this?

7 Answers

Gareth Redfern
Gareth Redfern
36,217 Points
Gareth Redfern
Gareth Redfern
36,217 Points

Hi Scott, the problem is with this line:

<div id="featured-cupcake class=grid_5 omega">

You need to close the is with another " and start the class with " like this:

<div id="featured-cupcake" class="grid_5 omega">

Hope that helps.

Robert Gee
PLUS
Robert Gee
Courses Plus Student 3,190 Points
Robert Gee
Robert Gee
Courses Plus Student 3,190 Points

<div id="featured-cupcake" class="grid_5 omega">

Scooter D
Scooter D
9,611 Points
Scooter D
Scooter D
9,611 Points

Thank you!! As I was practicing along with the videos I wasn't ever adding "" in with class.

I'm guessing in my practice sheets I should probably add those in.

Thanks, I appreciate the help!

Gareth Redfern
Gareth Redfern
36,217 Points
Gareth Redfern
Gareth Redfern
36,217 Points

No worries Scott, glad I could help.

Yes you always need to separate your id's and classes using id="" and class="". You can have multiple classes on elements by separating them with a space but you can't have multiple id's on the same element, you can also only have one id of the same name per page but you can have multiple classes of the same name.

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

@Scott - For consistency's sake I quote all of my HTML attributes, classes, IDs, hrefs and any other attributes I use.

Pablo Litardo
Pablo Litardo
6,241 Points
Pablo Litardo
Pablo Litardo
6,241 Points

Ugh i had the same problem but now i fixed it, Thanks Lots !!!

Jonathan Holbrook
Jonathan Holbrook
267 Points
Jonathan Holbrook
Jonathan Holbrook
267 Points

Huge help! I couldn't recall the instructor really going over that in detail. Seemed very difficult for a true web design noobie like myself to decipher. Maybe it was a ploy to get me to use the boards...