How to make Images in the various areas/boxes display in a 'grid' or horizontally?

[Heresy Miniatures]

Hello!
My website= www.heresyminiatures.com/shop

I'm trying to work out how to make product images in some of the boxes such as 'Customers also purchased' display in a nice neat series of rows rather than one long vertical list.

So when someone looks at the page they see several products alongside each other rather than having to scroll down a foot to get to the bottom of the list of products. (I would also like to be able do this to the Category and sub-Category icons!)

As an example look at this product's associated products in the 'Customers also bought' box:

http://www.heresyminiatures.com/shop...roducts_id=147

I've got various zen-cart self-help books and haven't been able to track this down yet...

Is there a piece of code that should be altered or added so that images display across the page instead of down?

(And which files control the arrangement of the category icons and the 'customers also bought' box so i can edit them?)

All help appreciated. Please note i am very much a 'idiot's guide to' kind of developer, so any instructions kept simple, please!

[stevesh]

You can add this to your stylesheet:

.centerBoxContentsAlsoPurch {float:left;}

I don't have an Idiot's Guide, but there is a very handy Idiot's Tool :


Install the Firefox browser and the Web Developer plugin for Firefox. You can use those to see where in the stylesheet you change the styling of the various page elements.

Ctrl-Shift-Y will allow you to hover over a section of the page and see the class and id names for that section in the box at the top. The statements in the stylesheet that begin with # are id's and the ones that begin with dots are classes.

Ctrl-Shift-E will open the CSS editor and allow you to edit the stylesheet and see the changes in real time without changing anything permanently. An essential tool.

Some prefer Firebug, which does much the same thing.

(If you're using Firefox 4, you'll need to remap the editor shortcut, since Firefox has appropriated Ctrl-Shift-E for an internal function - I use Ctrl-Shift-Q.)

After that, it's mostly about understanding CSS.

[Heresy Miniatures]

Thanks a lot, Stevesh!

[Heresy Miniatures]

Still need to find a way to do the same with the category icons, though... any ideas?

[stevesh]

You didn't install the cool tool ...

Add .categoryListBoxContents to the rule mentioned above:

.centerBoxContentsAlsoPurch, .categoryListBoxContents {float:left;}

Then ask your template designer why he/she changed the float:left; for all these elements to float:center;. A stock Zencart site behaves the way you want it to.

[Heresy Miniatures]

I reckon because he's an idiot? ie it was me, tweaking things probably to see if anything/what changed when changing the template to make it look like i wanted it to. Probably altered the wrong thing with no visible effect on the homepage I was looking at.

[stevesh]

Then you need to give yourself a stern talking-to, and remind you that if you change CSS statements that have multiple elements, you need to separate the element you're looking to change from the others in the rule. In this case, if you want to float the logo left, you would remove #logo to its own rule and style it there:

#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
width: 100%;
text-align:center;
float: center;
}

#logo {float:left;}