Thanks to alot of help from members Ive got a grid look that has got things moving in the right direction for me.
However I was wondering how do you add a cell border color? Below is an illustration of the problem and associated
code pen.Thanks in advance,
David
@RyanReese Hey Ryan, thanks for your advice but I’ll be honest its over the top of my head 
Ive applied SamA74 solution and its looking good to me.
I would probably add the border to the img element
.picgrid ul li img { border: solid 3px #fff ; }
This is if you only have only one row. I think you have to define the rows if you have multiple rows.
Another suggestion, for your .picgrid, rather than defining the width with margins
.picgrid {
display: table;
margin-left: 25%;
marging-right: 25%;
}
Try a % width and maybe a set max-width. Eg:-
.picgrid {
display: table;
margin 0;
width: 80%;
max-width: 600px;
}
Correct. IIRC you didn’t (I haven’t looked again 
)
There are several methods. If the border is shared by the images and consistent, then applying a background-color and border-spacing to the table is the easiest.
border-spacing must be declared in px, not percents nor ems.
.picgrid {
border-spacing:16px 16px; /* horiz vert */
background-color:#bdf; /* color of your choice */
}
You would need to delete the percent padding from .picgrid ul li {}
Thanks Ronpat & Ryan, your suggestions got what i was after 
Now to figure out how to replicate that click on image get bigger image effect!
Hello!
Do you know what a lightbox is? In jQuery (or JS)?
I just linked to one in another topic.
http://www.sitepoint.com/community/t/back-buttons-and-pdfs-or-jpg-popups/194303/3
David, Do you want to click on a smaller image to show a larger image and then click again to close the larger image? Since the site seems to be designed for a desktop sized viewport, you could use hover instead of clicks. Do you want the larger image displayed in the same window as the thumb or do you want it displayed in a lightbox?
I posted an example of this in your other thread: On the hunt for a pure css slider but need some advice - #15 by Erik_J
It’s the second list, not a table but the view-image code is the same. The images can’t get focus on their own, but wrap them in an anchor tag that can recieve focus:
<!-- Sitepoint grid help-->
<div class="picgrid">
<ul>
<li><a href="#"><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/york-marriott-wedding-500-500_zps1ylrmhng.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/york-marriott-wedding-500-500_zps1ylrmhng.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/york-marriott-wedding-500-500_zps1ylrmhng.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/york-marriott-wedding-500-500_zps1ylrmhng.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/york-marriott-wedding-500-500_zps1ylrmhng.jpg" alt=""/></a></li>
</ul>
<ul>
<li><a href="#"><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/york-marriott-wedding-500-500_zps1ylrmhng.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/york-marriott-wedding-500-500_zps1ylrmhng.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/york-marriott-wedding-500-500_zps1ylrmhng.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/york-marriott-wedding-500-500_zps1ylrmhng.jpg" alt=""/></a></li>
<li><a href=""#><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/york-marriott-wedding-500-500_zps1ylrmhng.jpg" alt=""/></a></li>
</ul>
<ul>
<li><a href="#"><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/york-marriott-wedding-500-500_zps1ylrmhng.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/york-marriott-wedding-500-500_zps1ylrmhng.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/york-marriott-wedding-500-500_zps1ylrmhng.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/york-marriott-wedding-500-500_zps1ylrmhng.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/york-marriott-wedding-500-500_zps1ylrmhng.jpg" alt=""/></a></li>
</ul>
</div>
Took the css from your codepen and added the AP click to view ruleset so you can play with it and see if you can use it:
/* Sitepoint grid layour help */
.picgrid {
position:relative;
display: table;
border-spacing: 16px 16px;
background-color: #bdf;
margin-left: auto;
margin-right: auto;
max-width: 800px;
}
.picgrid ul {
display: table-row;
}
.picgrid ul li {
display: table-cell;
padding: 0%;
}
.picgrid ul li img{
border:0;
width:150px;
}
.picgrid ul li a:focus img{
position:absolute;
right:0;
bottom:0;
left:0;
margin:auto; /* on AP, it centers between the given positions */
width:80%;
max-width:800px;
height:auto;
}
Then your footer-thumbs css width/height rules should change now with the real thumb images in the html:
/* css footer help from sitepoint */
.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;
padding: 0;
border: 1px solid white;
width: 99%;
height: auto;
vertical-align: top;
background: peru;
}
With the above alternative you don’t need script just to show/hide larger images with a mouseclick on the thumbs.
Come to think of: The anchor’s empty fragment identifier targets the page itself and can cause a jump depending on scroll position.
Avoid the eventual jump by switch to/add an id-name to the image container and let the anchors target that id.
Example:
<!-- Sitepoint grid help-->
<div class="picgrid" id="picgrid">
<ul>
<li><a href="#picgrid"><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/york-marriott-wedding-500-500_zps1ylrmhng.jpg" alt=""/></a></li>
<li><a href="#picgrid"><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/york-marriott-wedding-500-500_zps1ylrmhng.jpg" alt=""/></a></li>
Should have made the effort and test the example code in your Codepen before posting.
If the image pops up under the mouse when the button is released it will loose focus and not stay up. The easy fix is to move the popup to not position under the mouse.
Ok, example tested in your Codepen:
/* Sitepoint gride layour help */
.picgrid {
display: table;
border-spacing: 16px 16px;
background-color: #bdf;
margin-left: auto;
margin-right: auto;
max-width: 800px;
}
.picgrid ul {
display: table-row;
}
.picgrid ul li {
position:relative; <-- moved from parent container
display: table-cell;
padding: 0%;
}
.picgrid ul li img{
border:0;
width:150px;
height:auto;
}
.picgrid ul li a:focus img{
position:absolute;
z-index:1;
right:-300px;
bottom:90%; /* relative the thumb's bottom */
left:-300px;
margin:auto; /* on AP, it centers between the given positions - adjust center with differing values */
width:auto;
height:auto;
max-width:750px; /* widest image that will centre within the values above */
}
I do love the light box effect but i want to avoid any jquery because if anything goes wrong with the jquery i am totally clueless whereas with HTML and CSS i am at best 50% clueless!
I’m not too good with anything js related, but that lightbox script is easy to use, the work is done for you already. You just copy the scripts, a css file and a few images to your site, then link to them on your page. The only thing you may need to edit in the script are the file paths to the images (close, next, prev icons), which is not difficult.
Adding the picture links to the page is just done by html anchors.
@Erik_J Wow thank you so much for your generous help! Just added the code to test the first two images and very happy
Grazie tante Erik, Codepen result below (Will apply footer solution later)
Thanks @SamA74 for the encouragement but for now I’m going to stick with Eriks solution, but thanks again
Well I’ve made a tonne of progress thanks to a skip load of help from Sitepoint members. Now I would like to learn how to make the on hover images reponsive so they can fit a mobile.
The first two bride pics on the grid have the on hover effect I was after thanks to Erik. Now I wonder is there a way to make the larger on hover image fit better for mobile?
A good tutorial source would be good, I would like to see if I could do it my self first, just need a bit of guidance
Heres the code pen:
http://codepen.io/Pingbat/pen/oXpjWN
Thanks again,
David
Mobile doesn’t support hover, so perhaps you should rethink this? Users on mobile would have to tap the images. Do you plan on linking these brides to another page anytime in the future?
Hi Ryan,
“Do you plan on linking these brides to another page anytime in the future”,
no not on the page i’ve been working on. This page is a kind off inner page showing examples of a wedding.
But on the home page yes the grid would need to click through to an associated inner page, originally i used the below as my home page but then the grid layout gets bent out of shape wjth different viewport sizes so ended up working on what we’ve got now,
http://codepen.io/Pingbat/pen/xbBQqE
Maybe the home page could use this grid which i like but just does not have hover over enlarged images and is hyperlinked thrrough to the relevant wedding.
Hope this all makes sense
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
