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

Posted by Ashish Mehra
Ashish Mehra
Courses Plus Student 31 Points

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
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

redcamel2
redcamel2
4,751 Points
redcamel2
redcamel2
4,751 Points

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

Ashish Mehra
Ashish Mehra
Courses Plus Student 31 Points

yes

redcamel2
redcamel2
4,751 Points

Try doing the full color 

#222222;
Ashish Mehra
Ashish Mehra
Courses Plus Student 31 Points

not working after#222222 also

redcamel2
redcamel2
4,751 Points

Are you getting a syntax error?

Ashish Mehra
PLUS
Ashish Mehra
Courses Plus Student 31 Points
Ashish Mehra
Ashish Mehra
Courses Plus Student 31 Points

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

redcamel2
redcamel2
4,751 Points

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

redcamel2
redcamel2
4,751 Points

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

Ashish Mehra
PLUS
Ashish Mehra
Courses Plus Student 31 Points
Ashish Mehra
Ashish Mehra
Courses Plus Student 31 Points

Thanks for your help now it's working properly

redcamel2
redcamel2
4,751 Points

Please put my answer if it helped best answer.