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
Jorja Currington
675 PointsDefinition 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
Jorja Currington
675 PointsYay! I finally figured it out! - I had two semi colons in there... Should have just been: ''' { background: #420600 url('img/texture.png') repeat; } ''' Hurray!
Jorja Currington
675 Points<div id="featured-cupcake" class="grid_7">
Scott Magdalein
1,667 PointsBasically, 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. :)
Jorja Currington
675 Pointsoh ok - so is it the use of the "omega" tags the tool used to bring 2 divs onto the same line?
Scott Magdalein
1,667 PointsAre you referring to a specific code challenge or video?
Jorja Currington
675 PointsNo, 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 :( .....
Scott Magdalein
1,667 PointsOh 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.
Jorja Currington
675 Points<div id="featured-cupcake" class="grid_7">
Jorja Currington
675 Pointsoops - it won't let me post any code...
Scott Magdalein
1,667 PointsSee the Markdown Cheatsheet for instructions on how to post code to the forums. It's right under the comment text field.
Jorja Currington
675 PointsThat helps a lot thanks. Thanks for the code tip too :)
Jorja Currington
675 PointsOne 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
3,776 PointsI haven't looked into this specific challenge, but have you tried removing the semi-colon after background: #420600? It should not be there :)
Scott Magdalein
1,667 PointsCan you link me to the specific code challenge?
Jorja Currington
675 Points
Jorja Currington
675 Pointstask 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..)
Jorja Currington
675 PointsYou were correct Martin! Thanks heaps
Mårten Björk
3,776 PointsGreat 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!
Jorja Currington
675 PointsThank 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