Thanks SamA74 
May I ask, if I go dont the cell route will the images behave responsively?
They can do if set up to be. That needs a bit more css than I put above, that’s just a starting point. You will need to set widths for the container and images. I can’t tell you the exact setup off the top of my head without trying it, but sure it’s possible.
Something along these lines
footer {
width: 100%;
background: #ddd;
display: table;
}
footer span {
display: table-cell;
width: 25%;
vertical-align: middle;
padding: 0;
}
footer span img {
display: block;
width: 90%;
margin: 6px auto;
}
David,
Give this demo a try. It is a working example of @SamA74s method with a small enhancement. (@SamA74s choice of elements would probably be more appropriate than mine.)
If you still prefer to go the non-table-cell route, let us know how you wish to do that and we can offer suggestions.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>table tester images in a row</title>
<!--
http://www.sitepoint.com/community/t/on-the-hunt-for-a-pure-css-slider-but-need-some-advice/192620/11
-->
<style type="text/css">
html {
box-sizing:border-box;
}
*, *::before, *::after {
box-sizing:inherit;
}
.outer {
width:96%;
max-width:1200px;
margin:0 auto;
border:2px dashed black; /* DEMO TEST Border set to show outer container width (page width?). May Be DELETED */
}
.twrap {
margin:0 -.8%; /* set negative left & right margin by trial and error to pull outer images to page edge. */
margin-top:16px; /* vertically separates tables for this DEMO Only. To Be DELETED. */
}
.table {
display:table;
table-layout:fixed;
width:100%; /* required */
}
.tcell {
display:table-cell;
outline:1px solid lime; /* TEST Outline. To Be DELETED */
}
img {
display:block;
width:94%;
height:auto;
margin:0 auto;
}
</style>
</head>
<body>
<div class="outer">
<div class="table">
<div class="tcell"><img src="http://placehold.it/300x200" alt=""></div>
<div class="tcell"><img src="http://placehold.it/300x200" alt=""></div>
<div class="tcell"><img src="http://placehold.it/300x200" alt=""></div>
<div class="tcell"><img src="http://placehold.it/300x200" alt=""></div>
</div>
<div class="twrap">
<div class="table">
<div class="tcell"><img src="http://placehold.it/300x200" alt=""></div>
<div class="tcell"><img src="http://placehold.it/300x200" alt=""></div>
<div class="tcell"><img src="http://placehold.it/300x200" alt=""></div>
<div class="tcell"><img src="http://placehold.it/300x200" alt=""></div>
</div>
</div>
</div>
</body>
</html>
Cheers
That’s an old trick, forcing justify with an additional element was first mentiond here, autumn 2008 iirc.
Sorry, again I can’t see your explaining images, next time can you please put your explainings somewhere easy accessible, not on a scripted-datamining-nonopen image service.
Why stop at four if there is room for more on a wide screen? Responsive size? they would become too large as thumbs on a wide screen and too small on narrow screens. With a forced justify method you can fill the row with thumbnails dependent on the viewport width, no need to resize or adapt. Hopefully you want to display a larger image on user interaction (and still wanting a pure css solution). With large images on mouseclick the thumbs only need to be interesting, not detailed, and if more than four the thumbs can be a little smaller, same size in different numbers.
I think I can toss up something of that kind if you like later on.
OT/ Thanks Discourse, my damnice browser just gave up and you saved my edit, Thanks!
A table solution with four resizing images could be something like this:
<!doctype html><html lang="en"><head><meta charset="utf-8">
<title>Untitled</title>
<style>
/* distributed edge to edge by table display */
html, body{ margin:0; padding:0}
.footer-thumbs{
display:table;
margin:auto;
padding:0;
list-style:none;
background:tan;
}
.footer-thumbs li{
display:table-cell;
text-align:center;
}
.footer-thumbs img{
display:block;
width:24.8vw;
width:calc(25vw - 1px);
height:18.6vw;
vertical-align:middle;
background:peru;
}
</style>
</head><body
<div id="footer">
<ul class="footer-thumbs">
<li><img src="" alt=""></li>
<li><img src="" alt=""></li>
<li><img src="" alt=""></li>
<li><img src="" alt=""></li>
</ul>
</div>
</body></html>
And a forced justify list according to my last post could be like this:
<!doctype html><html lang="en"><head><meta charset="utf-8">
<title>Untitled</title>
<style>
html, body{margin:0; padding:0; background:tan}
.footer-thumbs{
position:relative; /* referred to by the AP image */
margin:0;
border-bottom:30px solid tan; /* demo, hide the soft-wrapped line */
padding:calc(100vh - 150px) 30px 0; /* demo */
list-style:none;
text-align:justify; /* justify key */
height:120px;
overflow:hidden;
word-spacing:.4em; /* helps close the right hand wrapping edge gap, not noticed in this padded demo */
}
.footer-thumbs:after{ /* justify key rule */
margin-left:99%;
content:" \a0";
}
.footer-thumbs li{
display:inline-block; /* justify key */
width:180px;
height:120px;
background:white;
text-align:center;
}
.footer-thumbs img{
display:block;
background:peru;
}
.footer-thumbs li:nth-child(even) img{
background:gold;
}
.footer-thumbs a:focus img{
position:absolute;
right:0;
bottom:200px;
left:0;
margin:auto; /* on AP, it centers between the given positions */
width:88vw;
max-width:1000px;
height:66vw;
max-height:750px;
}
</style>
</head><body
<div id="footer">
<ul class="footer-thumbs">
<li><a href="#"><img src="*" width="180" height="120" alt=""></a></li>
<li><a href="#"><img src="*" width="180" height="120" alt=""></a></li>
<li><a href="#"><img src="*" width="180" height="120" alt=""></a></li>
<li><a href="#"><img src="*" width="180" height="120" alt=""></a></li>
<li><a href="#"><img src="*" width="180" height="120" alt=""></a></li>
<li><a href="#"><img src="*" width="180" height="120" alt=""></a></li>
<li><a href="#"><img src="*" width="180" height="120" alt=""></a></li>
<li><a href="#"><img src="*" width="180" height="120" alt=""></a></li>
<li><a href="#"><img src="*" width="180" height="120" alt=""></a></li>
</ul>
</div>
</body></html>
With an adaptive number of smaller thumbs you don’t need to resize them I think. Better have a responsive large display on user interaction.
See if you can use bits of them, I’ll post a link to a JsFiddler in a while.
Eric, why set the images width to 24.8vw? Why not just give the table width:100%; to stretch the screen and table-layout:fixed; to equally distribute, and call it a day? Might be missing something here, so I apologize if that’s the case. You’d negate cross-browser compatibility issues that vw/vh has by doing this.
Hi Ryan, I’m aware, thanks for the alert.
Making demos without real images has its quirks.
The table: http://jsfiddle.net/Erik_J/kavrab86/
The list: http://jsfiddle.net/Erik_J/08sutbme/
Those are saved as base versions.
Please edit the fiddles to your like and update. Post the updated URLs here, the base versions won’t change.
I took your advice, here is a test version for putting in real no fake images.
EDIT/ Saw some more to fix.
<!doctype html><html lang="en"><head><meta charset="utf-8">
<title>Forced Justified Items</title>
<style>
html, body{ margin:0; padding:0}
.footer-thumbs{
display:table;
table-layout:fixed;
margin:0;
padding:0;
width:100%;
list-style:none;
}
.footer-thumbs li{
display:table-cell;
text-align:center;
}
.footer-thumbs img{
display:block;
margin:0 -2px; /* fit the oversizing without scroll */
border:1px solid white;
width:100%; /* dynamically adapt image size to the cell */
height:auto; /* a real image has intrinsic lengths giving a height proportional to the percent width */
}
</style>
</head><body
<div id="footer">
<ul class="footer-thumbs">
<li><img src="" alt=""></li>
<li><img src="" alt=""></li>
<li><img src="" alt=""></li>
<li><img src="" alt=""></li>
</ul>
</div>
</body></html>
I was just wondering why you didn’t do it; or perhaps overlooked. I’m 100% sure you already know about it. Was just curious whether I overlooked some requirement by the OP 
. Thanks for putting it in. Definitely looks more “older-browser” friendly.
I’m on chromebook right now, so I can’t test manually, but you fixed the other stuff, right? I know you don’t need help but if you’re out of time, I can do a few fixes if you have to run .
Thanks Ryan, please do.
I haven’t kept up with the thread, but is something like this what the OP is after?
http://codepen.io/ryanreese09/pen/xGrBNX
Specific details about what needs to be changed is appreciated . Make a list if you want.
Yes I’ve had enough of photo bucket its just been an old habit that needs to change. In the past some forums made in a pain in the ass attaching images so I pledge from this moment on wards to ween my self off photo bucket. Now driving to the office to apply the footer suggestions
Thank you Ryan
Massively grateful for all the help I’m getting with my footer battles. So i popped back to the office thinking I’d add the code and bam all would be OK. But no after 90 mins I cant get the css to talk / connect to the HTML footer elements I think I’m going quite mad, I’m v tired so am no doubt doing something dumb but I cant spot it even after a gallon of coffee!
Originally Erik_J I patched your code it and it all worked then I must have deleted something and i cant recover it… Arggg!!! I then began to think the css selctors needing fiddling with as the
sites on top of
- if that makes any sense, any road nowt is working.
Below is a code pen of where i’m at, so didnt want to re post thought I had this in the bag!
http://codepen.io/Pingbat/pen/xbBQqE
Any insights welcome!
Took a quick look, nothing worked at all.
There seems to be a missing end bracket for the:
.hide_desktop {
display: none;
} <- this is missing
I have to go offline an hour or so, back later.
1 Like
Thanks Erik, very appreciated, will try to fix this Monday and will update
Erik_J Thank you so much that curly bracket fixed it
The popup on a mouseclick can be done like this, from your CodePen:
/* css footer help from sitepoint */
.footer-thumbs {
position: relative;
display: table;
margin: 0;
padding: 0;
width: 100%;
list-style: none;
}
.footer-thumbs li {
display: table-cell;
width: 25%;
background: rgba(255,255,255,.5);
}
.footer-thumbs img {
display: block;
box-sizing: border-box;
border: 1px solid white;
width: 100%;
height: auto;
}
.footer-thumbs a:focus img {
position: absolute;
right: 0;
bottom: 100%;
left: 0;
margin: 0 auto 30px;
width: 98%;
max-width: 900px;
}
<!--Sitepoint help-->
<div id="footer">
<ul class="footer-thumbs">
<li><a href="#"><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/footer-image-2_zps1nb0wtue.jpg" alt="" /></a></li>
<li><a href="#"><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/footer-image-2_zps1nb0wtue.jpg" alt="" /></a></li>
<li><a href="#"><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/footer-image-2_zps1nb0wtue.jpg" alt="" /></a></li>
<li><a href="#"><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/footer-image-2_zps1nb0wtue.jpg" alt="" /></a></li>
</ul>
</div>
While I’m at it; your CodePen page has a horizontal scroll caused by a too wide menu.
Here you can correct it:
line 232
#menu {
width: 98%; <-- 100%-2x1%
color: #F8F8F8;
background-color: #CCCCCC;
padding: 1%;
}
1 Like
Have you seen this? CSS only responsive slider - http://csscience.com/responsiveslidercss3/
I have been using it in my projects and even made a dynamic (works out number of images and CSS on the fly) version for use with Jekyll.