img up

2016-05-02
Gallery of my sprites up now, can be seen here
While displaying them initially was very easy. Getting them to neatly display in a grid along with their names was a bit more complicated.
At first I had the image and text in the same div box, but while they aligned properly horizontally, images with long titles would wrap and raise the image up a line.
This was solved by placing the text in a separate div box. I'd then set their combined width to be 12.5% of the screen (To allow 8 columns). The issue with that is when you resize it and they become squished.
Setting a static min-width wouldn't work because it can split a image and text group to different rows. The solution was a bit of javascript.

var windowwidth = parseInt($("body").css("width"), 10);
$(".imgbox").css("min-width", ((windowwidth % 250)/((windowwidth-windowwidth % 250)/250))*.24 + 60);
$(".txtbox").css("min-width", ((windowwidth % 250)/((windowwidth-windowwidth % 250)/250))*.76 + 190);


This sets the minimum width of each pair to 250px, plus an equal portion of the remainder of the screen width, solving my problem for today.