Results 1 to 3 of 3
  1. #1
    Join Date
    Apr 2008
    Location
    Covington, Washington, United States
    Posts
    205
    Plugin Contributions
    1

    Default valign category images and product images to bottom

    Hey there,

    I have been having a terrible time trying to make my product listing thumbnails and my category thumbnails to the bottom of the TD element. From what I can tell, the product listing images are all in a DIV styled with the class "centerBoxContentsProducts centeredContent" with the DIV in a TD element.

    The category listing images are the same but the DIV they are in has the class "categoryListBoxContents". Anyone have any suggestions? Quick note, I want to keep the border that is around the cells the same height/width for all products/categories displayed on the page...

    site is http://www.litepockets.com

  2. #2
    Join Date
    Apr 2008
    Location
    Covington, Washington, United States
    Posts
    205
    Plugin Contributions
    1

    Default Re: valign category images and product images to bottom

    OK,

    Wow.... ok, so I did it!!! Amazing how simple something can be when you revisit it after sleep... however.. one problem remains... I would now like to have the item/category name "valign" to the top of the cell. In other words the image and everything beneath it will all be aligned to the bottom, but the item name or (.itemTitle) as the h3 class is called, will be at the top of the cell just beneath the border..

    BTW, those of you that are trying to figure out how to align the cell contents to the bottom (if you are using column grid layout), open

    includes/template/your_template/common/tpl_columnar_display.php

    change:
    PHP Code:
    <?php 
        
    echo '<td width="'. (intval($col_width) - 0.5) .'%" align="center" valign="top"><div' $r_params '>' $list_box_contents[$row][$col]['text'] .  '</div></td>' "\n";
         
    ?>
    to:
    PHP Code:
    <?php 
        
    echo '<td width="'. (intval($col_width) - 0.5) .'%" align="center" valign="bottom"><div' $r_params '>' $list_box_contents[$row][$col]['text'] .  '</div></td>' "\n";
         
    ?>
    I also added a class "grid_border" to the td:
    PHP Code:
    <?php 
        
    echo '<td class="grid_border" width="'. (intval($col_width) - 0.5) .'%" align="center" valign="bottom"><div' $r_params '>' $list_box_contents[$row][$col]['text'] .  '</div></td>' "\n";
         
    ?>
    My problem before was that I had a 1px border defined in the DIV class, so whenever I was able to get the valign="bottom" so work it looked like the cells were all different heights (because of the border around the DIV). But of course, putting this border in the class I just defined for the TD fixed that (that's the part I needed sleep to figure out.. lol... I know, don't laugh).

  3. #3
    Join Date
    Nov 2006
    Location
    Sydney, Australia
    Posts
    256
    Plugin Contributions
    1

    red flag Re: valign category images and product images to bottom

    Hi,

    I looked at your website and it looks great.

    How can I get my main page images to align like yours with the dots around them as well?

    I am using the column grid layout mod but it doesn't have a tpl_columnar_display.php file, the only file I found was in my template default which did Not have the code you replaced.

    Any help would be greatly appreciated.

    Best Regards,
    *Zen Cart eCommerce Solution - Putting the Dream of Owning an Online Business within reach of anyone!

 

 

Similar Threads

  1. Category images at top of main page instead of bottom?
    By xscd in forum Templates, Stylesheets, Page Layout
    Replies: 19
    Last Post: 16 Oct 2010, 09:00 AM
  2. Displaying product images alongside category images?
    By dperis in forum Templates, Stylesheets, Page Layout
    Replies: 0
    Last Post: 5 Nov 2008, 12:14 AM
  3. sub category images left to right not top to bottom
    By imperialis in forum Templates, Stylesheets, Page Layout
    Replies: 6
    Last Post: 26 Aug 2008, 05:15 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •