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

Definition of a clearfix

Hi there, I have no previous knowledge HTML. Have found myself getting a little confused with classes and ids. So basically my question is : "Does tagging a div as clearfix mean that it is pushing 2 or so divs together to run on one line?"

Help I'm so confused. Anyone have any reference material on this I can look at to help better my understanding? of also what omega's do?

Thanks

13 Answers

Yay! I finally figured it out! - I had two semi colons in there... Should have just been: ''' { background: #420600 url('img/texture.png') repeat; } ''' Hurray!

<div id="featured-cupcake" class="grid_7">

Basically, that technique will clear the floats on an element, which sort of "resets" the visual hierarchy so the next element starts on a new line. Hope that's "clear" enough to help. :)

oh ok - so is it the use of the "omega" tags the tool used to bring 2 divs onto the same line?

Are you referring to a specific code challenge or video?

No, I managed to get the code challenge correct. I'm just trying to get a better understanding of the terminology being used. I may have to repeat the previous section again... I'm coding along as the videos are going so I think I have missed some important things to note :(

Do you have a glossary I could perhaps refer to which can help me understand when exactly to use "ID'S" "classes", etc

For example: what does the following refer to: <div id="featured-cupcake" class="grid_7">

in simpler terms for someone who is an extreme beginner - and who should probably give up :( .....

Oh I see. Terms like clearfix and omega are strategies for organizing your webpage visually. They are not actual CSS elements. That means you have to define them explicitly in your CSS.

When to use classes and when to use IDs is a tricky subject. Typically, there isn't a wrong choice. But just remember that IDs tend to be used in more rigid situations and classes are used in more flexible situations. Like, you'd use a class to describe multiple paragraphs that all share the same styling. But you use an ID to describe the styling for a headline that has very unique styling.

Hope that helps.

<div id="featured-cupcake" class="grid_7">

oops - it won't let me post any code...

See the Markdown Cheatsheet for instructions on how to post code to the forums. It's right under the comment text field.

That helps a lot thanks. Thanks for the code tip too :)

One more thing - What have I done wrong here: '''/* Write your CSS below */ body { font-family: 'Nunito', sans-serif; color: #FAF3BC; background: #420600; url('img/texture.png') repeat; }''' in WEB DESIGN challenge task 4?

Mårten Björk
Mårten Björk
3,776 Points

I haven't looked into this specific challenge, but have you tried removing the semi-colon after background: #420600? It should not be there :)

Can you link me to the specific code challenge?

task 4... not sure what I'm doing wrong. I've written ''' background: #420600; url('img/texture.png') repeat; } ''' which should be correct? (also says to keep adding code so it's not that I need to delete the first colour part..)

You were correct Martin! Thanks heaps

Mårten Björk
Mårten Björk
3,776 Points

Great to see that you solved the challenge. Here's some more info on backgrounds:

You can set either a background-color or a background-image. It works like this:

background-color: green;

or

background-image: url(myimage.png);

You can also add one or more parameters after the url() part, like "repeat" and position. For instance, this code would make sure the background isn't repeated, and then put it in the top right corner of the element:

background-image: url(myimage.png) no-repeat right top;

If you want to combine background-color and background-image, you can use the "background" property, like you did:

background: red url(myimage.png) no-repeat right top;

Properties like "background", that combine many others into one, are called "shorthand properties" and are very good for writing short and neat code. You'll meet more of them further on. Hope it helps!

Thank you so much Martin, that's very helpful! I can't wait to begin building my own online design portfolio and a travel wesbite once I have finished these courses. I may have to refer to you for help from time to time haha