Making subcategory images all the same size?

Is it possible to get all the images displaying within subcategories all one size? I don't mean the actual image but say some sort of wrapper around it, as at the moment depending on the height of the image the text below isn't equal to the category next to it etc...

Thanks

RobM:

Is it possible to get all the images displaying within subcategories all one size? I don't mean the actual image but say some sort of wrapper around it, as at the moment depending on the height of the image the text below isn't equal to the category next to it etc...

Thanks

can you please elaborate or show sample ?

Yeah, this is what I mean:

If you look at the bottom left product you can see the text is raised higher slightly, this is because the image height is slightly smaller than the others.

I'd like to add a div around the images or something, so I can give that a fixed height without effecting the actual size of the images, and the text will all line up.

Hope that's a bit clearer. :smile:

I wonder what would happen if you styled the text to bottom-align and the images to top-align? The top edge of all the images should be the same level and the bottom of all the text lines should be the same level. No extra div required.

Rob

Doesn't seem to make any difference!

.categoryListBoxContents img {vertical-align: top;}
.categoryListBoxContents a {vertical-align: bottom;}

Ah well, worth a try.

Link to the site always helps us diagnose problems.

Rob

This is one example:

http://www.ukpipelinetools.co.uk/index.php?main_page=index&cPath=6

Vertical alignment in CSS is a pain. Some suggested methods work on text, but not in IE7, some work with images, but require a separate extra div around things if there's more than just the image (as in this case), and so on.

My sole sugegestion, if this is important enough, is to convert that display to a table-based layout and use the easy table-based vertical alignment methods, which you can do via CSS.

There's no sin in using a table for this, because you are definitely displaying tabular data.

Rob

@RobM

What you can do in this case is: you can wrap the image in a div, then specify the fixed height for that div. You will have to change the height in css everytime you change the listing image size in admin, but I suspect you wont do that often anyway.

Yes Yellow, that's what I was suggesting.

I think the file I need to edit is includes/modules/custom/category_row.php

    //    $categories->fields['products_name'] = zen_get_products_name($categories->fields['products_id']);

    $list_box_contents[$row][$col] = array('params' => 'class="categoryListBoxContents"' . ' ' . 'style="width:' . $col_width . '%;"',
                                           'text' => '<a href="' . zen_href_link(FILENAME_DEFAULT, $cPath_new) . '">' . zen_image(DIR_WS_IMAGES . $categories->fields['categories_image'], $categories->fields['categories_name'], SUBCATEGORY_IMAGE_WIDTH, SUBCATEGORY_IMAGE_HEIGHT) . '<br />' . $categories->fields['categories_name'] . '</a>');

    $col ++;
    if ($col > (MAX_DISPLAY_CATEGORIES_PER_ROW -1)) {
      $col = 0;
      $row ++;
    }
    $categories->MoveNext();
  }
}
?>
```Could you tell me how i'd put my div in there?

Thanks.

OK i've got my div in there now acting as a wrapper.

<div class="categoryListBoxContents" style="width:33%;"><div class=\"subcatimgwrap\"><a href=\"http://www.ukpipelinetools.co.uk/index.php?main_page=index&cPath=6_18\"><img src="images/sub-pipethreadingtools.jpg" alt="Pipe Threading Tools" title=" Pipe Threading Tools " width="100" height="80" /></div><br />Pipe Threading Tools</a></div>

Adding a width and a height to it dosen't do anything though, the text/images are still all over the place!

.subcatimgwrap img{width:100px; height:100px;}

http://www.ukpipelinetools.co.uk/index.php?main_page=index&cPath=6

:frusty:

You dont set height and width for the img, you set it for the div itself.

here is how i would do it

...........

then set fixed w and h for .productImage