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

CSS

How can I set background color for the gallery properly?

Hello. I got one problem. I can not set the background color for the gallery (where the photos are) properly. Here is my project from the WorkSpaces:

http://cdpn.io/jEMbgm https://gist.github.com/anonymous/c711d18bc6cd97d79694

I would be really happy if some one helped me :) Thanks!

Darren Healy
seal-mask
.a{fill-rule:evenodd;}techdegree
Darren Healy
Front End Web Development Techdegree Student 23,565 Points

Hi Linas,

Do you want a background color for the entire gallery, or a background color for the items within the gallery?

For background color for entire gallery I would try applying css to the section or div tag containing the gallery elements. Then style appropriately using css to be full width, or the appropriate style you are after.

Darren

Hi. I want all the background behind the heading (Gallery) and the photos where its color is white now, to be light purple like on the top of the page.

I tried set the background color for the div with id "photo", but it only colors the background of headind "Gallery".

1 Answer

Brad Bucceri
Brad Bucceri
7,102 Points

Hi Linas,

I would be inclined to think that the issue you're having is related to the fact that some of the elements within the div with the id of "photos" are floated, removing them from the normal flow of the document.

The reason the background of the title is being coloured is because all title elements such as H1, H2, H3 etc will display as a "block" by default.

Try looking into "clearing" floated items as I think this may help.

Brad

Hi. Thanks. But when I remove floating, all of the photos are displayed in one column, but then background color is displayed. How can I organise photos to two columns and make the background colored?

Brad Bucceri
Brad Bucceri
7,102 Points

In the CSS Foundations course you will find a module called "The Box Model". Work through those lessons and you will learn about why floated elements behave in the way that they do and how to deal with "clearing" them.

Here is a link to the course: http://teamtreehouse.com/library/css-foundations

Ok. Thanks. I am learning this course now :) I hope I will solve my problem.