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.

CSS

background color in portfolio <div>

Hey i am coding my website portfolio section but i m unable to set background color for portfolio ... here is my code...

 <div id="portfolio" class="group">
          <li class="projects">
             <img src="bk1.jpg">
              <div class="img_title">
                 <p class="title">Project 1</p>
              </div>
              <span class="desc">WORK @</span>
          </li>
           <li class="projects">
             <img src="bk1.jpg">
             <div class="img_title">
                 <p class="title">Project 2</p>
             </div>
             <span class="desc">WORK @</span>
          </li>
           <li class="projects">
             <img src="bk1.jpg">
             <div class="img_title">
                 <p class="title">Project 3</p>
             </div>
             <span class="desc">WORK @</span>
          </li>
           <li class="projects">
             <img src="bk1.jpg">
             <div class="img_title">
                 <p class="title">Project 4</p>
             </div>
             <span class="desc">WORK @</span>
          </li>
          <li class="projects">
             <img src="bk1.jpg">
             <div class="img_title">
                 <p class="title">Project 5</p>
             </div>
             <span class="desc">WORK @</span>
          </li>
          <li class="projects">
             <img src="bk1.jpg">
             <div class="img_title">
                 <p class="title">Project 6</p>
             </div>
             <span class="desc">WORK @</span>
          </li>
          <li class="projects">
            <img src="bk1.jpg">
            <div class="img_title">
                 <p class="title">Project 7</p>
             </div>
             <span class="desc">WORK @</span>
          </li>
          <li class="projects">
             <img src="bk1.jpg">
             <div class="img_title">
                 <p class="title">Project 8</p>
             </div>
             <span class="desc">WORK @</span>
          </li>  
      </div>
#portfolio{
   width: 100%;
   background: #222;
}
#portfolio li{
  float: left;
  display: inline-block;
  cursor: pointer;
  position: relative;
}
#portfolio .desc{
  position: absolute;
  background: #222;
  color: #fff;
  padding: 10px 20px;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  cursor: pointer;
}
.projects{
  width: 24%;
  margin:10px 0.5%;
}
.img_title{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  text-align: center;
  transition:all 0.4s;
  -webkit-transition:all 0.4s;
}
.title{
  font-family: 'Fredoka One', cursive;
  margin-top: 70px;
  font-weight: bolder;
  font-size: 2.5em;
  transform : scale(0.2);
  -webkit-transform: scale(0.2);
   transition:all 0.25s;
  -webkit-transition:all 0.25s;
}
#portfolio li:hover .img_title{
   opacity: 1;
}
#portfolio li:hover .title{
  transform : scale(1);
  -webkit-transform: scale(1);
}

/* About */


/* section */

.group:after{
  clear:both;
  content:"";
}

but when i apply height in #portfolio like height:400px background appears

Bob McCarty
Bob McCarty
Courses Plus Student 16,618 Points

The floated <li> tags cause the parent div to collapse, in this case <div id="portfolio"> I notice the list elements,<li>, lack an enclosing parent <ol> or <ul> tag. To begin, I suggest adding an enclosing parent list tag, <ol> or <ul>. Next style the parent <ol> or <ul> tag with an "overflow: auto;" styling, or define a height. You can also try adding the class .group to the parent list tag. <ol> or <ul>. Update the clearfix styling to include "display: table; ".

Placing borders around containers helps identify their location and size. For example, styling a border around the #portfolio selector will demonstrate its collapsed state. For debug purposes, try "{border: 4px solid red;}".
Change the border color by container element selector i.e. <div>, <ul>, <li> etc. Displaying these borders clearly identifies the layout.

For further help, you can google, "css floats and collapse".

3 Answers

Do you have the css file linked to the html file?

yes

Try doing the full color

#222222;

not working after#222222 also

Are you getting a syntax error?

no there is no syntax error as background appear when i apply height:400px ...!

What class/id are you putting the background declaration your having trouble with?

Are you gonna answer my question? I know your still on here...

Thanks for your help now it's working properly

Please put my answer if it helped best answer.