Cataloger CSS 2 or 3 Column Layout

[sonictrip]

Hi,

I've been tearing my hair out trying to get this right all day and it still looks all over the place...!

Im using the Cataloger for displaying different products etc. and when you use the default "Category-CSS-based" sub-template for displaying Category pages, the products all appear down the left column on top of each other...

Im trying to make a 2 or 3 column layout and i've read a bit about float: left; and limiting the width of the div or something like that but i just cant get it right... Another person said to try changing {assign var="cols" value="3"} and that sets the number of columns on the "Category-Table-based" Cataloger template but thats not working either! I've tried the code in loads of different ways and normally after a good bit of trial and error i'll get it in the end but im completely stumped here, dunno why its not working...

So my last resort was to ask here and see if anyone can figure it out. The page is temporarily at http://www.cashandcarrykitchens.ie/CMS/ ... chen-range

Here's the code for the "Category-CSS-based" sub-template:

{$title}
{section name=numimg loop=$image_url_array}{/section}
{$notes}

  {if $hasnav == 1}
{$prev}{$navstr}{$next}
{/if}
    {section name=numloop loop=$items}
       
{$items[numloop].title}

    {/section}
    {if $hasnav == 1}
{$prev}{$navstr}{$next}
{/if}

And here's the code from the stylesheet converning the classes displayed in the template above:

div.category_items img,
div.category_item img,
td.category_items img,
td.category_item img
{
        float: left;
     
display:block;
height:112px;
/* Set link formatting*/
width:90px;
/* Thumb width*/

/* Thumb height*/
padding:10px 10px 10px 10px;
/* Thumb padding to form thumb frame */
/* You can set the above to 0px = no frame - but no hover indication!*/
margin:0px 0px 10px 0px;
background-color: white;
/*Background of thumb */
border-top:1px solid #eee;
/* Borders of thumb frame */
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
border-left:1px solid #eee;
text-decoration:none;
}

div.category_items img:hover,
div.category_item img:hover,
td.category_items img:hover,
td.category_item img:hover
{
        float: left;
     
display:block;
height:112px;
/* Set link formatting*/
width:190px;
/* Thumb width*/

/* Thumb height*/
padding:10px 10px 10px 10px;
/* Thumb padding to form thumb frame */
/* You can set the above to 0px = no frame - but no hover indication!*/
margin:0px 0px 10px 0px;
background-color: #F0F0F0;
/*Background of thumb */
border-top:1px solid #dedede;
/* Borders of thumb frame */
border-right:1px solid #afafaf;
border-bottom:1px solid #afafaf;
border-left:1px solid #dedede;
text-decoration:none;
}

It's gotta be something small that im just missing, does anyone have a clue how to get the 2 columns displaying or even 4 the way it is on the page now, but aligned and spaced properly?

Im using CMS MS v1.2.3 and gotta say, ive used osCommerce, Zencart, DragonflyCMS and Mambo and this is much better than them for sites that are not ecommerce! Love the way the templates work but having to learn all this extra CSS is a little bit of a pain but i know it'll be worth it 

Thanks a million for any help...!

[sonictrip]

Has nobody had problems before with a column layout cataloger?

I'd just like to find out how to display products in columns instead of rows, does anyone know how to do it?

[mechatech]

Did you get this problem solved? Because the website looks like it is displaying the images correctly now.
Nice looking site

[sonictrip]

Hi, thanks for that, yeah i got it working. I was missing the stylesheet class for one of the elements on the page, think it was .categoryitems or something, once the "float:left" was in on 3 of the classses it started working!

[JulieBel]

Would you mind sharing with us how you got this to work?  I have been trying to find where to located the stylesheet for the css based template, so I can edit that, and have no idea where it is.

[sonictrip]

Hi JulieBel

The Stylesheet is located at "Admin / Layout / Stylesheets" The stylesheet being used will be one that is 'attached' to whatever templates you're using at "Admin / Templates" and across from your template name there's a little yellow and red CSS icon, click that to find which stylesheet you have attached to your template.

When adding products with the Cataloger module, you need to select either "Category-table-layout" or "Category-CSS-layout" obviously the latter selection will use CSS styling in your stylesheet.

Then in your stylesheet look for the classes:
.category_item
.category_items
.category_item a
.category_item a:hover

There may also be 'div' or 'td' links in front of those classes depending on the code in "Category-CSS-layout" whether you have everything wrapped in DIV tags or TD tags so those classes would look like:
div.category_item
td.category_item
div.category_items
td.category_items

Hope this helps!