[Solved] Catalog thumbnails...horizontal instead of vertical?

[antonylast]

Quick question about the catalog module. Think I'm making good progress with cmsmadesimple now* and have got a site almost complete at http://www.apsleyway.co.uk.

Only problem I've got is way the thumbnails are displayed - at the moment they simply follow each other vertically, leaving a lot of white space. I'm sure there is a way to get them to display horizontally in rows (as per the diagram attached), I just can't work it out...it's beginning to annoy me now!

What I'd ideally like is the rows to then 'repeat', i.e. as many thumbs as possible in the first row (left to right)...then the second, then the third etc. - through to the end of the thumbnails available.

Can someone point me in the right direction?! Thanks in advance.

* - Full credit to those of you that have coded parts and offered support, it's an excellent community.

[sn3p]

You can do this with CSS, but first you need to modify your template.
Remove all the
tags at the end of each category_item div.
And add the clearfix class to the wrapper div (category_items).

After that the output should be something like this:

Code: Select all

<div class="category_items clearfix">
   <div class="category_item"><a href="http://www.apsleyway.co.uk/index.php?page=union-jacqueline"><img src="http://www.apsleyway.co.uk/modules/Cataloger/Cataloger.Image.php?i=union-jacqueline_s_1_70_0.jpg&ac=71674" alt="Union Jacqueline"/></a><br /><a href="http://www.apsleyway.co.uk/index.php?page=union-jacqueline">Union Jacqueline</a></div>
   <div class="category_item"><a href="http://www.apsleyway.co.uk/index.php?page=samantha"><img src="http://www.apsleyway.co.uk/modules/Cataloger/Cataloger.Image.php?i=samantha_s_1_70_0.jpg&ac=44429" alt="Samantha"/></a><br /><a href="http://www.apsleyway.co.uk/index.php?page=samantha">Samantha</a></div>
   <div class="category_item"><a href="http://www.apsleyway.co.uk/index.php?page=albert-s-angel"><img src="http://www.apsleyway.co.uk/modules/Cataloger/Cataloger.Image.php?i=albert-s-angel_s_1_70_0.jpg&ac=86612" alt="Albert's Angel"/></a><br /><a href="http://www.apsleyway.co.uk/index.php?page=albert-s-angel">Albert's Angel</a></div>
   <div class="category_item"><a href="http://www.apsleyway.co.uk/index.php?page=dawn"><img src="http://www.apsleyway.co.uk/modules/Cataloger/Cataloger.Image.php?i=dawn_s_1_70_0.jpg&ac=08380" alt="Dawn"/></a><br /><a href="http://www.apsleyway.co.uk/index.php?page=dawn">Dawn</a></div>
   <div class="category_item"><a href="http://www.apsleyway.co.uk/index.php?page=canary-huntress"><img src="http://www.apsleyway.co.uk/modules/Cataloger/Cataloger.Image.php?i=canary-huntress_s_1_70_0.jpg&ac=86120" alt="Canary Huntress"/></a><br /><a href="http://www.apsleyway.co.uk/index.php?page=canary-huntress">Canary Huntress</a></div>
   <div class="category_item"><a href="http://www.apsleyway.co.uk/index.php?page=chinese-whispers"><img src="http://www.apsleyway.co.uk/modules/Cataloger/Cataloger.Image.php?i=chinese-whispers_s_1_70_0.jpg&ac=49279" alt="Chinese Whispers"/></a><br /><a href="http://www.apsleyway.co.uk/index.php?page=chinese-whispers">Chinese Whispers</a></div>
   <div class="category_item"><a href="http://www.apsleyway.co.uk/index.php?page=the-edge-of-blue"><img src="http://www.apsleyway.co.uk/modules/Cataloger/Cataloger.Image.php?i=the-edge-of-blue_s_1_70_0.jpg&ac=05062" alt="The Edge of Blue"/></a><br /><a href="http://www.apsleyway.co.uk/index.php?page=the-edge-of-blue">The Edge of Blue</a></div>
   <div class="category_item"><a href="http://www.apsleyway.co.uk/index.php?page=rose-angel"><img src="http://www.apsleyway.co.uk/modules/Cataloger/Cataloger.Image.php?i=rose-angel_s_1_70_0.jpg&ac=51603" alt="Rose Angel"/></a><br /><a href="http://www.apsleyway.co.uk/index.php?page=rose-angel">Rose Angel</a></div>
   <div class="category_item"><a href="http://www.apsleyway.co.uk/index.php?page=chips-girl"><img src="http://www.apsleyway.co.uk/modules/Cataloger/Cataloger.Image.php?i=chips-girl_s_1_70_0.jpg&ac=69921" alt="Chips Girl"/></a><br /><a href="http://www.apsleyway.co.uk/index.php?page=chips-girl">Chips Girl</a></div>
</div>

Now add the following to your CSS:

Code: Select all

.category_item {
   width: 100px;
   float: left;
   margin-right: 5px;
   margin-bottom: 10px;
   text-align: center;
}

/* Clearing floats */
.clearfix:after {
   content: ".";
   display: block;
   height: 0;
   line-height: 0;
   font-size: 0;
   clear: both;
   visibility: hidden;
}
* html .clearfix {
   height: 1%;
}
.clearfix {
   display: inline-block;
}
html[xmlns] .clearfix {
   display: block;
}
/* Hide from IE Mac \*/
.clearfix {display: block;}
/* End hide from IE Mac */

That should do it

[antonylast]

I love you... 

Another fine example of the help from this community - thank you so much!