Here we have another method for displaying/organising thumbs. Since releasing a preview of it to you guys I've decided that it would be best to retire the old thumb table method and use this instead. If you prefer thumb tables, I wont stop you, but right now I'd consider them obsolete - this new method is about as elegant as it's going to get.

So, with that out of the way, on with the show. I've noticed that some people will feature a bunch of thumbs from one deviant and include their avatar, ie:

Mature Content

by


...with a couple of variations on that theme. Well, you know me, once I started seeing this sort of thing again and again I just had to come up with a way to get it wearing some CSS fancypants. If you glance below you'll see I came up with two different layouts, both use the same HTML structure - only difference between them is one has the class names 'feature top' and the other 'feature side', the CSS takes care of the rest. This means you only have to learn one set of HTML, and by choosing 'top' or 'side' you can switch between the two layouts.

Before I get into those however, I want to share this new method of aligning thumbs automatically.


The death of thumb tables

In the process of writing the layouts below, I've come up with an easier way to organize thumbs nicely - see below how they're aligned pleasingly, like the old thumb tables? The code for it is much simpler than the thumb table code, and allows for thumbs to wrap onto new lines - something which couldn't be done with the thumb table code.

.feature .shadow{
  background:none!important;
  display: inline-block;
  height: 150px;
  text-align: center !important;
}

.feature .shadow img{
  vertical-align: middle !important
}
.feature can be changed to whatever you hold your thumbs in and it should take care of itself. For instance, below is a div with no other CSS applied to it other than that above (with align="center" applied to the div, you could use the CSS: text-align:center instead):



So, if you have your thumbs in div boxes already, just add the CSS above and it should work for you automatically. Remember though, stamps will be affected by this code also so keep those out of your thumb boxes.

If you want them to be horizontally centered also, so that two or more lines of thumbs align into a grid, add width: 150px (sine-out pointed this out in his comment below). You can also increase the width/height values if you want more space around the thumbnails.

Das HTML
Okay, for the layouts below, this is the HTML you'll use:

<div class="feature">
<sup>:iconthespook:...description goes here</sup>

:thumb###: :thumb###: :thumb###: etc.
</div>


...simple, eh? If you write it like that (and use the CSS below), you'll get the following:



Doesn't look too pretty (well, I guess it might if you removed the description), so that's why you need to trigger one of the layouts by changing the class to feature top, feature side or feature side nodesc (if you want the layout with the avatar on the side without the space for a description) - ie:

<div class="feature side">
<sup>...description goes here</sup>

:thumb###: :thumb###: :thumb###: etc.
</div>


To make a tooltip appear when you hover over a thumb, use the following HTML:

<i>:thumb###:<u>...comment goes here</u></i>

Das CSS
.feature{
  border: solid #ccc;
  border-width: 1px 0;
  padding: 5px 10px
}

.feature br{display: none}
.feature sup br{display: inline}

.feature .shadow{
  height: 150px;
  text-align: center !important;
  vertical-align: middle !important
}

.feature .shadow a:hover img{outline: 2px solid #f00}

.feature.top{background:#eee}
.feature.top sup{
  vertical-align: baseline !important;
  font-size: 13px;
  min-height: 50px;
  padding: 5px 5px 5px 65px;
  background: #f5f5f5;
  display: block;
  position: relative;
  margin: -5px -10px 5px -10px
}

.feature.side{
  padding-left: 160px;
  border-width: 0 0 1px 0;
  margin-bottom: -10px;
  overflow:auto
}
.feature.side sup{
  vertical-align: top;
  width: 160px;
  padding: 5px;
  float: left;
  display: block;
  position: relative;
  margin: 5px 5px 0 -160px
}

.feature.top sup .avatar{position: absolute !important; top: 5px; left: 5px}
.feature.side sup .avatar{float: left; margin-right: 10px}

.feature.side.nodesc{padding-left: 50px}
.feature.side.nodesc sup{width: 50px; margin-left: -50px}


.feature i{position:relative}
.feature i u{
  display: none;
  position: absolute;
  bottom: 5px;
  right: -20px;
  padding: 2px;
  background: beige;
  border: 1px solid #aaa;
  text-decoration: none;
  font-style: normal
}
.feature i:hover u{display: block}

Below you'll find examples of the two layouts. The class names needed to trigger them are in the headings.

"feature side"
This will be the layout I think most people would use, as it mirrors the general way people are doing things already. I've included the ability to have a little description, but you don't have to write one. Remember - If you want them to line up in a grid, add 'width: 150px' !





"feature side nodesc"
...for the lazy people who don't want to write anything about the artist they are featuring






"feature top"
To give more horizontal room for thumbs, I created this version, with the description at the top.