Journal CSS: Thumb table

Featuring thumbs is something we all like to do in our journals, but a problem has always been that when they are of different heights and widths it can look a bit haphazard.

eg:

:thumb37740281: :thumb51906080:

For a while now I've had an idea in my head that it'd be possible to get these to center vertically and hence look much nicer, but it wasn't till wroth came and gave me a poke that I actually tried to get it happening. So, say thanks to uncle wroth kiddies, for this next edition of 'Journal CSS:'

Das fancypantaloons:

Note that the drop shadow is missing, it's unavoidable. I haven't tried coding a method that retains the drop shadow, but even if I did (and just thinking about it in my head I don't think it's possible, it's a technical restriction of CSS) it'd require extra code that'd make this a pain in the but to use day-to-day. So... forget everything I just wrote and use it how it is

Also, for those thinking of using a background image for each cell - the cells will shrink to fit the content under the current setup. To make it a fixed width rigid grid, change the remove the max- prefix from the width/height values.

The background colour can be changed, or made transparent if you wish - though if you do make the cell backgrounds transparent, might I suggest the following (or similar!):

.thumb_table img{border: 1px solid #aaa; outline: 1px solid #eee; padding: 3px}
.thumb_table img:hover{background: #f00}

It'll make things look purdy when they're all on their lonesome without dropshadows:



I wish I could make it an option to disable the border for things like emotes, but unfortunately the only way I could do that is with an attribute selector, and we're not allowed to use those.

The big red might be a bit much for people - so you can drop the padding and hover background color in favour of simply changing the border color on hover.

Das HTML:

Quite simple really. You have to separate them into rows, I've chosen to put three per row but you can do more if you like - just keep in mind if you put too many they're going to vanish off the right side of your journal.

<div class="thumb_table">
  <i>:thumb#####: :thumb#####: :thumb#####:</i>
  <i>:thumb#####: :thumb#####: :thumb#####:</i>
  <i>:thumb#####: :thumb#####: </i>
</div>

Das CSS

Unlike the HTML, the CSS is the opposite of simple, and was a somewhat pain in the ass to write. Lucky thing for you - none of this matters, because once you paste it in you never have to worry about it again (unlike me, who's going to be having nightmares about it for months ).

.thumb_table br{display:none}
.thumb_table{
  display: table;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 5px
}
.thumb_table i{display: table-row}
.thumb_table .shadow-holder{
  display: table-cell!important;
  max-width: 160px;
  max-height: 160px;
  vertical-align: middle!important;
  text-align: center;
  padding: 0!important;
  margin: 0!important;
  border-spacing: 2px;
  background: #f2f2f2;
  border:1px solid #e4e4e4;
}
.thumb_table .shadow-holder:hover{border-color: #aaa}

.thumb_table .shadow{
  display: inline!important;
  background: none!important;
  padding: 0!important;
  margin: 0!important
}
.thumb_table a{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  padding: 0!important;
  margin: 0!important
}


Update: In the version above, the hover effect (the dark grey border) is on .shadow-holder. While I think that looks okay with the colours of my journal skin, it might not look good in yours - so you might want to move the hover effect to the image itself. Additionally, when something highlights like that, people usually expect it to be clickable, but only the image inside the box is clickable. Consider it a mistake I made when I first wrote this journal.

If I've left something out, or you're having trouble figuring this out, leave a comment silly!

Other Journal CSS journals:

• Journal CSS: Buttons
  How to make a CSS based image-map
  
• Journal CSS: Image list
  Turn a list into a fancy thumb viewing device.
• Journal CSS: Snazzy borders
  Create custom div borders
• Journal CSS: simple skin.
  A simple a stylish journal skin, perfect place to use the above tricks.