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
Adam Smallman
4,182 Pointsresponsive image panel
How would i code a responsive image panel just like this one (http://www.jonathandacosta.com/work/) I have tried putting the images in a ul and putting display:table-cell; and on the images i put width:100%; and height:auto; and it works but the ul's separate from the ul's underneath when resizing the browser…
any one know how to achieve this ?
Adam Smallman
4,182 PointsIm so close now, the only problem I'm having is when you resize the browser the hl's come away from the right of the browser here is the link (http://brothersindesign.com) refresh page if its messy.
Thanks very much for the help
HTML ``` <!DOCTYPE html> <html lang="en">
<head>
<title>mock</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/reset.css" >
<link rel="stylesheet" href="css/stylesheet.css">
<link href='http://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Julius+Sans+One' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
</script>
</head>
<body>
<div class="head">
<ul class="nav">
<li><a href="#">Work</a></li>
<li>-</li>
<li><a href="#">Journal</a></li>
<li>-</li>
<li><a href="#">About</a></li>
<li>-</li>
<li><a href="#">Contact</a></li>
</ul>
</div><!--
--><div class="work">
<ul>
<li><span>
<div class="view">
<img src="img/one.jpg" />
<div class="mask">
<h2>Title</h2>
<a href="#" class="info">Read More</a>
</div>
</div>
</span></li><!--
--><li><span>
<div class="view">
<img src="img/two.jpg" />
<div class="mask">
<h2>Title</h2>
<a href="#" class="info">Read More</a>
</div>
</div></span></li>
</ul>
<ul>
<li><span>
<div class="view">
<img src="img/one.jpg" />
<div class="mask">
<h2>Title</h2>
<a href="#" class="info">Read More</a>
</div>
</div>
</span></li><!--
--><li><span>
<div class="view">
<img src="img/two.jpg" />
<div class="mask">
<h2>Title</h2>
<a href="#" class="info">Read More</a>
</div>
</div></span></li>
</ul>
<ul>
<li><span>
<div class="view">
<img src="img/one.jpg" />
<div class="mask">
<h2>Title</h2>
<a href="#" class="info">Read More</a>
</div>
</div>
</span></li><!--
--><li><span>
<div class="view">
<img src="img/two.jpg" />
<div class="mask">
<h2>Title</h2>
<a href="#" class="info">Read More</a>
</div>
</div></span></li>
</ul>
</div>
</body> </html> ```
CSS
img {
width: 100%;
height: auto;
}
.head{
width:100%;
height:2em;
background-color:#2b2b2b;
position:relative;
}
.nav{
float:right;
margin-right:10em;
margin-top:0.40em;
}
.head .nav li{
display:inline-block;
color:#ffffff;
}
.head .nav li a{
color:#ffffff;
text-decoration:none;
text-align:center;
font-family: 'Oxygen', sans-serif;
font-size:0.90em;
}
.head .nav li a:hover{
border-bottom:1px #ffffff solid;
}
.work{
}
<!--
ul {
margin:0; /*CSS reset*/
padding:0;/*CSS reset*/
height:auto;
width:auto;
display:flex;
table-layout: fixed;
}
li{
border:0;
margin:0;
padding:0;
display:table-cell;
text-align: center;
}
-->
.work ul{
position:relative;
float:left;
width:100%;
height:100%;
padding:0;
margin:0;
}
.work ul li{
width: 50%;
border-collapse:collapse;
float:left;
padding:0;
margin:0;
}
.work ul li img{
display: block;
height: auto;
width: 100%;
}
.view {
width: 100%;
height: auto;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.view .mask, .view .content {
width: 100%;
height: 400px;
position: absolute;
overflow: hidden;
top: 0;
left: 0
}
.view h2 {
text-transform: uppercase;
color: #ffffff;
font-family: 'Oxygen', sans-serif;
text-align: center;
position: relative;
font-size: 17px;
margin: 10em 0 0 0
}
.view a.info {
font-family: 'JuliusSansOne', sans-serif;
font-size:15px;
color:#ffffff;
position:relative;
top:2em;
}
.view a.info:hover {
color:blue;
}
.view img {
transition: all 0.2s linear;
}
.view .mask {
opacity: 0;
background-color: black;
transition: all 0.4s ease-in-out;
}
.view h2 {
transform: translateY(-100px);
opacity: 0;
transition: all 0.2s ease-in-out;
}
.view info{
opacity: 0;
transition: all 0.2s ease-in-out;
}
.view:hover img {
transform: scale(1.1);
}
.view:hover .mask {
opacity: 1;
}
.view:hover h2,
.view:hover p,
.view:hover a.info {
opacity: 1;
transform: translateY(0px);
}
.view:hover a.info {
transition-delay: 0.2s;
}
1 Answer
Chris Dziewa
17,781 PointsCould having it set to display:table-cell be causing you those problems since in a table there are generally borders between cells? A good rule-of-thumb is never use tables for layout. Try using display: inline-block instead. Also is there a particular reason why you need to use ul's for your images? Why not simplify it and create a container div with image divs inside. Ul's are nice for navigation and text but I would probably never use them for other content.
James Barnett
39,199 Points> A good rule-of-thumb is never use tables for layout.
CSS Tables don't have quite the issues as HTML tables, read more about that in this article: http://ajaxian.com/archives/display-table
Chris Dziewa
17,781 PointsInteresting find James, will keep that in mind, thanks!
James Barnett
39,199 PointsJames Barnett
39,199 PointsWell there are lots of media queries involved. Show us what you've go so far in a codepen, then we might be offer more specific suggestions.