ChinkoneI'm currently working on a theme with the Jquery Masonry plugin integrated. This plugin makes it possible to float your elements in a nice way, instead of keeping big gaps while floating.
Masonry is a layout plugin for jQuery. Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.
All the featured images of the page should be stacked seamlessly without gaps between the elements. 'Seamlessly' is the idea, but each picture keeps approx. 3 pixels of white space below the picture. I cannot succeed to remove this. See an example of the website here.
When replacing the <?php the_post_thumbnail('full', array('class' => 'thumb')); ?> with <div style="width:420px; height:233px; background-color:#FC0;"></div> it works perfectly. No whitespace and everything is stacked seamlessly. The issue is probably the <img> inside the <div class="box">. I've tried to style the <img> in various different ways without success. Any suggestion is welcome.
index.php
<div id="wrapper">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="box">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
<!-- TEST DIV.
<div style="width:420px; height:233px; background-color:#FC0;"></div>
-->
<?php the_post_thumbnail('full', array('class' => 'thumb')); ?>
<span class="thumb-slide">
<ul>
<li><?php the_title(); ?></li>
<li><?php the_subtitle() ?></li>
</ul>
</span>
</a>
</div>
<?php endwhile; ?>
<?php else : ?>
<h2>Not Found</h2>
<?php endif; ?>
</div>CSS
#wrapper {
padding: 0;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 80px;
margin-left: 20px;
}
.box {
float: left;
margin: 0px;
padding: 0px;
}
.box img {
margin: 0px;
padding: 0px;
overflow: hidden;
}
.thumb {
margin: 0px;
padding: 0px;
}
corydonovan