Whilst the above image illustrates my pain here goes… I was wanting this page to have a 2 rows of four images whatever the viewport size (or 3 rows of 4) but different viewport sizes makes the the grid placeholders for the images looses all form and shape,
So if i wanted to have say 12 images each row with 4 images should I wrap a div tag around them and some how control the images, keep them tidier if that makes sense?
to get that ordered grid9like formation, you may want to use display: table, table-row and table-cell.
Create a <div> wrapper as display: table, make your <ul>s display: table-row and <li>s table-cell. You will have to split the lists for each row.
html
FYI you don’t need to declare a table-row. The browser will automatically generate a table-row element if one isn’t declared (as defined in the spec). So let’s save up HTML and move the display:table to the UL and get rid of the wrapper div .
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
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 {}
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:
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:
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.
.
Ive applied SamA74 solution and its looking good to me.