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 trialAshish Mehra
Courses Plus Student 31 Pointsbackground 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
3 Answers
redcamel2
4,751 PointsDo you have the css file linked to the html file?
Ashish Mehra
Courses Plus Student 31 Pointsyes
redcamel2
4,751 PointsTry doing the full color
#222222;
Ashish Mehra
Courses Plus Student 31 Pointsnot working after#222222 also
redcamel2
4,751 PointsAre you getting a syntax error?
Ashish Mehra
Courses Plus Student 31 Pointsno there is no syntax error as background appear when i apply height:400px ...!
redcamel2
4,751 PointsWhat class/id are you putting the background declaration your having trouble with?
redcamel2
4,751 PointsAre you gonna answer my question? I know your still on here...
Ashish Mehra
Courses Plus Student 31 PointsThanks for your help now it's working properly
redcamel2
4,751 PointsPlease put my answer if it helped best answer.
Bob McCarty
Courses Plus Student 16,618 PointsBob McCarty
Courses Plus Student 16,618 PointsThe 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".